Shop-Blöcke im Website-Builder

Eine vollständige Liste der Blöcke, aus denen ein Online-Shop besteht: Header mit Warenkorb, Katalog mit Filtern, Produktseite, Warenkorb, Kasse, Wunschliste, Vergleich, Kundenkonto – und welche Einstellungen jedes Feld bietet.

Wenn im Website-Builder eine Shop-Vorlage ausgewählt wurde, bestehen die Seiten aus einzelnen Commerce-Blöcken – jeder ist für seinen eigenen Bereich zuständig: Header, Katalog, Produktkarte, Warenkorb usw. Dieser Artikel ist ein Handbuch für jeden dieser Blöcke.

Shop-Header — Shop Navbar

Der Block Shop Navbar ist der Website-Header mit Logo, Menü, Warenkorb, Konto und Wunschliste.

Einstellungsfelder:

Shop Name / Logo — Name und Logo; wenn kein Logo hochgeladen ist, wird der Textname angezeigt;
Menu links — From page tree (auto) erstellt das Menü automatisch aus Seiten, die als "in Navigation anzeigen" markiert sind (einfacher und man vergisst nicht, es beim Hinzufügen einer Seite zu aktualisieren), oder Manual list — eine eigene Liste von Menüpunkten mit beliebigen URLs;
Show language switcher — Sprachumschalter, wenn die Website mehrsprachig ist;
Cart icon opens — Klick auf das Warenkorb-Symbol öffnet eine Seitenleiste (Mini-Warenkorb) anstatt zur separaten Warenkorbseite zu navigieren;
Anzeige von Konto- und Wunschlisten-Symbolen und den URLs, zu denen sie führen.

Das Website-Menü (Punkte, Unterpunkte) wird separat über den Menu Builder bearbeitet – siehe Navigation und Menü (die Seite beschreibt den alten Builder, aber das Prinzip der Menübaumstruktur ist dasselbe; für den neuen Site Builder ist der Seitenbaum mit der Markierung "in Navigation anzeigen" der einfachste Weg).

Hauptbanner — Shop Hero

Großes Banner oben auf der Startseite: Titel, Untertitel, Hintergrundbild und optional eine Suchleiste mit der URL der Ergebnisseite.

Kategorie-Raster — Shop Category Grid

Raster von Produktkategoriekarten (werden automatisch aus dem Katalog gezogen) mit optionalem Abschnittstitel.

Produktkatalog — Shop Catalog

Der größte und wichtigste Block – eine vollständige Katalogseite mit Filtern, Suche und Paginierung.

Einstellungsfelder:

Card style — Classic / Tech / Luxury, drei vorgefertigte Ansichten der Produktkarte;
Products per page — Größe der Paginierungsseite;
Show filter sidebar — aktiviert/deaktiviert die gesamte Filter-Seitenleiste;
Search box in sidebar, Price filter, Brand filter (aus realen Produkten), Spec filters (aus visible_filters der Kategorie – siehe Produktkatalog);
Condition/grade badge on cards — Zustandskennzeichen des Produkts (neu/gebraucht/überholt), relevant für Technik;
Card spec keys — welche Eigenschaften als Chips direkt auf der Karte angezeigt werden sollen (z.B. CPU, RAM, Disk);
Product comparison + Compare page URL — aktiviert die Schaltfläche "Vergleichen" auf den Karten;
Wishlist heart button on cards — Herz-Symbol "Zu Favoriten hinzufügen";
Smart collection slug — beschränkt den Katalog auf eine vordefinierte intelligente Kollektion anstatt das gesamte Sortiment anzuzeigen; leerer Wert = alles anzeigen (unter Berücksichtigung anderer Filter).

Die Suche im Katalog ist fehlertolerant – selbst wenn der Käufer den Produktnamen falsch eingibt, werden relevante Übereinstimmungen gefunden.

Ausgewählte Produkte — Shop Featured Products

Manuelle oder automatische Auswahl von Produkten (als "featured" markiert – siehe Products-Panel des Builders) mit Titel, Untertitel, Anzahl der Karten und Stil.

Produktseite

Besteht aus mehreren einzelnen Blöcken, die in beliebiger Reihenfolge angeordnet werden können:

Shop Product Gallery — Produktfotogalerie, ohne zusätzliche Einstellungen;
Shop Product Header — Name, Preis, Schaltfläche "In den Warenkorb"; Schalter Show warranty/shipping badges und Show Apple Pay / Google Pay button (siehe Apple Pay / Google Pay);
Shop Product Description — Produktbeschreibung mit Abschnittstitel;
Shop Product Specs — Spezifikationstabelle; Show only these specs beschränkt und ordnet die Liste, Hide these specs blendet bestimmte Felder aus, Hide long text values verbirgt zu lange Werte hinter einer Erweiterung;
Shop Product Reviews — Kundenbewertungen mit Abschnittstitel;
Shop Related Products — "Das könnte Ihnen auch gefallen", Anzahl der Karten und Stil;
Shop Product 3D — interaktives 3D-Modell des Produkts, falls ein Modell dafür hochgeladen wurde.

Warenkorb, Kasse, Bestätigung

Shop Cart Page — Warenkorbseite: Text für leeren Zustand und URL für den Übergang zur Kasse;
Shop Checkout — die Kasse selbst; einzige Einstellung ist Cash on delivery (aktiviert Barzahlung bei Lieferung als Option) und die URL der Erfolgsseite; der Rest (Zahlungsmethoden, Versand, Steuern) wird automatisch aus den Versandeinstellungen und den Steuereinstellungen des Workspaces gezogen;
Shop Order Success — Dankesseite nach der Bestellung, Titel und Nachrichtentext;
Order Lookup — Formular "Bestellung verfolgen" nach Nummer und E-Mail, ohne Registrierung.

Kundenkonto

Shop Login / Register — Anmelde-/Registrierungsformular, Titel, Untertitel und Weiterleitungsseite nach erfolgreicher Anmeldung;
Account Dashboard — Persönliches Konto: Bestellhistorie, gespeicherte Adresse; Titel, URL der Anmeldeseite (wird nicht autorisierten Benutzern angezeigt) und URL der Weiterleitung nach dem Abmelden;
Shop Wishlist — Seite der Wunschliste; Text für leeren Zustand, URL der Schaltfläche "Zum Katalog", Kartenstil;
Product Comparison — Seite zum Vergleich von Produkten, die über die Schaltfläche "Vergleichen" im Katalog hinzugefügt wurden; Titel, Untertitel, Text für leeren Zustand und Schalter Highlight differing rows (hebt Zeilen von Eigenschaften hervor, in denen sich die Produkte unterscheiden).

Hilfsblöcke

Shop Breadcrumbs — Navigationspfad (Breadcrumbs), mit Text für den Link zur Startseite;
Shop Category Tabs — Horizontale Kategorie-Tabs ohne zusätzliche Einstellungen.