Skip to main content
Das Layout deines Carts ist ein Stapel von Blöcken: konfigurierbare Elemente, die du im Cart-Editor hinzufügst, umordnest, gestaltest und anpasst. Welche Blöcke du in welcher Reihenfolge einbindest, ergibt den Cart, den Kunden sehen. Wie Blöcke innerhalb von Zuständen und Abschnitten angeordnet sind, erfährst du unter Wie funktionieren Carts?.

​
Blöcke und Unterblöcke

Es gibt zwei Arten von Blöcken:
  • Blöcke sitzen direkt im Cart, in einem von drei Abschnitten: Header, Body oder Footer. Jeder Abschnitt bietet eine andere Auswahl an Blöcken.
  • Unterblöcke sind in einem anderen Block verschachtelt. Derzeit beherbergt nur Cart items Unterblöcke: die Product-Zeile (die Positionszeile selbst), Subscription upgrade und Custom code.

​
Blöcke hinzufügen, umordnen und entfernen

  • Hinzufügen über die Auswahl Add block. Ein Block ist ausgegraut, wenn er nicht dorthin passt, wo du ihn hinzufügst, oder wenn du sein Limit erreicht hast (die Auswahl zeigt ein count/max-Badge).
  • Umordnen durch Ziehen eines Blocks innerhalb seines Abschnitts.
  • Entfernen über das Papierkorbsymbol, außer bei gesperrten Blöcken (siehe unten).
  • Ein-/Ausblenden der meisten Blöcke über den Augen-Schalter, der einen Block vor Kunden verbirgt, ohne ihn zu löschen. Einige strukturelle Blöcke können nicht ausgeblendet werden: Cart items, Checkout button und die Product-Zeile.

​
Gesperrte Blöcke

Einige Blöcke können umgeordnet, aber nicht gelöscht werden, damit das Kernverhalten des Carts (zum Beispiel der Checkout) nicht versehentlich entfernt werden kann:
  • Cart items
  • Checkout button

​
Standardblöcke

Neue Carts starten mit einem funktionierenden Standardlayout:
  • Gefüllter Cart: Header, Banner, Cart items, Summary, Checkout button
  • Leerer Cart: Header, Empty cart-Block
Der Zustand „leerer Cart“ ist das gesamte leere Layout. Der Empty cart-Block ist ein Block darin. Den Unterschied erklärt Wie funktionieren Carts?

​
Wie viele Blöcke jedes Typs du hinzufügen kannst

Grenzen werden pro Cart-Zustand gezählt, nicht pro Cart. Der gefüllte Cart und der leere Cart haben jeweils ihr eigenes Kontingent — ein Cart kann also drei Banner im gefüllten Layout und drei weitere im leeren Layout enthalten. Die meisten Blöcke sind auf einen pro Zustand begrenzt. Die Ausnahmen:

​
Content, Design und Code

Jeder Block wird über bis zu drei Oberflächen im Editor konfiguriert:
  • Content: die Einstellungen des Blocks (Text, Produktauswahl, Schwellenwerte usw.). Der Custom code-Block ist die einzige Ausnahme: Er hat kein Content-Panel, weil der Block selbst der Code ist.
  • Design: Styling pro Block, das auf deinen globalen Design-Einstellungen aufsetzt. Jeder Block hat eines, außer Custom code, der überhaupt kein Einstellungspanel hat.
  • Code: überschreibe das integrierte Rendering des Blocks mit einem benutzerdefinierten Template. Die meisten Blöcke unterstützen dies; ein paar nicht.

​
Anzeigen oder Ausblenden nach Markt, Land oder Währung

