Skip to main content
De lay-out van je cart is een stapel blokken: configureerbare onderdelen die je toevoegt, herschikt, stylet en aanpast in de cart-editor. Welke blokken je opneemt, en in welke volgorde, bepaalt de cart die shoppers zien. Voor hoe blokken binnen statussen en secties zitten, zie Hoe werken carts?.

Blokken en sub-blokken

Er zijn twee soorten blokken:
  • Blokken staan direct in de cart, in een van drie secties: Header, Body of Footer. Elke sectie biedt een andere set blokken.
  • Sub-blokken nestelen zich binnen een ander blok. Op dit moment host alleen Cart items sub-blokken: de Product-rij (de regelitemrij zelf), Subscription upgrade en Custom code.

Blokken toevoegen, herschikken en verwijderen

  • Voeg een blok toe met de kiezer Add block. Een blok is grijs als het niet kan staan waar je het toevoegt, of als je de limiet hebt bereikt (de kiezer toont een count/max-badge).
  • Herschik door een blok binnen zijn sectie te slepen.
  • Verwijder met het prullenbak-icoon, behalve vergrendelde blokken (hieronder).
  • Toon/verberg de meeste blokken met de oog-schakelaar, die een blok voor shoppers verbergt zonder het te verwijderen. Een paar structurele blokken kunnen niet worden verborgen: Cart items, Checkout button en de Product-rij.

Vergrendelde blokken

Sommige blokken kunnen wel worden herschikt maar niet verwijderd, zodat kernfunctionaliteit van de cart (bijvoorbeeld afrekenen) niet per ongeluk kan worden weggehaald:
  • Cart items
  • Checkout button

Standaardblokken

Nieuwe carts starten met een werkende standaardlay-out:
  • Gevulde cart: Header, Banner, Cart items, Summary, Checkout button
  • Lege cart: Header, Empty cart-blok
De lege cart-status is de hele lege lay-out. Het Empty cart-blok is één blok daarbinnen. Zie Hoe werken carts? voor het verschil.

Hoeveel je van elk blok kunt toevoegen

Limieten worden geteld per cart-status, niet per cart. De gevulde cart en de lege cart hebben elk hun eigen limiet, dus een cart kan drie Banners bevatten in zijn gevulde lay-out en nog drie in zijn lege lay-out. De meeste blokken zijn beperkt tot één per status. De uitzonderingen:

Content, Design en Code

Elk blok wordt geconfigureerd via maximaal drie vlakken in de editor:
  • Content: de instellingen van het blok (tekst, productkeuzes, drempels, enzovoort). Het Custom code-blok is de enige uitzondering: het heeft geen Content-paneel omdat het blok de code is.
  • Design: styling per blok die bovenop je globale Designinstellingen komt. Elk blok heeft er een, behalve Custom code, dat helemaal geen instellingenpaneel heeft.
  • Code: overschrijf de ingebouwde rendering van het blok met een aangepaste template. De meeste blokken ondersteunen dit; een paar niet.

Tonen of verbergen per markt, land of valuta

Sommige blokken kunnen andere instellingen tonen, of volledig verbergen, op basis van wie de koper is. Dat staat los van de oog-schakelaar in de zijbalk, die een blok voor iedereen aan- of uitzet. Ondersteunde conditietypen op dit moment: Shopify-markt, land van de klant en valuta van de klant (elk met In of Not in). Carttotaal en cartinhoud zijn geen conditietypen. Gebruik de tier-drempels van Rewards voor voortgang op basis van bestedingen/aantallen, of de Cart SDK wanneer je een regel nodig hebt die de editor niet kan uitdrukken. Condities vormen een geordende lijst: de eerste overeenkomende conditie wint. Zet specifieke regels boven een All buyers-vangnet. Als niets overeenkomt, rendert het blok niets voor die shopper. In de editor is op dit moment de volledige Conditions-UI beschikbaar op het Rewards-blok: verschillende tier-sets per markt, land of valuta. Andere blokken gebruiken ofwel één “all buyers”-configuratie of doen nog niet mee in dit systeem. De editorvoorvertoning evalueert niet de echte koper. Selecteer een conditie in het paneel om die variant te bekijken.

Alle blokken

Structuur
  • Header: titel, aantal items, logo en sluitknop, vastgezet bovenaan.
  • Cart items: de items die klanten aan de cart toevoegen; herhaalt per regel.
  • Subscription upgrade: sub-blok dat aanbiedt een regel om te zetten naar een abonnement.
  • Summary: totalen, besparingen en toegepaste kortingen.
  • Checkout button: de primaire call-to-action naar de checkout.
  • Empty cart: de content die wordt getoond wanneer de cart leeg is.
  • Express payments: versnelde checkout-knoppen (Shop Pay, PayPal, enzovoort) binnen de cart.
Merchandising
  • Upsells: productaanbevelingen gekozen op basis van een strategie.
  • Product add-on: één specifiek product aangeboden als add-on.
  • Rewards: gelaagde beloningen zoals gratis verzending of cadeaus.
  • Shipping protection: een opt-in add-on voor verzendbescherming.
Invoer van shoppers
  • Discount code: een veld om een kortingscode toe te passen.
  • Notes: een veld voor bestelnotities.
Content
  • Banner: een berichtenbanner, met een optionele afteltimer.
  • Image: één afbeelding of een gehoste preset zoals betaaliconen.
  • Custom code: aangepaste HTML of React overal in de cart.
Uitbreiden

Beschikbare blokken per sectie

Elke sectie heeft een andere set beschikbare blokken. Dat houdt de lay-out gefocust en vermindert rommel. Sommige van die blokken zijn statusspecifiek (bijvoorbeeld Empty cart alleen in de lege status). Zie Hoe werken carts?.

Validatiefouten van blokken

Als de instellingen van een blok een ongeldige waarde bevatten, verschijnt er een kleine rode stip naast de naam van dat blok in de zijbalk. De stip blijft staan totdat je het probleem oplost. Het is geen wegklikbare melding. Zolang een blok een fout heeft, is opslaan geblokkeerd. De Save-knop blijft klikbaar, maar erop klikken toont een fouttoast (“Fix the errors in your cart blocks before saving”) en springt naar het eerste blok met een probleem, waarbij de instellingen worden geopend zodat je het gemarkeerde veld kunt corrigeren. Publish vereist bovendien dat er geen niet-opgeslagen wijzigingen zijn, dus die blijft onbeschikbaar totdat een schone save slaagt. Zodra het ongeldige veld is gecorrigeerd, verdwijnt de stip vanzelf en verloopt het opslaan weer normaal.
Verborgen blokken worden nog steeds gevalideerd. Een blok dat je hebt verborgen kan een ongeldige instelling bevatten, een foutstip tonen en het opslaan blokkeren, precies zoals een zichtbaar blok. Dus als opslaan is geblokkeerd en elk zichtbaar blok er goed uitziet, controleer dan je verborgen blokken.