Zum Hauptinhalt springen

Widget Layout-Anpassung

Passen Sie das Aussehen und Verhalten des Liefer-Widget in Ihrem Storefront an, um es an Ihre Marke anzupassen und das Kundenerlebnis zu optimieren.

Zugriff auf Layout-Einstellungen​

  1. Gehen Sie zu Widgets > Layout im Scrollengine Dashboard
  2. Wählen Sie das anzupassende Widget (Cart Page oder Cart Drawer)

Layout-Optionen​

Anzeige der Liefermethoden​

Wählen Sie, wie die Liefermethoden dargestellt werden:

  • Tabs — Horizontale Tabs oben (am besten für 2–3 Methoden)
  • Radio Buttons — Vertikale Liste mit Radio-Auswahl
  • Dropdown — Kompakter Dropdown-Selektor (am besten für platzbeschränkte Layouts)

Kalender-Stil​

  • Inline-Kalender — Vollständige Monatsansicht, eingebettet im Widget
  • Kompakter Kalender — Scrollbarer Datumsstreifen, der die nächsten 7–14 Tage anzeigt
  • Dropdown-Kalender — Datumsauswahl, die sich per Klick öffnet

Zeitfenster-Anzeige​

  • Raster — Zeitfenster als anklickbare Karten in einem Raster
  • Liste — Vertikale Liste der Zeitfenster
  • Dropdown — Zeitfenster in einem Dropdown-Selektor

Reihenfolge der Tages- und Zeitauswahl​

Konfigurieren Sie, ob Kunden auswählen:

  1. Zuerst Datum, dann Zeit — Standardablauf
  2. Zuerst Liefermethode, dann Datum und Zeit — Geführter Ablauf für Shops mit methodenspezifischer Terminplanung

Gestaltung​

Farben​

  • Primärfarbe — Wird auf ausgewählte Zustände, Buttons und aktive Tabs angewendet
  • Textfarbe — Für Beschriftungen und Beschreibungen
  • Hintergrund — Hintergrund des Widget-Containers

Rahmen und Abstände​

  • Rahmenradius — Abgerundete oder scharfe Ecken
  • Innenabstand (Padding) — Innerer Abstand des Widget-Containers
  • Abstand (Spacing) — Zwischenraum zwischen den Widget-Komponenten

Schriftart​

Das Widget übernimmt standardmäßig die Schriftart Ihres Shopify Theme. Sie können dies bei Bedarf im Custom CSS-Feld überschreiben.

Custom CSS​

Für erweiterte Gestaltung über die integrierten Optionen hinaus:

  1. Gehen Sie zu Widgets > Layout > Custom CSS
  2. Fügen Sie Ihre CSS-Regeln hinzu
  3. Sehen Sie sich die Änderungen in der Vorschau an, bevor Sie speichern
vorsicht

Custom CSS kann bei Scrollengine Widget-Markup-Updates nicht mehr funktionieren. Verwenden Sie klassenbasierte Selektoren und testen Sie nach App-Updates.

Vorschau​

Nutzen Sie die Live-Vorschau im Dashboard, um Ihre Änderungen vor der Veröffentlichung zu überprüfen. Wechseln Sie zwischen Desktop- und Mobilansicht, um sicherzustellen, dass das Widget auf allen Geräten gut aussieht.