> ## 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.

# Winkelwagens previewen

> Bekijk een preview van je Aftersell Cart vóór publicatie — in het editor-canvas en op je live storefront-thema.

Je kunt een winkelwagen op twee manieren previewen: live in de editor terwijl je hem bouwt, en op je storefront-thema voordat hij openbaar wordt.

<div id="the-editor-canvas">
  ## Het editor-canvas
</div>

Het midden van de cart editor is een live preview die de echte winkelwagen rendert. Het toont **beide winkelwagenstaten naast elkaar** — een kaart **Filled cart** en een kaart **Empty cart** — zodat je beide ziet terwijl je werkt.

* **Kies welke staat je bewerkt** met de **Filled / Empty**-schakelaar in de zijbalk, of door op de **titel boven** een kaart te klikken. Klikken *binnen* een kaart wisselt de staat niet — het selecteert het blok onder je cursor. De actieve kaart heeft een omlijning, en het blok dat je bewerkt krijgt zijn eigen highlight.
* **Zoom** met de zoom-pil op het canvas zelf (25%–200%): `+` en `−` stappen per 10%, en klikken op het percentage reset naar 75%. Ctrl/Cmd + scrollen zoomt rond je cursor, gewoon scrollen en slepen verschuiven het beeld.
* De preview weerspiegelt je [design-instellingen](/nl/aftersell/cart/design-settings) en [aangepaste CSS](/nl/aftersell/cart/custom-css) live terwijl je ze wijzigt.

<div id="preview-on-your-storefront">
  ## Preview op je storefront
</div>

Gebruik **Preview** bij een winkelwagen om hem op een echt thema in een nieuw tabblad te zien, zonder hem openbaar te maken:

* **Live winkelwagens** openen je storefront direct — de live winkelwagen is al wat shoppers zien.
* **Concept-winkelwagens** openen een **thema-preview**. Je kiest op welk thema je wilt previewen (je hoofdthema is de standaard), en Aftersell plaatst de concept-winkelwagen tijdelijk op dat thema, alleen voor jouw preview-sessie, zonder je live winkelwagen aan te raken. De app embed moet ingeschakeld zijn op het thema dat je kiest.

<Note>
  Concept-previews weerspiegelen mogelijk niet volledig het gedrag van de live winkelwagen — beschouw ze als een nauwe benadering en doe een laatste check na publicatie.
</Note>

Sla je wijzigingen op voordat je previewt — de editor vraagt je om op te slaan, zodat de preview je laatste werk weerspiegelt.

<div id="empty-vs-filled-states">
  ## Lege vs. gevulde staat
</div>

Beide staten zijn altijd beschikbaar in het editor-canvas (de twee kaarten), zodat je de lege en de gevulde winkelwagen onafhankelijk van elkaar kunt ontwerpen en controleren. Op de storefront zien shoppers de staat die bij hun winkelwagen past.

<div id="sample-data-scenarios">
  ## Voorbeelddata-scenario's
</div>

Het instellingenpaneel van het [Cart items-blok](/nl/aftersell/cart/cart-items-block) heeft een sectie **Preview** met een **Sample data**-kiezer, waarmee je de editor-preview kunt wisselen tussen line-item-scenario's, zodat je kunt controleren hoe elk eruitziet zonder een bijpassende winkelwagen te bouwen:

| Scenario              | Wat het toont                                                                       |
| --------------------- | ----------------------------------------------------------------------------------- |
| **Standard product**  | Eén product met een toegepaste korting.                                             |
| **Long product name** | Een product met een heel lange titel, om tekstafbreking en overflow te controleren. |
| **Bundle**            | Een bundel-ankerregel met de bijbehorende subartikelen.                             |
| **Subscription**      | Een abonnementsregel met het label van het verkoopplan.                             |
| **All item types**    | De lange productnaam, abonnements- en bundelregels samen in één winkelwagen.        |

Je keuze beïnvloedt alleen de editor-preview. Hij wordt nooit opgeslagen bij de winkelwagen en wordt gereset wanneer je de editor opnieuw laadt.