Einige Blöcke können je nach Käufer andere Einstellungen anzeigen oder sich ganz ausblenden. Das ist unabhängig vom Augen-Schalter in der Seitenleiste, der einen Block für alle ein- oder ausschaltet. Heute unterstützte Bedingungstypen: Shopify-Markt, Kundenland und Kundenwährung (jeweils mit In oder Not in). Warenkorbsumme und Warenkorbinhalt sind keine Bedingungstypen. Verwende die Stufen-Schwellenwerte von Rewards für Fortschritt nach Ausgaben/Menge, oder das Cart SDK, wenn du eine Regel brauchst, die der Editor nicht abbilden kann. Bedingungen sind eine geordnete Liste: Die erste passende Bedingung gewinnt. Setze spezifische Regeln über einen All buyers-Catch-all. Wenn nichts passt, rendert der Block für diesen Kunden nichts. Im Editor liefert heute der Rewards-Block die vollständige Bedingungen-UI: unterschiedliche Stufensets pro Markt, Land oder Währung. Andere Blöcke verwenden entweder eine einzige „All buyers“-Konfiguration oder nehmen noch nicht an diesem System teil. Die Editor-Vorschau wertet den tatsächlichen Käufer nicht aus. Wähle eine Bedingung im Panel aus, um diese Variante in der Vorschau zu sehen.

​
Alle Blöcke

Struktur
  • Header: Titel, Artikelanzahl, Logo und Schließen-Steuerung, oben fixiert.
  • Cart items: die Artikel, die Kunden in den Warenkorb legen; wiederholt sich pro Position.
  • Subscription upgrade: Unterblock, der anbietet, eine Position in ein Abonnement umzuwandeln.
  • Summary: Summen, Ersparnisse und angewendete Rabatte.
  • Checkout button: der primäre Call-to-Action zum Checkout.
  • Empty cart: der Inhalt, der angezeigt wird, wenn der Cart leer ist.
  • Express payments: beschleunigte Checkout-Schaltflächen (Shop Pay, PayPal usw.) im Cart.
Merchandising
  • Upsells: strategiebasierte Produktempfehlungen.
  • Product add-on: ein einzelnes spezifisches Produkt als Add-on.
  • Rewards: gestaffelte Prämien wie kostenloser Versand oder Geschenke.
  • Shipping protection: ein optionales Versandschutz-Add-on.
Kundeneingaben
  • Discount code: ein Feld zum Anwenden eines Rabattcodes.
  • Notes: ein Feld für Bestellnotizen.
Inhalt
  • Banner: ein Nachrichtenbanner, mit optionalem Countdown-Timer.
  • Image: ein einzelnes Bild oder eine gehostete Vorlage wie Zahlungssymbole.
  • Custom code: benutzerdefiniertes HTML oder React an beliebiger Stelle im Cart.
Erweitern
  • Custom templates: überschreibe das Rendering jedes Blocks über seinen Code-Tab.

​
Verfügbare Blöcke in jedem Abschnitt

Jeder Abschnitt hat eine andere Auswahl verfügbarer Blöcke. Das hält das Layout fokussiert und reduziert Unordnung. Einige dieser Blöcke sind zustandsspezifisch (zum Beispiel Empty cart nur im leeren Zustand). Siehe Wie funktionieren Carts?

​
Validierungsfehler bei Blöcken

Wenn die Einstellungen eines Blocks einen ungültigen Wert enthalten, erscheint ein kleiner roter Punkt neben dem Namen dieses Blocks in der Seitenleiste. Der Punkt bleibt, bis du das Problem behebst. Er ist keine schließbare Benachrichtigung. Solange ein Block einen Fehler hat, ist das Speichern blockiert. Die Save-Schaltfläche bleibt anklickbar, aber beim Auswählen erscheint ein Fehler-Toast (“Fix the errors in your cart blocks before saving”) und der Editor springt zum ersten Block mit einem Problem und öffnet dessen Einstellungen, damit du das markierte Feld korrigieren kannst. Publish erfordert zusätzlich, dass keine ungespeicherten Änderungen vorliegen — es bleibt also nicht verfügbar, bis ein fehlerfreies Speichern gelingt. Sobald das ungültige Feld korrigiert ist, verschwindet der Punkt von selbst und das Speichern funktioniert wieder normal.
Ausgeblendete Blöcke werden weiterhin validiert. Ein von dir ausgeblendeter Block kann eine ungültige Einstellung enthalten, einen Fehlerpunkt anzeigen und das Speichern genauso blockieren wie ein sichtbarer. Wenn das Speichern also blockiert ist und alle sichtbaren Blöcke in Ordnung aussehen, überprüfe deine ausgeblendeten Blöcke.