Warenkorb

Ausgewählte Links

1. Company XYZ-Dokumentation zum Custom liquid-Block
2. Company XYZ-Dokumentation zu den Einstellungen für den Innenabstand von Abschnitten
3. Company XYZ-Dokumentation zu den Abschnittshintergrund-Einstellungen
4. Company XYZ-Dokumentation zu den Trennlinien-Einstellungen
5. Company XYZ-Dokumentation zu den Breiten-Einstellungen für das Layout
6. Shopify-Dokumentation zu Abschnitten und Blöcken

Hilfreiche Videos

Video der Shopify Academy: Ihren Shop anpassen

Video der Shopify Academy: Ihren Shop anpassen

Dieser Abschnitt zeigt Warenkorbartikel an, wenn Produkte hinzugefügt wurden, und wechselt zur Nachricht für den leeren Warenkorb, wenn der Warenkorb leer ist. Verwenden Sie ihn, um das Styling und Layout der Warenkorbseite zu verfeinern und app-gestützte oder benutzerdefinierte Inhalte hinzuzufügen, wo sie die Kaufreise unterstützen.

Farbeinstellungen

Diese Farbsteuerelemente ermöglichen es Ihnen, das Styling der Warenkorbseite zu überschreiben, ohne Ihre breiteren Theme-Farben zu ändern. Sie sind besonders nützlich, um den Kontrast zu verbessern, Positionen klarer voneinander zu trennen oder Überschriften und unterstützende Beschriftungen leichter lesbar zu machen.

Halten Sie Text- und Symbolfarben zuerst gut lesbar und verwenden Sie Unterüberschriften- und Rahmenfarben dann etwas zurückhaltender für die Struktur. Kleine Anpassungen funktionieren auf einer auf den Nutzen ausgerichteten Seite wie dem Warenkorb in der Regel besser als drastische Farbwechsel.

Wenn Sie einen benutzerdefinierten Hintergrund oder ein Overlay hinzufügen, prüfen Sie den Kontrast für Artikeldetails, Summen und Aktionen erneut, damit der Warenkorb einfach zu verwenden bleibt.

Unterstützte Blocktypen

1. App
2. Custom liquid

App

App-Blöcke ermöglichen es installierten Apps, Funktionen oder Hinweise innerhalb des Warenkorb-Abschnitts zu platzieren. Verwenden Sie sie für Warenkorb-bezogene Ergänzungen wie Anreize, Hinweise oder andere Werkzeuge, die in der Nähe des Warenkorb-Inhalts gehören. Informationen zum Blockverhalten im Editor finden Sie in der Shopify-Dokumentation zu Abschnitten und Blöcken

Gehen Sie bei der Platzierung sparsam vor. Zu viele hinzugefügte Blöcke können den Warenkorb länger wirken lassen und vom Prüfen der Artikel sowie vom Fortfahren ablenken.

Benutzerdefiniertes Liquid

Der Benutzerdefiniertes Liquid fügt erweiterten benutzerdefinierten Inhalt innerhalb des Warenkorb-Abschnitts hinzu.

Verwenden Sie ihn, wenn Sie flexible Hinweise, App-Snippets oder andere benutzerdefinierte Ausgaben benötigen, die durch die integrierten Warenkorb-Einstellungen nicht abgedeckt sind. Dieser Block enthält außerdem eine eigene Sichtbarkeitseinstellung, was hilfreich ist, wenn unterstützende Inhalte nur auf Mobilgeräten oder nur auf Desktop angezeigt werden sollen.

Tipp

Wenn benutzerdefinierte Inhalte hilfreich, aber nicht wesentlich sind, sollten Sie erwägen, sie auf Mobilgeräten auszublenden, um die Warenkorbseite kürzer und leichter erfassbar zu halten.

Standard-Abschnittseinstellungen

Padding-Einstellungen

Padding-Einstellungen steuern den Abstand oberhalb und unterhalb des Warenkorb-Inhalts auf Desktop und Mobilgeräten. Verwenden Sie sie, um die Seite offener wirken zu lassen oder zusätzlichen Abstand zu reduzieren, wenn Ihr Warenkorb bereits längere Hinweise oder hinzugefügte Blöcke enthält.

Ein separates Padding für Mobilgeräte ist besonders nützlich, da Warenkorbseiten schnell lang werden können. Das Reduzieren des vertikalen Abstands auf kleineren Bildschirmen kann die Seite effizienter wirken lassen, ohne die Darstellung auf Desktop zu verändern.

Abschnittshintergrund-Einstellungen

