> For the complete documentation index, see [llms.txt](https://doku.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doku.themeware.design/zusatzfunktionen/erweiterungen/hero-sektion.md).

# Hero-Sektion

Die Theme-Erweiterung Hero-Sektion kannst du über die Theme-Konfiguration konfigurieren. Die "Hero-Sektion" kann auf CMS-Listingseiten und/oder -Shopseiten angezeigt werden.

<figure><img src="/files/waKy4Waxo6jtFCcqJllK" alt=""><figcaption><p>ThemeWare® "Hero-Sektion"</p></figcaption></figure>

Die Anzeige kannst du zudem über ein entsprechendes Zusatzfeld für jede Kategorie individuell einstellen, wenn du magst.

Auf Wunsch kannst du sogar die Breadcrumb in die "Hero-Sektion" integrieren.

Die dargestellten Texte und Bilder stammen aus der Kategorie-Verwaltung ("Kataloge" => "Kategorien") von Shopware. Angezeigt werden der "**Name**" und das "**Bild**" (= Anzeigebild) der entsprechenden Kategorien. Als Alternative zum ursprünglichen Kategoriebild kannst du auch ein individuelles Bild über ein entsprechendes Zusatzfeld nutzen.

Doch fangen wir mit der Theme-Konfiguration an.

{% hint style="success" %}
**Anleitung**: Eine Schritt-für-Schritt-Anleitung findest du im ThemeWare® Wiki: [Kategorie-Hero-Sektion einrichten](https://wiki.themeware.design/wissensdatenbank/anleitungen/kategorien/kategorie-hero-sektion)
{% endhint %}

***

## Konfiguration

### **Theme-Konfiguration**

1. Wechsel in den Tab "**Erweiterungen**"
2. Öffne den Bereich "**Hero-Sektion (auf Kategorieseiten)**"
3. Aktiviere die Konfiguration "**Hero-Sektion anzeigen (CMS-Listingseiten)**"
4. Optional: Passe die weiteren Optionen an (siehe Abschnitt "Optionen") – z.B. die Integration der Breadcrumb
5. Speicher deine Änderungen nach der Bearbeitung

### **Inhalt**

1. Wechsel über die Hauptnavigation in die "**Kategorie-Verwaltung**" (1) (2) deines Shops ("Kataloge" => "Kategorien")
2. Wähle die gewünschte Kategorie aus (3)
3. Rechts neben der Kategorie-Liste öffnet sich nun die entsprechende Kategorie im Kategorie-Editor (4)
4. Du befindest dich im Tab "**Allgemein**"
5. Im Bereich "**Allgemein**" kannst du den Kategorie-Namen (**Name**) bearbeiten
6. Scrolle zum Bereich "**Menü-Einstellungen**"
7. Hier kannst du das Kategorie-Bild (**Anzeigebild**) bearbeiten
8. Speicher deine Änderungen

<figure><img src="/files/JtJRY43vKaOakn5bybvH" alt=""><figcaption><p>Shopware 6 "Kategorie-Verwaltung"</p></figcaption></figure>

***

## Anzeigeoptionen

Hier hast du für Listingseiten und Shopseiten jeweils die folgende Optionen:

* nicht anzeigen
* anzeigen
* anzeigen (per Zusatzfeld)

#### nicht anzeigen

Dies ist die Standard-Einstellung. In diesem Fall wird die "Hero-Sektion" auf dem entsprechenden Seitentyp nicht angezeigt.

#### anzeigen

Wählst du die Option `anzeigen`, wird die "Hero-Sektion" auf allen Seiten des entsprechenden Seitentyps angezeigt.

{% hint style="success" %}
**Tipp**: Über das Zusatzfeld kannst du die Anzeige dennoch in jeder beliebigen Kategorie unterbinden und so ausgewählte Kategorien individuell gestalten.
{% endhint %}

#### anzeigen (per Zusatzfeld)

Wählst du `anzeigen (per Zusatzfeld)` wird die "Hero-Sektion" auf dem entsprechenden Seitentyp nur angezeigt, wenn du das Zusatzfeld in der entsprechenden Kategorie auf `ja` konfiguriert hast.

<figure><img src="/files/nC9v4k8TI9M6wdfoClcz" alt=""><figcaption></figcaption></figure>

***

## Optionen

Im selben Bereich passt du die Darstellung der "Hero-Sektion" an:

* **Nächstes Element hochziehen**
  * Zieht das nächste Element ein Stück über die Hero-Sektion: "nein", "ja" oder "ja (über Zusatzfeld)". (Beta)
* **Textfarbe**
  * "weißer", "heller", "dunkler" oder "schwarzer Text".
* **Textausrichtung**
  * "links", "zentriert" oder "rechts ausrichten".
* **Größenmodus**
  * "Container-Max-Width (Full-width Boxed)" oder "100% (Full-width)".
* **Breite des Inhalts**
  * Maximale Breite des Inhalts in Pixeln (z.B. 1200px) oder 100%.
* **Abstand oben**
  * Abstand nach oben – gilt nur für Seiten mit "Erlebniswelt-Header".
* **Overlay (Hintergrundfarbe & Deckkraft)**
  * Farb-Overlay über dem Hintergrundbild inkl. Deckkraft.
* **Fixierung** (Hintergrundbild)
  * "Hintergrundbild scrollt mit der Seite (scroll)" oder "Hintergrundbild bleibt fixiert (fixed)".
* **Parallax-Effekt** (Hintergrundbild)
  * "nein" oder "ja" – nur bei fixiertem Hintergrundbild; der Effekt wird per JavaScript gesteuert.
* **Breadcrumb anzeigen**
  * Fügt der Hero-Sektion eine Breadcrumb hinzu ("nein" / "ja").
* **Breadcrumb – Position**
  * "oben" oder "unten ausrichten".
* **Breadcrumb – Inhalt ausrichten**
  * "links", "zentriert" oder "rechts ausrichten".

Farben, Schrift und weitere Feinheiten passt du ebenfalls in der Theme-Konfiguration an.

***

## Zusatzfelder

Wie du sicherlich bereits weißt, ist die Theme-Konfiguration stets global, das heißt sie gilt Shopübergreifend für alle Seiten. Dies gilt auch für die Konfiguration der "Hero-Sektion". Du kannst du Theme-Konfiguration allerdings mit eine Auswahl an Zusatzfelder in beliebigen Kategorien "überschreiben" und beispielsweise eine andere Farbe für die "Hero-Sektion" in einer beliebigen Kategorie nutzen.

<figure><img src="/files/GUSEprPtnSO4i5MMBCZY" alt=""><figcaption></figcaption></figure>

Mehr Informationen zu den Zusatzfeldern findest du in folgendem Artikel:

{% content-ref url="/pages/puckbLkL75hLWItDk6Rt" %}
[Hero-Sektion](/zusatzfunktionen/zusatzfelder/kategorien/hero-sektion.md)
{% endcontent-ref %}

***

## Zusammenfassung

#### Theme-Konfiguration

* Tab "Erweiterungen" => Bereich "Hero-Sektion (auf Kategorieseiten)" => Hero-Sektion anzeigen (CMS-Listingseiten)
* Tab "Erweiterungen" => Bereich "Hero-Sektion (auf Kategorieseiten)" => Hero-Sektion anzeigen (CMS-Shopseiten)

#### Zusatzfeld

* [Hero-Sektion](/zusatzfunktionen/zusatzfelder/kategorien/hero-sektion.md)