Erscheinungsbild
Featured Products, Boutique Säulen & Kaufberatung
Drei weitere Elemente für Erlebniswelten: ein kuratiertes Produkt-Raster, ein statisches Kacheln-Raster für Kernaussagen und ein Akkordeon mit freiem HTML-Inhalt für Kaufberatungs-Texte oder Vergleichstabellen.
Suchmaschinen und Screenreader für blinde und sehbehinderte Besucher orientieren sich an der Reihenfolge der Überschriften auf einer Seite, nicht an ihrer optischen Größe. Deshalb lässt sich bei manchen Elementen die Überschriften-Ebene gezielt einstellen.
Featured Products
Das Element „Boutique Featured Products" zeigt eine Produktauswahl im Karten-Raster — wahlweise manuell zusammengestellt oder aus einer dynamischen Produktgruppe gespeist.
Element einfügen
- In der Erlebniswelt eine Section anlegen und den Block „Boutique Featured Products" hinzufügen (Kategorie „Boutique Theme").
- Im Block sitzt das gleichnamige Element „Boutique Featured Products" — rechts öffnet sich seine Konfiguration.
Einstellungen
| Feld | Wirkung |
|---|---|
| Bereichsüberschrift anzeigen | Optionaler Kopf über dem Raster mit Überzeile, Überschrift, Linkbezeichnung und Link-URL (geteilte Ausrichtung — Text links, Link rechts). |
| Überschriften-Ebene | Legt fest, als welche Überschrift der Text im Seitenaufbau zählt (h1 bis h3). Die Schriftgröße ändert sich dadurch nicht. Faustregel: pro Seite genau eine h1 — auf Produktseiten ist das der Produktname, auf allen anderen die wichtigste Überschrift der Seite. |
| Spalten ab md | Desktop-Raster mit 2 / 3 / 4 Spalten. Mobil immer 2 Spalten. |
| Quelle | Manuelle Auswahl oder Dynamische Produktgruppe. |
| Produkte manuell wählen | (bei Quelle „Manuelle Auswahl") Mehrfachauswahl beliebiger Produkte. |
| Dynamische Gruppe wählen | (bei Quelle „Dynamische Produktgruppe") Auswahl eines bestehenden Produktstreams. |
Was im Frontend passiert
- Jedes Produkt erscheint als reguläre Produktkarte — inklusive Farb-Varianten (Swatches), Hover-Bildwechsel und Streichpreis-Anzeige bei reduzierten Produkten (siehe Streichpreise & Rabatte).
- Bei „Manuelle Auswahl" erscheinen die gewählten Produkte.
- Bei „Dynamische Produktgruppe" erscheinen die Treffer des gewählten Produktstreams — das Element selbst hat kein eigenes Limit-Feld, es greift das Standard-Limit von 50 Produkten.
- Ohne Produkte bzw. ohne gewählte Gruppe bleibt das Raster leer.
Boutique Säulen
Das Element „Boutique Säulen" zeigt ein Raster nummerierter Kernaussagen — z. B. Material, Verarbeitung, Markenversprechen.
Element einfügen
- Block „Boutique Säulen" in der Erlebniswelt hinzufügen (Kategorie „Boutique Theme").
- Das Element „Boutique Säulen" sitzt bereits im Block.
Einstellungen
| Feld | Wirkung |
|---|---|
| Section-Header anzeigen | Optionaler Kopf über dem Raster mit Label, Headline, Link-Label und Link-URL. |
| Überschriften-Ebene | Legt fest, als welche Überschrift der Text im Seitenaufbau zählt (h1 bis h3). Die Schriftgröße ändert sich dadurch nicht. Faustregel: pro Seite genau eine h1 — auf Produktseiten ist das der Produktname, auf allen anderen die wichtigste Überschrift der Seite. |
| Ebene der Untertitel | Legt fest, als welche Überschrift die Säulen-Headline der einzelnen Säulen im Seitenaufbau zählt (h2 bis h4). Sie sollte eine Stufe unter der Kopfbereich-Überschrift liegen. |
| Einleitungstext | Optionaler Fließtext unter der Headline des Kopfbereichs. Leerzeilen werden zu Absätzen. |
| Breite von Überschrift / Breite des Einleitungstexts | Begrenzen den Kopfbereich auf 4/12 bis 10/12 der Sektionsbreite oder lassen ihn über die volle Breite laufen (Standard). Auf Handys wirkt die Begrenzung nicht. |
| Trennlinie anzeigen | Feine Linie unter der Nummer (Standard: an). Lässt du die Nummer leer, erscheint die Linie allein — so lässt sich das Raster gliedern, ohne durchzunummerieren. |
| Spalten | 3 Spalten (Standard) oder 4 Spalten. Auf Tablets stehen bei vier Säulen zwei nebeneinander, auf dem Handy immer eine. |
| Säule 1, Säule 2 … (Tab-Leiste) | Mindestens 2, maximal 10 Säulen. Hinzufügen/Entfernen über die Tab-Leiste. |
| Nummer (z. B. 01) | Kurze Kennung, erscheint über der Headline. |
| Säulen-Headline | Überschrift der Säule. |
| Säulen-Text | Fließtext der Säule. |
Was im Frontend passiert
- Die Säulen erscheinen als Kacheln in einem Raster mit 3 Kacheln pro Zeile (Desktop) — eine vierte, fünfte usw. Säule rutscht in die nächste Zeile. Mobil steht jede Säule volle Breite untereinander.
- Die Nummer wird nur angezeigt, wenn das Feld befüllt ist.
Boutique Kaufberatung
Nicht zu verwechseln mit der Berater-Sektion
„Boutique Kaufberatung" (dieser Abschnitt) ist ein einzelnes Akkordeon mit freiem HTML-Inhalt — z. B. für eine Vergleichstabelle. Die neuere Berater-Sektion ist ein umfangreicheres Element mit Textblöcken und kuratierter Produktauswahl. Die Admin-Labels sind ähnlich — im Zweifel im Element-Suchfeld nach dem Block-Namen suchen.
Das Element „Boutique Kaufberatung" ist ein aufklappbares Akkordeon für freien HTML-Inhalt, z. B. Beratungstexte oder eine Vergleichstabelle.
Element einfügen
- Block „Boutique Kaufberatung" in der Erlebniswelt hinzufügen (Kategorie „Boutique Theme").
- Das Element „Boutique Kaufberatung" sitzt bereits im Block.
Einstellungen
| Feld | Wirkung |
|---|---|
| Eyebrow (kleine Zeile) | Kurzer Text über dem Akkordeon-Titel. |
| Accordion-Titel | Titelzeile des Akkordeons (zum Aufklappen anklickbar). |
| Überschriften-Ebene | Legt fest, als welche Überschrift der Text im Seitenaufbau zählt (h1 bis h3). Die Schriftgröße ändert sich dadurch nicht. Faustregel: pro Seite genau eine h1 — auf Produktseiten ist das der Produktname, auf allen anderen die wichtigste Überschrift der Seite. |
| Einleitungstext | Kurzer Text direkt im aufgeklappten Bereich, über dem HTML-Inhalt. |
| Inhalt (freies HTML) | Code-Editor-Feld für beliebiges HTML. Eine Tabelle mit der Klasse advisor-table wird automatisch im Theme-Stil dargestellt — eine vorbefüllte Beispieltabelle mit Ja/Nein-Icons dient als Vorlage. |
| Initial geöffnet | Ist der Bereich beim Laden der Seite bereits aufgeklappt. |
Freies HTML wird ungefiltert ausgegeben
Der Inhalt des Felds „Inhalt (freies HTML)" wird roh ins Frontend übernommen (wie Shopwares natives HTML-Element) — hier ist Vorsicht bei der Herkunft des Markups geboten.
Was im Frontend passiert
- Das Element rendert als ein einzelnes Akkordeon: Klick auf die Titelzeile öffnet bzw. schließt den Bereich mit einer Höhenanimation.
- Bei aktiviertem „Initial geöffnet" ist der Bereich beim Laden bereits offen.
- Im aufgeklappten Bereich erscheint zuerst der Einleitungstext (falls gesetzt), danach der freie HTML-Inhalt.