Login-Formular

Ausgewählte Links

1. Shopify-Dokumentation zu Abschnitten und Blöcken
2. Company XYZ-Dokumentation zu Einstellungen für Abschnittshintergründe
3. Company XYZ-Dokumentation zu Einstellungen für den Abschnittsinnenabstand
4. Company XYZ-Dokumentation zu Trennlinien-Einstellungen
5. Company XYZ-Dokumentation zu Layout-Breiten-Einstellungen

Hilfreiche Videos

Shopify Academy-Video: Ihren Shop anpassen

Shopify Academy-Video: Ihren Shop anpassen

Verwenden Sie diesen Abschnitt, um den Haupt-Anmeldebereich zu steuern, den Kunden zum Zugriff auf ihr Konto verwenden. So können Sie die Formulierung und Darstellung der Seite verfeinern und gleichzeitig dafür sorgen, dass das Login-Erlebnis klar und einfach zu bedienen bleibt.

Grundeinstellungen

Mit den Grundeinstellungen können Sie die Überschrift, die Zwischenüberschrift und das optionale Symbol anpassen, das mit dem Login-Formular angezeigt wird. Einen umfassenderen Überblick über das Setup finden Sie in der Shopify-Dokumentation zu Abschnitten und Blöcken. Dies ist der beste Ort, um eine kurze Willkommensnachricht hinzuzufügen, zu verdeutlichen, dass die Seite für zurückkehrende Kunden gedacht ist, oder den Ton an den Rest Ihres Shops anzupassen.

Wenn Sie die Überschrift oder Zwischenüberschrift leer lassen, kann der Abschnitt stattdessen den Standard-Theme-Inhalt verwenden. Das ist praktisch, wenn Sie schnell eine saubere Einrichtung wünschen, aber individuelle Texte sorgen in der Regel für ein gepflegteres Kontoerlebnis.

Tipp

Halten Sie den Text auf der Login-Seite kurz und praxisnah. Kunden kommen hier normalerweise, um sich anzumelden, nicht um zu stöbern oder Werbebotschaften zu lesen.

Farbeinstellungen

Diese Einstellungen überschreiben nur für diesen Abschnitt Ihre allgemeinen Theme-Farben. Verwenden Sie sie, wenn der Login-Bereich stärkeren Kontrast, einen weicheren Ton oder eine bessere Abstimmung mit einem benutzerdefinierten Hintergrund benötigt.

Sie können das Symbol, den Haupttext und die Zwischenüberschrift separat anpassen, um eine klare visuelle Hierarchie zu schaffen. Wenn Sie ein Hintergrundbild, einen Verlauf oder ein Video hinzufügen, prüfen Sie den Abschnitt sowohl auf dem Desktop als auch auf dem Mobilgerät, damit der Text gut lesbar bleibt. Explizite Farbauswahlen, Verläufe und Medienüberschreibungen lassen diesen Bereich eigenständiger wirken, während leere oder transparente Werte normalerweise die Fallback-Formatierung des Themes beibehalten.

Dekorative Hintergründe dürfen die Lesbarkeit niemals beeinträchtigen. Wenn der Login-Bereich schwerer zu erfassen ist, vereinfachen Sie den Hintergrund oder erhöhen Sie die Stärke des Overlays und den Textkontrast.

Standard-Abschnittseinstellungen

Abschnittshintergrund-Einstellungen

Verwenden Sie Abschnittshintergrund-Einstellungen, um eine Farbe, einen Verlauf, ein Bild oder ein Video hinter dem Login-Abschnitt hinzuzufügen. In diesem Abschnitt funktionieren Hintergründe am besten, wenn sie Ihre Marke unterstützen, ohne vom Formular abzulenken.

Overlay-Farbe und -Deckkraft helfen dabei, die Lesbarkeit über Bildern und Videos hinweg zu erhalten. Hintergrundmedien speziell für Mobilgeräte sind besonders nützlich, wenn Desktop-Grafiken ungünstig zugeschnitten werden oder auf kleineren Bildschirmen zu schwer wirken. Prüfen Sie daher beide Viewports, wenn Sie für jede Ansicht unterschiedliche Medien verwenden.

Padding-Einstellungen

Verwenden Sie Padding-Einstellungen, um den Abstand ober- und unterhalb des Login-Inhalts zu steuern. Das ist hilfreich, wenn sich die Seite zu gedrängt anfühlt oder wenn der Anmeldebereich harmonischer in das gesamte Seitenlayout eingebettet sein soll.

Der Abstand auf Desktop und Mobilgeräten kann separat angepasst werden, sodass Sie den Abschnitt über verschiedene Bildschirmgrößen hinweg ausgewogen halten können. Ein geringerer Padding-Wert auf Mobilgeräten hilft oft dabei, das Formular schneller sichtbar zu machen, ohne dass die Seite überladen wirkt.

Trennlinien-Einstellungen

Verwenden Sie Trennlinien-Einstellungen, um oben oder unten im Abschnitt eine Linie hinzuzufügen. Auf einer Login-Seite sind Trennlinien vor allem dann hilfreich, wenn Sie eine klarere Grenze zwischen diesem Abschnitt und dem umliegenden Inhalt wünschen.

Eine dezente Trennlinie reicht hier normalerweise aus. Wenn Sie die Farbe der Trennlinie transparent lassen, fällt der Abschnitt auf das allgemeine Verhalten der Rahmenfarbe zurück.

Breiten-Einstellungen

Verwenden Sie Breiten-Einstellungen, um die Inhaltsbreite und die gesamte Abschnittsbreite zu steuern. Bei den meisten Login-Seiten hält eine schmalere Inhaltsbreite das Formular fokussiert und leichter erfassbar.

Die Abschnittsbreite ist besonders wichtig, wenn Sie außerdem eine Hintergrundgestaltung verwenden. Wenn Sie Full-width- oder Full-bleed-Layouts testen, sehen Sie sie sich auch im Live-Storefront an, da die Einrahmung im Editor Breitenänderungen anders erscheinen lassen kann als auf der tatsächlichen Seite.

Nutzungshinweise

1. Halten Sie die Botschaft kurz. Verwenden Sie eine direkte Überschrift und knappen ergänzenden Text, damit sich Kunden schnell anmelden können.
2. Achten Sie auf den Kontrast. Wenn Sie Bilder, Verläufe oder Videos verwenden, passen Sie Overlays und Textfarben so lange an, bis der Abschnitt auf einen Blick gut lesbar bleibt.
3. Prüfen Sie beide Viewports. Desktop- und Mobilgeräte-Steuerelemente können Layout, Ausrichtung, Sichtbarkeit und Zuschnitt verändern. Prüfen Sie daher das Login-Formular auf beiden Bildschirmgrößen, bevor Sie veröffentlichen.
4. Bevorzugen Sie fokussierte Breiten. Ein schmalerer Inhaltsbereich eignet sich für Login-Seiten meist besser als breite Layouts, weil er die Aufmerksamkeit auf das Formular lenkt.
5. Passen Sie den mobilen Abstand an. Reduzieren Sie den Padding-Wert auf Mobilgeräten, wenn das Formular auf kleineren Bildschirmen zu weit unten sitzt.
6. Verwenden Sie klare Zustände. Halten Sie Erfolgs- und Fehlermeldungen gut lesbar, damit Kunden sich schnell zurechtfinden können, wenn das Formular leer ist, abgesendet wurde oder Validierungsfeedback anzeigt.