> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Warenkörbe in der Vorschau ansehen
> Sieh dir deinen Aftersell Cart vor dem Veröffentlichen in der Vorschau an — im Editor-Canvas und auf deinem Live-Storefront-Theme.
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](/de/aftersell/cart/design-settings) und dein [Custom CSS](/de/aftersell/cart/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](/de/aftersell/cart/cart-items-block) 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:
| Szenario | Was es zeigt |
| --------------------- | ---------------------------------------------------------------------------------- |
| **Standard product** | Ein einzelnes Produkt mit angewendetem Rabatt. |
| **Long product name** | Ein Produkt mit sehr langem Titel, um Textumbruch und Überlauf zu prüfen. |
| **Bundle** | Eine Bundle-Ankerzeile mit ihren untergeordneten Artikeln. |
| **Subscription** | Eine Abo-Zeile mit ihrem Selling-Plan-Label. |
| **All item types** | Der lange Produktname, die Abo- und die Bundle-Zeilen zusammen in einem Warenkorb. |
Deine Auswahl betrifft nur die Editor-Vorschau. Sie wird nie im Warenkorb gespeichert und wird zurückgesetzt, wenn du den Editor neu lädst.