#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.

Inhaltsverzeichnis

1. Höhenluft & Abenteuer
2. Kochlust & Provence
3. Handwerk & Tradition
4. Technik

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.

Tipp: Weitere ThemeWare^® CSS-Klassen findest du in unserem Artikel "ThemeWare^® CSS-Klassen für Erlebniswelten" (Link siehe unten).

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 position-relative

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-n7 twt-pt-9 bg-primary position-relative
• 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 twt-cms-block-reset
  • Oberer Abstand: 20px
  • Unterer Abstand: 20px
  • 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)
  • CSS-Klasse: twt-cms-block-reset
  • 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
  • CSS-Klasse: twt-cms-block-reset
  • 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.

Nach oben

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

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

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.

Nach oben

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

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.

Nach oben

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"

Nach oben

Weiterführende Links:

• ThemeWare^® Video-Tutorial: "Erlebniswelten verstehen"
• ThemeWare^® Video-Tutorial: "Design der Kategorie-Seite anpassen"
• Anleitung: "ThemeWare^® CSS-Klassen für Erlebniswelten"
• Shopware 6 Dokumentation: "Erlebniswelten"
• Shopware 6 Dokumentation: "Kategorien"