#2143 Kategorie-Erlebniswelten unserer 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 "Textund 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


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.


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.


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:


Weitere Artikel in der Kategorie ""

03f811467e6c0e57d3a96092dc3f9f2e
Kurz die Cookies, dann geht's weiter...
Auch diese Seite nutzt die üblichen Arten von Cookies: Technische und funktionale Cookies sind unbedingt nötig,damit diese Website überhaupt funktionieren kann.Zusätzlich nutzen wir Marketing-Cookies,damit wir dich auf unseren Seiten wiedererkennen undunsere Website und Kampagnen stets verbessern können, sowie Personalisierungs-Cookies mit denen wir dich, auch außerhalb dieser Website, besser ansprechen können.

Mit der Auswahl "Akzeptieren und Schließen" erlaubst Du uns die Verwendung dieser Cookies und Technologien. Bitte besuche unsere Datenschutzerklärung für weitere Informationen. Dort erfährst Du auch wie wir die Daten für erforderliche Zwecke (z. B. Sicherheit) verwenden.

Hier kannst du einstellen, welche Cookies du zulassen möchtest.

Technisch erforderlich

Wir nutzen Cookies, um die Bedienung und die Bereitstellung der Website zu ermöglichen und um sicherzustellen, dass bestimmte Funktionen ordnungsgemäß funktionieren. Diese Cookies sind immer aktiviert, da Du die Website sonst nicht ordnungsgemäß bedienen könntest.

Marketing

Die TC-Innovations GmbH und unsere Werbepartner (einschließlich Social Media-Plattformen wie Google, Facebook und Instagram) nutzen Tracking, um Dir personalisierte Angebote anzubieten, die Dir das volle Nutzererlebnis bieten. Dies beinhaltet das Anzeigen von "Direktwerbung auf Werbeplattformen Dritter", wie in der Datenschutzerklärung beschrieben. Wenn Du dieses Tracking nicht akzeptierst, wirst Du dennoch zufällige Werbeanzeigen von uns auf anderen Plattformen angezeigt bekommen.

Analyse

Um unsere Websites und Services stetig zu verbessern, analysieren wir das Nutzerverhalten auf unseren Websites.

Mehr Informationen findest du in unserer Datenschutzerklärung.

SpeichernCookie-EinstellungenAkzeptieren und Schließen