Passe den Warenkorb-Drawer an deinen Shop an

Öffne dein Warenkorbdesign und wähle Stil. Dieser Tab steuert das allgemeine Erscheinungsbild des Drawers und wie er geöffnet wird.

Farben auswählen

(1) Wähle eine Designfarbe aus. (2) „Getönt“ leitet einen hellen Hintergrund und passende Textfarben ab. (3) „Farben bearbeiten“ enthält die Grundfarben des Drawers und die aktivierten Blöcke. Die angrenzende Vorschau verwendet Beispielprodukte.

Die Zeile Designfarben bietet Farben aus deinem veröffentlichten Theme. Wähle eine Farbe und anschließend einen Palettenstil: Klar, Getönt oder Dunkel. Du kannst auch eine benutzerdefinierte Farbe auswählen oder eine zufällige Farbe ausprobieren.

Standard stellt die Standardfarben wieder her und behält dabei das Layout bei, etwa die Drawer-Breite und den Eckenradius.

Die Farben eines Blocks ändern

Unter Farben bearbeiten enthält die erste Zeile, Drawer, die Grundfarben: Hintergrund, Text, Akzent, Akzenttext, gedämpfter Text, Ersparnis und Rahmen. Darunter hat jeder Block des Drawers eine eigene Zeile, zum Beispiel Kopfzeile, Ankündigungsleiste, Belohnungsleiste, Upsells, Fußzeile und Checkout-Button. Die Zeile eines Blocks wird angezeigt, wenn dieser Block aktiviert ist.

Lass die Farbe eines Blocks leer, damit der Block die Drawer-Farben übernimmt. Wenn du eine Designfarbe, eine benutzerdefinierte oder zufällige Farbe oder Standard auswählst, werden alle Blockfarben gelöscht, sodass der Drawer mit einer einheitlichen Gestaltung beginnt.

Layout des Drawers festlegen

(1) Lege Position, Layout, Headerhöhe und Breite unter Layout fest. Bei Floating wird der Abstand zu den Rändern angezeigt. Setze ihn hier auf 16 px. (2) Lege Eckenradius, Textgröße und Schatten unter Form und Text fest. Prüfe die gespeicherte Breite im Shop.

Die Karte Layout legt fest, wo der Drawer sitzt und wie er sich verhält:

Position des Drawers: Wähle den linken oder rechten Rand.
Layout des Drawers: Attached liegt direkt am Rand an, Floating lässt Platz um den Drawer und zeigt Abstand zu den Rändern von 0 bis 80 px an.
Headerhöhe: Standard oder Kompakt. Kompakt halbiert den Platz über und unter dem Warenkorbtitel, sodass auf kleinen Bildschirmen mehr vom Warenkorb sichtbar ist.
Breite des Drawers: von 280 bis 700 px.
Warenkorb öffnen, wenn ein Produkt hinzugefügt wird: siehe unten unter Automatisches Öffnen.

Die Vorschau im Editor verwendet eine eigene feste Breite, damit die Steuerelemente nutzbar bleiben. Speichere und prüfe den Shop, um die tatsächliche Breite des Drawers zu beurteilen. Auf einem schmalen Bildschirm wird der Drawer auf den verfügbaren Platz begrenzt.

Form und Text festlegen

Die Karte Form und Text enthält die letzten Anpassungen:

Eckenradius: von 0 bis 20 px.
Textgröße: von 90 bis 120 %. Sie skaliert den gesamten Text des Drawers gleichzeitig und behält die Schriftart deines Themes bei.
Schatten: Tiefeneffekte ein- oder ausschalten.

Produktbilder anpassen

Bildform ist Quadrat oder Hochformat (3:4). Sie gilt für Bilder von Warenkorbpositionen und alle Upsell-Bilder, sodass der gesamte Drawer einheitlich zugeschnitten wird.

Die Karte Bilder enthält alle Bildgrößen an einem Ort: Bildgröße der Warenkorbposition, Bildgröße für Upsells in der Liste (Upsells in den Layouts Vertikale Liste und Einer nach dem anderen), Bildgröße für Carousel- und seitliche Upsells (das Carousel-Layout und jede seitliche Upsell-Karte) sowie Bildgröße für Add-ons.

Rahmen um Bilder von Warenkorbpositionen fügt jedem Produktfoto im Warenkorb eine dünne Linie hinzu. Aktiviere diese Option, wenn deine Fotos einen weißen Hintergrund haben, damit sie sich vom Drawer abheben. Neue Warenkörbe starten ohne Rahmen, und Upsell- sowie Add-on-Bilder erhalten nie einen.

Automatisches Öffnen steuern

(1) Der Drawer liegt innerhalb des Seitenrands, hat abgerundete Ecken und einen hellblauen Hintergrund. (2) Der Checkout-Button verwendet die ausgewählte Akzentfarbe.

Warenkorb öffnen, wenn ein Produkt hinzugefügt wird befindet sich auf der Karte Layout. Wenn du die Option deaktivierst, wird der Drawer nach dem Hinzufügen nicht mehr automatisch geöffnet. Kundinnen und Kunden können ihn weiterhin über das Warenkorbsymbol öffnen.

In diesem Beispiel sorgt eine blaue Themefarbe mit Tinted und Floating für einen hellblauen Hintergrund und einen Abstand von 16 px. Speichere und prüfe den Shop auf Desktop und Mobilgeräten. Für Änderungen über diese Steuerelemente hinaus siehe benutzerdefiniertes HTML und CSS. Benutzerdefiniertes CSS befindet sich unten im Bereich Style, unter Advanced.