#2143 Kategorie-Erlebniswelten der Demoshops nachbauen
In diesem Artikel erfährst du, wie du die Kategorie-Erlebniswelten aus unseren Shopware 6 Demoshops nachbauen kannst.
Diese Anleitung ist in 4 Abschnitte unterteilt, diese entsprechen den Kategorien in unseren Demoshops.
1) Höhenluft & Abenteuer
Element "Banner mit Text"
Schritt 1: Erlebniswelt bearbeiten
- Wechsel in deinem Shopware Adminbereich in den Bereich "Inhalte" => "Erlebniswelten".
- Wähle die Landingpage der entsprechenden Kategorie aus und bearbeite diese.
- Füge oberhalb der bestehenden Sektion eine neue Sektion "Volle Breite" ein.
Schritt 1.1: Einstellungen der Sektion
Konfiguriere nun die neue Sektion für das Banner-Element.
- Sektionsname: Teaser
- CSS-Klassen: twt-custom-cms-element-overlay-primary twt-mt-n2
- Größenmodus: Volle Breite
- Hintergrundbild: Hinterlege dein gewünschtes Motiv mit einer Breite von mind. 1920px
- Bildmodus: Füllen
Hinweis: Je nach Theme kannst du die CSS-Klasse "twt-custom-cms-element-overlay-primary" druch "twt-custom-cms-element-overlay-secondary" in der Sektion ersetzen.
Weitere ThemeWare® CSS-Klassen findest du in unserem Artikel "ThemeWare® CSS-Klassen Bibliothek für CMS Erlebniswelten".
Schritt 1.2: Block anlegen
- Wähle als Block-Kategorie "Text" und füge dann den Block mit dem Namen "Text" per Drag & Drop zur neuen Sektion hinzu.
- Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen:
- Block-Name: Kategorie-Text
- CSS-Klassen: container h1
- Oberer Abstand: 50px
- Unterer Abstand: 0px
- Linker Abstand: 0px
- Rechter Abstand: 0px
Schritt 1.3: Element(e) des Blocks konfigurieren
Konfiguriere nun das Element in diesem Block.
- Klicke auf den link "Datenzuordnung" oben rechts über dem Bildupload-Feld
- Wähle im Dropdown die Option "category.name" aus
Schritt 1.4: Block anlegen
- Wähle als Block-Kategorie "Text" und füge dann den Block mit dem Namen "Text" per Drag & Drop zur neuen Sektion hinzu.
- Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen:
- Block-Name: Kategorie-Beschreibung
- CSS-Klassen: container h4
- Oberer Abstand: 0px
- Unterer Abstand: 100px
- Linker Abstand: 0px
- Rechter Abstand: 0px
Schritt 1.5: Element(e) des Blocks konfigurieren
Konfiguriere nun das Element in diesem Block.
- Klicke auf den link "Datenzuordnung" oben rechts über dem Bildupload-Feld
- Wähle im Dropdown die Option "category.description" aus
Schritt 1.6: Einstellungen der Sektion
Um das Listing jetzt etwas über den Banner zu verschieben konfiguriere nun die Sektion mit dem Listing-Element.
- CSS-Klassen: twt-mt-n9
Speicher zum Abschluss deine Änderungen der Erlebniswelt und weise diese ggf. der/den gewünschten Kategorie(n) zu.
Element "Highlights-Slider"
Schritt 1: Erlebniswelt bearbeiten
- Wechsel in deinem Shopware Adminbereich in den Bereich "Inhalte" => "Erlebniswelten".
- Wähle die Landingpage der entsprechenden Kategorie aus und bearbeite diese.
- Füge oberhalb der bestehenden Sektion eine neue Sektion "Volle Breite" ein.
Schritt 1.1: Einstellungen der Sektion
Konfiguriere nun die neue Sektion für das Banner-Element.
- Sektionsname: Highlights-Slider
- CSS-Klassen: twt-mt-n9 twt-pt-9 bg-primary
- Größenmodus: Zentrierter Inhalt
Hinweis: Je nach Theme kannst du die CSS-Klasse "bg-primary" druch "bg-secondary" in der Sektion ersetzen.
Schritt 1.2: Block anlegen
- Wähle als Block-Kategorie "Text" und füge dann den Block mit dem Namen "Text" per Drag & Drop zur neuen Sektion hinzu.
- Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die
folgenden Einstellungen:
- Block-Name: Überschrift
- Hintergrundfarbe: transparent oder rgba(0, 0, 0, 0)
- CSS-Klassen: container
- Oberer Abstand: 50px
- Unterer Abstand: 10px
- Linker Abstand: 0px
- Rechter Abstand: 0px
Schritt 1.3: Element(e) des Blocks konfigurieren
Konfiguriere nun das Element in diesem Block.
- Füge über den Text-Editor deine gewünschte Überschrift (z.B."Aktuelle Highlights") hinzu.
- Wähle eine zentrierte Textausrichtung
Schritt 1.4: Block anlegen
- Wähle als Block-Kategorie "Commerce" und füge dann den Block mit dem Namen "Produkt-Slider" per Drag & Drop zur neuen Sektion hinzu.
- Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die
folgenden Einstellungen:
- Block-Name: Produkt-Slider
- Hintergrundfarbe: transparent oder rgba(0, 0, 0, 0)
- Oberer Abstand: 10px
- Unterer Abstand: 50px
- Linker Abstand: 0px
- Rechter Abstand: 0px
Schritt 1.5: Element(e) des Blocks konfigurieren
Konfiguriere nun das Element in diesem Block.
- Produkt-Zuweisung: Manuell
- Produkte: Selektiere hier die gewünschten Produkte
Element "SEO-Text"
Schritt 1: Erlebniswelt bearbeiten
- Wechsel in deinem Shopware Adminbereich in den Bereich "Inhalte" => "Erlebniswelten".
- Wähle die Landingpage der entsprechenden Kategorie aus und bearbeite diese.
- Füge oberhalb der bestehenden Sektion eine neue Sektion "Volle Breite" ein.
Schritt 1.1: Einstellungen der Sektion
Konfiguriere nun die neue Sektion für das Banner-Element.
- Sektionsname: SEO-Text
- Größenmodus: Zentrierter Inhalt
- Hintergrundfarbe: #fff
Schritt 1.2: Block anlegen
- Wähle als Block-Kategorie "Text" und füge dann den Block mit dem Namen "Text" per Drag & Drop zur neuen Sektion hinzu.
- Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen:
- Block-Name: SEO-Text
- Hintergrundfarbe: #fff
- Oberer Abstand: 50px
- Unterer Abstand: 50px
- Linker Abstand: 0px
- Rechter Abstand: 0px
Schritt 1.3: Element(e) des Blocks konfigurieren
Konfiguriere nun das Element in diesem Block.
- Füge über den Text-Editor deinen gewünschten SEO-Text für die entsprechende Kategorie hinzu.
Speicher zum Abschluss deine Änderungen der Erlebniswelt und weise diese ggf. der/den gewünschten Kategorie(n) zu.
2) Kochlust & Provence
Element "Headline über Sidebar-Navigation"
Schritt 1: Erlebniswelt bearbeiten
- Wechsel in deinem Shopware Adminbereich in den Bereich "Inhalte" => "Erlebniswelten".
- Wähle die Landingpage der entsprechenden Kategorie aus und bearbeite diese.
Schritt 1.1: Block anlegen
- Wähle als Block-Kategorie "Text" und füge dann den Block mit dem Namen "Text" per Drag & Drop zur bestehenden Sektion hinzu.
- Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen:
- Allgemein
- Block-Name: Headline
- Layout (Bereich unten aufklappen)
- CSS-Klassen: twt-cms-element-sidebar-headline twt-mt-2 twt-mb-n2
- Oberer Abstand: 0px
- Unterer Abstand: 0px
- Linker Abstand: 0px
- Rechter Abstand: 0px
- Allgemein
Schritt 1.2: Element(e) des Blocks konfigurieren
Konfiguriere nun jedes einzelne Element in diesem Block.
- Füge über den Text-Editor den Text Navigation hinzu.
Speicher zum Abschluss deine Änderungen der Erlebniswelt und weise diese ggf. der/den gewünschten Kategorie(n) zu.
Nun werden automatisch das einer Kategorie zugewiesene Anzeigebild und die entsprechende Beschreibung in das CMS-Element geladen.
Element "SEO-Text"
Schritt 1: Erlebniswelt bearbeiten
- Wechsel in deinem Shopware Adminbereich in den Bereich "Inhalte" => "Erlebniswelten".
- Wähle die Landingpage der entsprechenden Kategorie aus und bearbeite diese.
Schritt 1.1: Block anlegen
- Wähle als Block-Kategorie "Text" und füge dann den Block mit dem Namen "Text" per Drag & Drop zur bestehenden Sektion hinzu.
- Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen:
- Allgemein
- Block-Name: SEO-Text
- Hintergrundfarbe: #fff
- Layout (Bereich unten aufklappen)
- CSS-Klassen: container
- Oberer Abstand: 30px
- Unterer Abstand: 30px
- Linker Abstand: 0px
- Rechter Abstand: 0px
- Allgemein
Schritt 1.2: Element(e) des Blocks konfigurieren
Konfiguriere nun das Element in diesem Block.
- Füge über den Text-Editor deinen gewünschten SEO-Text für die entsprechende Kategorie hinzu.
Speicher zum Abschluss deine Änderungen der Erlebniswelt und weise diese ggf. der/den gewünschten Kategorie(n) zu.
3) Handwerk & Tradition
Element "Kategorie Text/Bild"
Schritt 1: Erlebniswelt bearbeiten
- Wechsel in deinem Shopware Adminbereich in den Bereich "Inhalte" => "Erlebniswelten".
- Wähle die Landingpage der entsprechenden Kategorie aus und bearbeite diese.
Schritt 1.1: Block anlegen
- Wähle als Block-Kategorie "Text & Bild" und füge dann den Block mit dem Namen "Zwei Spalten, zentriertes Bild & Text" per Drag & Drop zur bestehenden Sektion hinzu.
- Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen:
- Allgemein
- Block-Name: Kategorie-Text
- Layout (Bereich unten aufklappen)
- Oberer Abstand: 20px
- Unterer Abstand: 20px
- Linker Abstand: 0px
- Rechter Abstand: 0px
- Allgemein
Schritt 1.2: Element(e) des Blocks konfigurieren
Konfiguriere nun jedes einzelne Element in diesem Block.
- Element links, Bild
- Klicke auf den link "Datenzuordnung" oben rechts über dem Bildupload-Feld
- Wähle im Dropdown die Option "category.media" aus
- Anzeigemodus: Füllen
- Minimale Höhe: 190px
- Element rechts, Text
- Klicke auf den link "Datenzuordnung" oben rechts über dem Bildupload-Feld
- Wähle im Dropdown die Option "category.description" aus
Speicher zum Abschluss deine Änderungen der Erlebniswelt und weise diese ggf. der/den gewünschten Kategorie(n) zu.
Nun werden automatisch das einer Kategorie zugewiesene Anzeigebild und die entsprechende Beschreibung in das CMS-Element geladen.
Element "SEO-Text"
Schritt 1: Erlebniswelt bearbeiten
- Wechsel in deinem Shopware Adminbereich in den Bereich "Inhalte" => "Erlebniswelten".
- Wähle die Landingpage der entsprechenden Kategorie aus und bearbeite diese.
- Füge oberhalb der bestehenden Sektion eine neue Sektion "Volle Breite" ein.
Schritt 1.1: Einstellungen der Sektion
Konfiguriere nun die neue Sektion für das Banner-Element.
- Sektionsname: SEO-Text
- Größenmodus: Zentrierter Inhalt
Schritt 1.2: Block anlegen
- Wähle als Block-Kategorie "Text" und füge dann den Block mit dem Namen "Text" per Drag & Drop zur neuen Sektion hinzu.
- Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen:
- Block-Name: SEO-Text
Schritt 1.3: Element(e) des Blocks konfigurieren
Konfiguriere nun das Element in diesem Block.
- Füge über den Text-Editor deinen gewünschten SEO-Text für die entsprechende Kategorie hinzu.
Speicher zum Abschluss deine Änderungen der Erlebniswelt und weise diese ggf. der/den gewünschten Kategorie(n) zu.
4) Technik
Element "Banner"
Schritt 1: Erlebniswelt bearbeiten
- Wechsel in deinem Shopware Adminbereich in den Bereich "Inhalte" => "Erlebniswelten".
- Wähle die Landingpage der entsprechenden Kategorie aus und bearbeite diese.
- Füge oberhalb der bestehenden Sektion eine neue Sektion "Volle Breite" ein.
Schritt 1.1: Einstellungen der Sektion
Konfiguriere nun die neue Sektion für das Banner-Element.
- Sektionsname: Banner
- Größenmodus: Volle Breite
- CSS-Klassen: twt-mt-n2
Schritt 1.2: Block anlegen
- Wähle als Block-Kategorie "Bild" und füge dann den Block mit dem Namen "Bild, gestreckt" per Drag & Drop zur neuen Sektion hinzu.
- Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen:
- Block-Name: Banner 1
Schritt 1.3: Element(e) des Blocks konfigurieren
Konfiguriere nun das Element in diesem Block.
- Klicke auf den link "Datenzuordnung" oben rechts über dem Bildupload-Feld
- Wähle im Dropdown die Option "category.media" aus
- Anzeigemodus: Standard
Schritt 1.4: Einstellungen der folgenden Sektion
Konfiguriere nun die Sektion mit dem Listing-Element.
- CSS-Klassen: twt-mt-n6 position-relative
Speicher zum Abschluss deine Änderungen der Erlebniswelt und weise diese ggf. der/den gewünschten Kategorie(n) zu.
Nun wird automatisch das einer Kategorie zugewiesene Anzeigebild in das Banner-Element geladen.
Element "SEO-Text"
siehe Abschnitt "1) Höhenluft & Abenteuer"
Weiterführende Links:
- Shopware 6 Dokumentation "Erlebniswelten"
- Shopware 6 Dokumentation "Kategorien"
- ThemeWare® "CSS-Klassen Bibliothek für CMS Erlebniswelten"
- ThemeWare® Video-Tutorial: "Erlebniswelten verstehen"
- ThemeWare® Video-Tutorial: "Design der Kategorie-Seite anpassen"
Lösung nicht gefunden?
Bitte sieh auch in den anderen Kategorien nach.
Fehler nicht gelöst?
Wenn du das Problem nicht mit den häufigsten Fehlern lösen konntest, starte die individuelle Fehlerbehebung. Hierüber kannst du auch ein Support-Ticket eröffnen, falls du den Fehler nicht selber beheben kannst.
Lösung nicht gefunden?
Bitte sieh auch in den anderen Kategorien nach.
Fehler nicht gelöst?
Wenn du das Problem nicht mit den häufigsten Fehlern lösen konntest, starte die individuelle Fehlerbehebung. Hierüber kannst du auch ein Support-Ticket eröffnen, falls du den Fehler nicht selber beheben kannst.
Lösung nicht gefunden?
Bitte sieh auch in den anderen Kategorien nach.
Fehler nicht gelöst?
Wenn du das Problem nicht mit den häufigsten Fehlern lösen konntest, kannst du hier ein Support-Ticket eröffnen.