Abschnittshintergrund-Einstellungen ermöglichen es Ihnen, dem Warenkorb-Abschnitt eine Hintergrundfarbe, einen Farbverlauf, ein Bild, ein Video und ein Overlay hinzuzufügen. Diese Einstellungen eignen sich am besten, wenn die Warenkorbseite markenkonformer wirken soll, während der Inhalt lesbar bleibt.

Verlaufsoptionen überschreiben einfarbige Farbauswahlen, und Overlay-Verläufe überschreiben Overlay-Farben. Sie können außerdem separate Hintergrundmedien für Mobilgeräte festlegen, was hilfreich ist, wenn Desktop-Bilder auf kleineren Bildschirmen ungünstig zugeschnitten werden.

Achtung

Starke Bildwelten oder Bewegungen hinter den Warenkorb-Details können die Lesbarkeit verringern. Verwenden Sie Overlays und Kontrastprüfungen, damit der Warenkorb zuerst funktional bleibt.

Trennlinien-Einstellungen

Trennlinien-Einstellungen fügen oben oder unten am Warenkorb-Abschnitt eine optionale Linie hinzu. Sie sind nützlich, wenn der Warenkorb eine klarere visuelle Abgrenzung zu benachbarten Inhalten benötigt.

Wenn Sie die Farbe der Trennlinie transparent lassen, fällt der Abschnitt auf die Theme-Rahmenfarbe zurück. Das ist oft der einfachste Weg, den Warenkorb mit dem restlichen Design konsistent zu halten.

Breiten-Einstellungen

Breiten-Einstellungen steuern sowohl die maximale Breite des Warenkorb-Inhalts als auch die Breite des Abschnitts-Wrapper. So können Sie den Warenkorb kompakt und leicht lesbar halten oder ihn in Kombination mit einem breiteren Seitenstil großzügiger wirken lassen.

Für die meisten Stores sorgt eine moderate Inhaltsbreite dafür, dass Positionen, Preise und Steuerelemente angenehm erfassbar bleiben. Die Wrapper-Breite ist vor allem dann wichtig, wenn Sie einen Hintergrund verwenden, da sie beeinflusst, wie weit sich diese visuelle Gestaltung über die Seite erstreckt.

Hinweis

Breitenänderungen können im Editor anders aussehen als auf der Live-Seite. Sehen Sie sich daher das tatsächliche Frontend in der Vorschau an, bevor Sie Layout-Entscheidungen abschließen.

Nutzungshinweise

1. Halten Sie den Warenkorb leicht erfassbar. Priorisieren Sie einen klaren Kontrast für Text, Symbole und Rahmen, damit Artikeldetails und Summen auf einen Blick lesbar bleiben.
2. Verwenden Sie zusätzliche Blöcke sparsam. Fügen Sie App- oder benutzerdefinierte Inhalte nur hinzu, wenn sie die Warenkorb-Reise unterstützen, statt mit den zentralen Warenkorb-Aktionen zu konkurrieren.
3. Passen Sie Mobilgeräte separat an. Prüfen Sie Padding, Sichtbarkeit und Hintergrundmedien für Mobilgeräte, damit der Warenkorb nicht unnötig lang oder visuell überladen wird.
4. Wählen Sie die Breite mit Bedacht. Eine ausgewogene Inhaltsbreite wirkt in der Regel besser als ein eingeengter Warenkorb oder einer, der Details zu weit über die Seite streckt.
5. Prüfen Sie beide Warenkorbzustände. Sehen Sie sich den Abschnitt mit Artikeln im Warenkorb und mit leerem Warenkorb in der Vorschau an, damit Styling und Abstände in beiden Situationen stimmig wirken.
6. Überprüfen Sie das Verhalten auf Desktop und Mobilgeräten. Vergleichen Sie beide Ansichten hinsichtlich Ausrichtung, Sichtbarkeit und Medienzuschnitt, insbesondere wenn Sie unterschiedliche Hintergründe verwenden oder Inhalte auf einer Bildschirmgröße ausblenden.
7. Halten Sie Formularrückmeldungen lesbar. Stellen Sie sicher, dass Mengenänderungen, Validierungsmeldungen sowie Leer- oder Erfolgszustände leicht zu lesen bleiben, wenn Kunden mit Warenkorb-Steuerelementen interagieren.
8. Berücksichtigen Sie den Produktkontext. Prüfen Sie den Warenkorb nach Änderungen an Varianten, Mengen oder Verfügbarkeit erneut, damit die angezeigten Aktionen und Artikeldetails weiterhin sinnvoll sind.