Skip to main content
Du kannst einen Warenkorb auf zwei Arten in der Vorschau ansehen: live im Editor, während du ihn baust, und auf deinem Storefront-Theme, bevor er öffentlich wird.

​
Der Editor-Canvas

Die Mitte des Cart-Editors ist eine Live-Vorschau, die den echten Warenkorb rendert. Sie zeigt beide Warenkorb-Zustände nebeneinander — eine Filled cart-Karte und eine Empty cart-Karte —, sodass du beide während der Arbeit sehen kannst.
  • Wähle, welchen Zustand du bearbeitest, mit dem Filled / Empty-Umschalter in der Seitenleiste oder durch Klicken auf den Titel über einer Karte. Ein Klick in eine Karte wechselt nicht den Zustand — er wählt den Block unter deinem Cursor aus. Die aktive Karte ist umrandet, und der Block, den du bearbeitest, erhält seine eigene Hervorhebung.
  • Zoome mit der Zoom-Pille direkt auf dem Canvas (25 %–200 %): + und − gehen in 10-%-Schritten, und ein Klick auf die Prozentzahl setzt auf 75 % zurück. Strg/Cmd + Scrollen zoomt um deinen Cursor herum, normales Scrollen und Ziehen verschieben den Ausschnitt.
  • Die Vorschau spiegelt deine Design-Einstellungen und dein Custom CSS live wider, während du sie änderst.

​
Vorschau in deinem Storefront

Verwende Preview bei einem Warenkorb, um ihn in einem neuen Tab auf einem echten Theme zu sehen, ohne ihn öffentlich zu machen:
  • Live-Warenkörbe öffnen direkt deinen Storefront — der Live-Warenkorb ist bereits das, was Käufer sehen.
  • Entwurfs-Warenkörbe öffnen eine Theme-Vorschau. Du wählst, auf welchem Theme die Vorschau laufen soll (dein Haupt-Theme ist der Standard), und Aftersell stellt den Entwurfs-Warenkorb nur für deine Vorschau-Sitzung auf diesem Theme bereit, ohne deinen Live-Warenkorb anzutasten. Das App-Embed muss auf dem gewählten Theme aktiviert sein.
Entwurfs-Vorschauen spiegeln das Live-Verhalten des Warenkorbs möglicherweise nicht vollständig wider — betrachte sie als gute Annäherung und mache nach dem Veröffentlichen einen letzten Check.
Speichere deine Änderungen vor der Vorschau — der Editor fordert dich zum Speichern auf, damit die Vorschau deinen neuesten Stand widerspiegelt.

​
Leerer vs. gefüllter Zustand

Beide Zustände sind im Editor-Canvas immer verfügbar (die zwei Karten), sodass du den leeren und den gefüllten Warenkorb unabhängig voneinander gestalten und prüfen kannst. Im Storefront sehen Käufer den Zustand, der ihrem Warenkorb entspricht.

​
Beispieldaten-Szenarien

Das Einstellungs-Panel des Cart items-Blocks hat einen Preview-Abschnitt mit einer Sample data-Auswahl, mit der du die Editor-Vorschau zwischen Line-Item-Szenarien umschalten kannst, um zu prüfen, wie jedes aussieht, ohne einen passenden Warenkorb zu bauen: Deine Auswahl betrifft nur die Editor-Vorschau. Sie wird nie im Warenkorb gespeichert und wird zurückgesetzt, wenn du den Editor neu lädst.