> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dreizack-medien.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Kategorieseite

> Hier findest du alle Einstellungen, welche sich global auf die Kategorieseiten auswirken.

## Darstellung Unterkategorien

### Deprecated Optionen nutzen

Lege hier fest, ob veraltete Einstellungen der Kategorieseite mit zukünftigen Versionen entfernt werden sollen.

<Tabs>
  <Tab title="Deprecated Optionen nutzen aktiviert">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>
        <img src="https://mintcdn.com/dzm/6Hc0p0DsnmohjT-R/images/niu-plus-kategorieseite-unterkategorien-deprecated-aktiv.jpg?fit=max&auto=format&n=6Hc0p0DsnmohjT-R&q=85&s=5f32885c17a65711eace6af8eb97788d" alt="Deprecated Optionen aktiviert" width="2066" height="512" data-path="images/niu-plus-kategorieseite-unterkategorien-deprecated-aktiv.jpg" />
      </Frame>
    </div>

    Wenn "Deprecated Optionen nutzen" aktiviert ist, werden drei zusätzliche Einstellungen sichtbar: **Stil**, **Bildformat der Kategoriebilder** und **Bildanpassung**.

    **Stil**

    Entscheide hier, wie die Unterkategorien dargestellt werden sollen. Auswahl zwischen:

    * **Als Grid** – Unterkategorien werden als Kachelraster mit Bild und Text nebeneinander dargestellt.
    * **Als Slider** – Unterkategorien werden in einem horizontal scrollbaren Slider angezeigt.

    <AccordionGroup>
      <Accordion title="Bild und Text als Grid">
        <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
          <Frame>
            <img src="https://mintcdn.com/dzm/6Hc0p0DsnmohjT-R/images/niu-plus-kategorieseite-unterkategorien-grid.png?fit=max&auto=format&n=6Hc0p0DsnmohjT-R&q=85&s=75fa3b142bc1cc9995f743ff8c5bbc46" alt="Als Grid" width="4932" height="891" data-path="images/niu-plus-kategorieseite-unterkategorien-grid.png" />
          </Frame>
        </div>
      </Accordion>

      <Accordion title="Bild und Text als Slider">
        <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
          <Frame>
            <img src="https://mintcdn.com/dzm/kROSHCGCRm0V5RJ7/images/niu-plus-kategorieseite-slider.png?fit=max&auto=format&n=kROSHCGCRm0V5RJ7&q=85&s=b724e6a89a52d2ce4ae06128d1feb183" alt="" width="2315" height="719" data-path="images/niu-plus-kategorieseite-slider.png" />
          </Frame>
        </div>
      </Accordion>
    </AccordionGroup>

    **Bildformat der Kategoriebilder**

    Lege das Seitenverhältnis der Kategoriebilder fest. Auswahl zwischen:

    * **16:9** – Breitbildformat, geeignet für querformatige Motive oder Banner-ähnliche Bilder.
    * **1:1** – Quadratisches Format, einheitlich und kompakt.

    **Bildanpassung**

    Lege fest, wie die Kategoriebilder in ihrem Container skaliert werden. Auswahl zwischen:

    * **Cover (Bild füllt Container aus)** – Das Bild füllt den gesamten Container aus und wird dabei ggf. beschnitten. Geeignet für vollflächige Motive.
    * **Contain (Bild passt sich an Container an)** – Das Bild wird vollständig angezeigt und an den Container angepasst, ohne beschnitten zu werden. Geeignet, wenn das Kategoriebild ein Produktbild ist, das komplett sichtbar sein soll.
  </Tab>

  <Tab title="Deprecated Optionen nutzen deaktiviert">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>
        <img src="https://mintcdn.com/dzm/6Hc0p0DsnmohjT-R/images/niu-plus-kategorieseite-unterkategorien-deprecated-deaktiv.jpg?fit=max&auto=format&n=6Hc0p0DsnmohjT-R&q=85&s=a1b05466e6e2aaee825e8b41b200cb96" alt="Deprecated Optionen deaktiviert" width="2072" height="1478" data-path="images/niu-plus-kategorieseite-unterkategorien-deprecated-deaktiv.jpg" />
      </Frame>
    </div>

    Wenn "Deprecated Optionen nutzen" deaktiviert ist, stehen die aktuellen Einstellungen zur Verfügung. Die Optionen sind aufgeteilt nach **Kategorielevel 1** und **Kategorielevel über 1**, jeweils mit separaten Einstellungen für **Desktop** und **Mobil**.

    **Border Radius**

    Lege die Kantenabrundung der Unterkategorie-Karten fest. Trage einen CSS-Wert ein (z. B. `8px`). Der Wert `0` ergibt scharfe Ecken.

    **Unterkategorie Darstellung**

    Wähle, wie die Unterkategorien angezeigt werden sollen. Auswahl zwischen:

    <AccordionGroup>
      <Accordion title="Als Grid">
        <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
          <Frame>
            <img src="https://mintcdn.com/dzm/6Hc0p0DsnmohjT-R/images/niu-plus-kategorieseite-unterkategorien-grid.png?fit=max&auto=format&n=6Hc0p0DsnmohjT-R&q=85&s=75fa3b142bc1cc9995f743ff8c5bbc46" alt="Als Grid" width="4932" height="891" data-path="images/niu-plus-kategorieseite-unterkategorien-grid.png" />
          </Frame>
        </div>
      </Accordion>

      <Accordion title="Als Slider">
        <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
          <Frame>
            <img src="https://mintcdn.com/dzm/kROSHCGCRm0V5RJ7/images/niu-plus-kategorieseite-slider.png?fit=max&auto=format&n=kROSHCGCRm0V5RJ7&q=85&s=b724e6a89a52d2ce4ae06128d1feb183" alt="" width="2315" height="719" data-path="images/niu-plus-kategorieseite-slider.png" />
          </Frame>
        </div>
      </Accordion>
    </AccordionGroup>

    **Bilder anzeigen**

    Aktiviere diesen Schalter, um Kategoriebilder in der Unterkategoriedarstellung anzuzeigen.

    **Bildformat**

    Lege das Seitenverhältnis der Kategoriebilder fest (z. B. `16 / 9` oder `1 / 1`).

    **Object Fit**

    Bestimme, wie das Bild in seinen Container eingepasst wird. Auswahl zwischen:

    * **Contain (Bild passt sich an Container an)** – Das Bild wird vollständig angezeigt, ohne beschnitten zu werden.
    * **Cover (Bild füllt Container aus)** – Das Bild füllt den Container vollständig aus und wird ggf. beschnitten.

    **Slides per Page / Cards per row**

    Lege fest, wie viele Karten pro Zeile bzw. Slides pro Seite angezeigt werden sollen. Du kannst für verschiedene Breakpoints separate Werte eintragen (von klein nach groß).

    **Box Style**

    Wähle den Kartenstyle für die Unterkategorie-Boxen. Auswahl zwischen:

    * **Ohne Kartenstyle** – Kein Rahmen oder Hervorhebung.
    * **Einfache Karte** – Dezenter Kartenstyle mit leichter Abgrenzung.
    * **Schattierte Karte** – Karte mit Schattenwurf für mehr Tiefe.
    * **Umrandete Karte** – Karte mit sichtbarem Rahmen.
    * **Border oben/unten** – Linie nur oben und unten als Abgrenzung.

    <Tabs>
      <Tab title="Einfache Karte">
        <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
          <Frame>
            <img src="https://mintcdn.com/dzm/6Hc0p0DsnmohjT-R/images/niu-plus-kategorieseite-box-einfache-karte.jpg?fit=max&auto=format&n=6Hc0p0DsnmohjT-R&q=85&s=8f84b9e288498f66b8c20447fabd7a8c" alt="Einfache Karte" width="1842" height="356" data-path="images/niu-plus-kategorieseite-box-einfache-karte.jpg" />
          </Frame>
        </div>
      </Tab>

      <Tab title="Schattierte Karte">
        <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
          <Frame>
            <img src="https://mintcdn.com/dzm/6Hc0p0DsnmohjT-R/images/niu-plus-kategorieseite-box-schattierte-karte.jpg?fit=max&auto=format&n=6Hc0p0DsnmohjT-R&q=85&s=32590b0c912c6a4f888bd670f4845f38" alt="Schattierte Karte" width="1856" height="378" data-path="images/niu-plus-kategorieseite-box-schattierte-karte.jpg" />
          </Frame>
        </div>
      </Tab>

      <Tab title="Umrandete Karte">
        <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
          <Frame>
            <img src="https://mintcdn.com/dzm/6Hc0p0DsnmohjT-R/images/niu-plus-kategorieseite-box-umrandete-karte.jpg?fit=max&auto=format&n=6Hc0p0DsnmohjT-R&q=85&s=a147291e1085df97c89741f3d22823a7" alt="Umrandete Karte" width="1864" height="410" data-path="images/niu-plus-kategorieseite-box-umrandete-karte.jpg" />
          </Frame>
        </div>
      </Tab>

      <Tab title="Border oben/unten">
        <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
          <Frame>
            <img src="https://mintcdn.com/dzm/6Hc0p0DsnmohjT-R/images/niu-plus-kategorieseite-box-border-oben-unten.jpg?fit=max&auto=format&n=6Hc0p0DsnmohjT-R&q=85&s=da87c4aaf5cdc1e9b11543a6acac1838" alt="Border oben/unten" width="1868" height="386" data-path="images/niu-plus-kategorieseite-box-border-oben-unten.jpg" />
          </Frame>
        </div>
      </Tab>
    </Tabs>

    **Unter-Unterkategoriedarstellung**

    Lege fest, wie Unter-Unterkategorien behandelt werden sollen. Auswahl zwischen:

    * **Ausblenden** – Unter-Unterkategorien werden nicht angezeigt.
    * **Anzeigen** – Unter-Unterkategorien werden sichtbar dargestellt.

    **Pfeile anzeigen**

    Aktiviere diesen Schalter, um Navigationspfeile im Slider anzuzeigen.

    **Pagination anzeigen**

    Aktiviere diesen Schalter, um Pagination-Punkte unter dem Slider anzuzeigen.
  </Tab>
</Tabs>

***

## Bannerdarstellung

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/6Hc0p0DsnmohjT-R/images/niu-plus-kategorieseite-bannerdarstellung.jpg?fit=max&auto=format&n=6Hc0p0DsnmohjT-R&q=85&s=6a4ffbfed45310a307e0011eb7894214" alt="Bannerdarstellung" width="2066" height="396" data-path="images/niu-plus-kategorieseite-bannerdarstellung.jpg" />
  </Frame>
</div>

### NIU Plus Banner Style anwenden

Hier kannst du wählen, ob der Banner im NIU-Plus-Banner-Style dargestellt werden soll. Hierzu muss im JTL-Shop die Einstellung 624 auf "Ja, mit Text und Bild" oder "Ja, als Bild" festgelegt sein.

### Bannerbild in voller Breite anzeigen

Dein Bannerbild kann mit dieser Einstellung in der kompletten Breite der Bilddatei dargestellt werden.

### Bannerbild Höhe

Wähle die Höhe des Bannerbilds über eine CSS Wert in px.

***

## Kategorietitel

Neben den hier beschriebenen Optionen kannst du den Standardtitel der Kategorie über das Attribut **niu\_alt\_cat\_title** überschreiben. Der Name bleibt dann im Menü gleich wie in der Wawi, aber der Titel auf der Kategorieseite wird durch das Attribut überschrieben

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/6Hc0p0DsnmohjT-R/images/niu-plus-kategorieseite-kategorietitel.jpg?fit=max&auto=format&n=6Hc0p0DsnmohjT-R&q=85&s=b2147cd38e1939e7f63c7fe8711a6811" alt="Kategorietitel" width="2064" height="388" data-path="images/niu-plus-kategorieseite-kategorietitel.jpg" />
  </Frame>
</div>

### Kategorietitel HTML Tag

Wähle aus, in welchem HTML Tag der Kategorietitel standardmäßig ausgegeben werden soll. Du kannst deine Auswahl speziell pro Kategorie über ein das Funktionsattribut **niu\_cat\_title\_tag** anpassen.

Mit dieser Einstellung kannst du die SEO Seitenstruktur verbessern. Wenn du zB in deiner Kategoriebeschreibung bereits eine H1 Überschrift verwendest und der Kategorietitel entsprechend keine H1 mehr sein soll, dann ändere hier das Tag. Über die Darstellung kannst du das Aussehen trotzdem noch steuern, ohne die SEO Struktur zu beeinflussen. Diese Option wendet sich auf alle Kategorieüberschriften an. Wenn du in einer speziellen Kategorie die Struktur ändern möchtest, überschreib die Standardeinstellung durch ein Funktionsattribut **niu\_cat\_title\_tag**. Trage in der Wawi als Wert lediglich die Bezeichnung ein. Für ein H1 Tag trage einfach **h1** ein.

### Kategorietitel Darstellung

Wähle hier aus, in welchem HTML Tag Design der Kategorietitel standardmäßig dargestellt werden soll. Dieser hat keinen Einfluss auf die SEO Struktur, nur auf die Optik, also ob der Titel aussehen soll wie beispielsweise eine H1 Überschrift. Du kannst den Wert individuell überschreiben mit einem Wawi Funktionsattribut mit dem Name **niu\_cat\_title\_class**

***

## Filterdarstellung

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/6Hc0p0DsnmohjT-R/images/niu-plus-kategorieseite-filterdarstellung-2.jpg?fit=max&auto=format&n=6Hc0p0DsnmohjT-R&q=85&s=c5d1d496211fab6042a214fc64a0e1d7" alt="Filterdarstellung" width="2076" height="428" data-path="images/niu-plus-kategorieseite-filterdarstellung-2.jpg" />
  </Frame>
</div>

### Filterposition Desktop

Lege fest, wo die Filter auf dem Desktop positioniert werden sollen. Auswahl zwischen:

**Sidebar**

Auf der Kategorieseite gibt es einen "Filter-Button", der die Sidebar triggert.

<AccordionGroup>
  <Accordion title="Filter-Button">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>
        <img src="https://mintcdn.com/dzm/6Hc0p0DsnmohjT-R/images/niu-plus-kategorieseite-sidebar-button.png?fit=max&auto=format&n=6Hc0p0DsnmohjT-R&q=85&s=f7f98ebe4174bbc531e7344ada834fdc" alt="" width="3948" height="1899" data-path="images/niu-plus-kategorieseite-sidebar-button.png" />
      </Frame>
    </div>
  </Accordion>

  <Accordion title="Sidebar geöffnet">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>
        <img src="https://mintcdn.com/dzm/kROSHCGCRm0V5RJ7/images/niu-plus-kategorieseite-sidebar-open.png?fit=max&auto=format&n=kROSHCGCRm0V5RJ7&q=85&s=f6fdaadd838e9ed740b10409bca1926a" alt="" width="3981" height="2265" data-path="images/niu-plus-kategorieseite-sidebar-open.png" />
      </Frame>
    </div>
  </Accordion>
</AccordionGroup>

**Sidepanel links**

Die Filter werden im linken Sidepanel ausgegeben.

<AccordionGroup>
  <Accordion title="Vorschau">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>
        <img src="https://mintcdn.com/dzm/kROSHCGCRm0V5RJ7/images/niu-plus-kategorieseite-sidepanel.png?fit=max&auto=format&n=kROSHCGCRm0V5RJ7&q=85&s=f77956ed475002651df9c4df33f466c4" alt="" width="3972" height="2751" data-path="images/niu-plus-kategorieseite-sidepanel.png" />
      </Frame>
    </div>
  </Accordion>
</AccordionGroup>

**Über Produktübersicht**

Zusätzliche Einstellungen:

**Max. Anzahl intitial sichtbarer Filter Desktop:** Lege hier die Anzahl der Filter fest, die initial sichtbar sind. Standardwert: 8.

### Filterposition Mobil & Tablet

Lege fest, wo die Filter auf Mobil & Tablet positioniert werden sollen. Auswahl zwischen Sidebar und Über Produktübersicht.

***

## Produkte auch in Oberkategorien darstellen \[BETA]

Mit dieser Option kannst du alle Produkte, die in einer Kategorie liegen automatisch in der jeweiligen Oberkategorie anzeigen lassen. **ACHTUNG** Wenn du den Custom Menu Builder verwendest, könnte es zu verwirrenden Artikellisten führen, da sich die Zusammenfassung der Kategorien an der Standardkategorisierung der Wawi orientiert, so wie sie an den Shop übermittelt wird. **ACHTUNG! EXPERIMENTELL** - Dieses Feature ist Teil einer open public beta. Die Verwendung erfolgt auf eigene Verantwortung. Solltest du Fehler oder Probleme feststellen, kannst du uns gern kontaktieren und uns Feedback geben.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/6Hc0p0DsnmohjT-R/images/niu-plus-kategorieseite-oberkategorien-beta.jpg?fit=max&auto=format&n=6Hc0p0DsnmohjT-R&q=85&s=cf2c562a64bb66702d740b575ebbcc13" alt="Produkte in Oberkategorien" width="2066" height="370" data-path="images/niu-plus-kategorieseite-oberkategorien-beta.jpg" />
  </Frame>
</div>

***

## Produktdarstellung

Hier findest du Einstellungen für die Details der Itembox. Diese wirkt sich auch auf Slider aus.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/6Hc0p0DsnmohjT-R/images/niu-plus-kategorieseite-produktdarstellung.jpg?fit=max&auto=format&n=6Hc0p0DsnmohjT-R&q=85&s=59230761114365cb5124df3c9ce56aa1" alt="Produktdarstellung" width="2070" height="1625" data-path="images/niu-plus-kategorieseite-produktdarstellung.jpg" />
  </Frame>
</div>

### Artikel pro Reihe (Gridansicht)

Lege hier fest, wie viele Produkte pro Reihe dargestellt werden sollen. Dabei kannst du für die jeweilige Kartenbreite unterschiedliche Einstellungen treffen.

### Abstand zwischen Elementen

Entscheide, wie viel Abstand zwischen den einzelnen Karten der Gridansicht vorhanden sein soll. Werte von 0-5.

### Störer

Mit Störern wird ein sich von den Produktkarten abhebendes Kartenelement eingefügt, mit dem du gezielt eine Information deiner Wahl an deinen Kunden übermitteln kannst.

Die Störer können über den OPC Editor gepflegt werden. Nutze den GridItem Container, um den Störer über mehrere Spalten zu ziehen. Störer werden nur dann geladen, wenn mindestens so viele Produkte geladen werden wie du in den Positionen bestimmst. Störer werden nur dann angezeigt, wenn sie einen OPC Content gesetzt haben.

### Störer 1 Position

Hier kannst du festlegen, nach wie vielen Produkten der erste Störer erscheinen soll. Du kannst eine unterschiedliche Auswahl für die Mobile- und Desktop-Ansicht treffen.

### Störer 2 Position

Hier kannst du festlegen, nach wie vielen Produkten der zweite Störer erscheinen soll. Die Zählung für den ersten und zweiten Störer beginnt dabei beim selben Artikel; daher empfiehlt es sich, einen größeren Wert hierfür zu wählen. Du kannst eine unterschiedliche Auswahl für die Mobile- und Desktop-Ansicht treffen.

### Load More Button statt Pagination

Aktiviere diese Einstellung, damit dein Kunde sich mehr Artikel über den „Mehr Produkte laden"-Button anzeigen lassen kann, anstelle des Navigationselements der Seitennummerierung.

### Produkt Box Style

Lege hier einen Style für die Produktboxen fest. Der Style der Produktboxen hat Auswirkungen auf die Darstellung der Produkte in der Grid Ansicht, sowie in allen Slidern, die auf das Template zurückgreifen. Auswahl zwischen:

<AccordionGroup>
  <Accordion title="Klassisch">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>![](https://t4655718.p.clickup-attachments.com/t4655718/2deb5a36-e9d9-4c66-8ed4-2d9d3bd7c3f9/image.png)</Frame>
    </div>
  </Accordion>

  <Accordion title="Modern">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>![](https://t4655718.p.clickup-attachments.com/t4655718/2ad6803c-85ed-4e15-9433-29a7fd8d7232/image.png)</Frame>
    </div>
  </Accordion>

  <Accordion title="Flat">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>![](https://t4655718.p.clickup-attachments.com/t4655718/65dba338-87a6-4968-add7-9cce9f3ebab2/image.png)</Frame>
    </div>
  </Accordion>
</AccordionGroup>

### Produkt Box als Karte darstellen

Entscheide, ob die einzelnen Produkte als Karte dargestellt werden sollen. Mit einem Kartenstyle heben sich die Produkt Boxen gut voneinander ab und Informationen wirken näher beieinander. Bitte beachte aber, dass sich der Style auf die Darstellung der Artikelbilder auswirken kann. Verwendest du keine gut freigestellten Bilder mit sauberem Hintergrund, kann der Kartenstyle eher unruhig wirken. Deaktiviere in diesem Fall den Style.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/6Hc0p0DsnmohjT-R/images/niu-plus-kategorieseite-box-style.jpg?fit=max&auto=format&n=6Hc0p0DsnmohjT-R&q=85&s=ef39f7402ed58eecbbbb51fc7616d000" alt="Produkt Box Style" width="1878" height="390" data-path="images/niu-plus-kategorieseite-box-style.jpg" />
  </Frame>
</div>

<Tabs>
  <Tab title="Ohne Kartenstyle">
    Kein Kartenstyle – die Produktboxen werden ohne Rahmung oder Hervorhebung dargestellt.
  </Tab>

  <Tab title="Einfache Karte">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>
        <img src="https://mintcdn.com/dzm/6Hc0p0DsnmohjT-R/images/niu-plus-kategorieseite-box-einfache-karte.jpg?fit=max&auto=format&n=6Hc0p0DsnmohjT-R&q=85&s=8f84b9e288498f66b8c20447fabd7a8c" alt="Einfache Karte" width="1842" height="356" data-path="images/niu-plus-kategorieseite-box-einfache-karte.jpg" />
      </Frame>
    </div>
  </Tab>

  <Tab title="Schattierte Karte">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>
        <img src="https://mintcdn.com/dzm/6Hc0p0DsnmohjT-R/images/niu-plus-kategorieseite-box-schattierte-karte.jpg?fit=max&auto=format&n=6Hc0p0DsnmohjT-R&q=85&s=32590b0c912c6a4f888bd670f4845f38" alt="Schattierte Karte" width="1856" height="378" data-path="images/niu-plus-kategorieseite-box-schattierte-karte.jpg" />
      </Frame>
    </div>
  </Tab>

  <Tab title="Umrandete Karte">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>
        <img src="https://mintcdn.com/dzm/6Hc0p0DsnmohjT-R/images/niu-plus-kategorieseite-box-umrandete-karte.jpg?fit=max&auto=format&n=6Hc0p0DsnmohjT-R&q=85&s=a147291e1085df97c89741f3d22823a7" alt="Umrandete Karte" width="1864" height="410" data-path="images/niu-plus-kategorieseite-box-umrandete-karte.jpg" />
      </Frame>
    </div>
  </Tab>

  <Tab title="Border oben/unten">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>
        <img src="https://mintcdn.com/dzm/6Hc0p0DsnmohjT-R/images/niu-plus-kategorieseite-box-border-oben-unten.jpg?fit=max&auto=format&n=6Hc0p0DsnmohjT-R&q=85&s=da87c4aaf5cdc1e9b11543a6acac1838" alt="Border oben/unten" width="1868" height="386" data-path="images/niu-plus-kategorieseite-box-border-oben-unten.jpg" />
      </Frame>
    </div>
  </Tab>
</Tabs>

**Ohne Kartenstyle**

<AccordionGroup>
  <Accordion title="Klassisch">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>![](https://t4655718.p.clickup-attachments.com/t4655718/92d9a59c-f64c-4190-9030-48019e144826/image.png)</Frame>
    </div>
  </Accordion>

  <Accordion title="Modern">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>
        <img src="https://mintcdn.com/dzm/kROSHCGCRm0V5RJ7/images/niu-plus-kategorieseite-ohne-karte-modern.png?fit=max&auto=format&n=kROSHCGCRm0V5RJ7&q=85&s=28be4078c0cad0d7649b65d204355ad6" alt="" width="2402" height="908" data-path="images/niu-plus-kategorieseite-ohne-karte-modern.png" />
      </Frame>
    </div>
  </Accordion>

  <Accordion title="Flat">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>
        <img src="https://mintcdn.com/dzm/kROSHCGCRm0V5RJ7/images/niu-plus-kategorieseite-ohne-karte-flat.png?fit=max&auto=format&n=kROSHCGCRm0V5RJ7&q=85&s=7f8dafa5e5048c1abeeb3344d0e1c829" alt="" width="2395" height="879" data-path="images/niu-plus-kategorieseite-ohne-karte-flat.png" />
      </Frame>
    </div>
  </Accordion>
</AccordionGroup>

**Einfache Karte**

<AccordionGroup>
  <Accordion title="Klassisch">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>![](https://t4655718.p.clickup-attachments.com/t4655718/ef87f241-1b9e-4afa-8f20-054ae1c6c03d/image.png)</Frame>
    </div>
  </Accordion>

  <Accordion title="Modern">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>
        <img src="https://mintcdn.com/dzm/kROSHCGCRm0V5RJ7/images/niu-plus-kategorieseite-einfache-karte-modern.png?fit=max&auto=format&n=kROSHCGCRm0V5RJ7&q=85&s=66da85052c1200efb1b01662d297bb8e" alt="" width="2486" height="1001" data-path="images/niu-plus-kategorieseite-einfache-karte-modern.png" />
      </Frame>
    </div>
  </Accordion>

  <Accordion title="Flat">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>
        <img src="https://mintcdn.com/dzm/kROSHCGCRm0V5RJ7/images/niu-plus-kategorieseite-einfache-karte-flat.png?fit=max&auto=format&n=kROSHCGCRm0V5RJ7&q=85&s=e29deb4bfaff6efd4a4b947103a6b49d" alt="" width="2514" height="982" data-path="images/niu-plus-kategorieseite-einfache-karte-flat.png" />
      </Frame>
    </div>
  </Accordion>
</AccordionGroup>

**Schattierte Karte**

<AccordionGroup>
  <Accordion title="Klassisch">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>![](https://t4655718.p.clickup-attachments.com/t4655718/8be11f62-f8bc-4cb7-8e1e-f5f342a2544e/image.png)</Frame>
    </div>
  </Accordion>

  <Accordion title="Modern">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>
        <img src="https://mintcdn.com/dzm/kROSHCGCRm0V5RJ7/images/niu-plus-kategorieseite-schattierte-karte-modern.png?fit=max&auto=format&n=kROSHCGCRm0V5RJ7&q=85&s=425bcf03ac2f56c39649700d5edab61c" alt="" width="2563" height="1023" data-path="images/niu-plus-kategorieseite-schattierte-karte-modern.png" />
      </Frame>
    </div>
  </Accordion>

  <Accordion title="Flat">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>
        <img src="https://mintcdn.com/dzm/kROSHCGCRm0V5RJ7/images/niu-plus-kategorieseite-schattierte-karte-flat.png?fit=max&auto=format&n=kROSHCGCRm0V5RJ7&q=85&s=0cf671521837ea6304abc94d9d18911d" alt="" width="2552" height="986" data-path="images/niu-plus-kategorieseite-schattierte-karte-flat.png" />
      </Frame>
    </div>
  </Accordion>
</AccordionGroup>

**Umrandete Karte**

<AccordionGroup>
  <Accordion title="Klassisch">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>![](https://t4655718.p.clickup-attachments.com/t4655718/5637f1f8-3184-4568-90b4-0aa376ebdf59/image.png)</Frame>
    </div>
  </Accordion>

  <Accordion title="Modern">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>
        <img src="https://mintcdn.com/dzm/kROSHCGCRm0V5RJ7/images/niu-plus-kategorieseite-umrandete-karte-modern.png?fit=max&auto=format&n=kROSHCGCRm0V5RJ7&q=85&s=96542539111d5b5563ad9e5720aaeadb" alt="" width="2528" height="993" data-path="images/niu-plus-kategorieseite-umrandete-karte-modern.png" />
      </Frame>
    </div>
  </Accordion>

  <Accordion title="Flat">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>
        <img src="https://mintcdn.com/dzm/kROSHCGCRm0V5RJ7/images/niu-plus-kategorieseite-umrandete-karte-flat.png?fit=max&auto=format&n=kROSHCGCRm0V5RJ7&q=85&s=0e471092cb9c3c0c7a07541952974b91" alt="" width="2500" height="955" data-path="images/niu-plus-kategorieseite-umrandete-karte-flat.png" />
      </Frame>
    </div>
  </Accordion>
</AccordionGroup>

### Border Radius der Karte

Hier kannst du die Kantenabrundung der Produktkarten festlegen. Verwende eine CSS Auszeichnung, um den Border Radius festzulegen. Beispiele:

```elixir theme={null}
0                 -> Keine Abrundung
5px 5px 5px 5px   -> 5px an jeder Seite
5px               -> 5px an jeder Seite
0 10px 5px 0      -> Oben links 0, oben rechts 10px, unten rechts 5px, unten links 0
15px 10px         -> Oben links und unten rechts 15px, oben rechts und unten links 10px
```

### Produktbewertungen anzeigen

Entscheide, ob die Produktbewertungen in der Kategorieansicht bzw. in Slidern direkt am Produkt dargestellt werden sollen.

### Anzahl Produktvariationen anzeigen

Entscheide, ob die Anzahl der Produktvariationen in der Kategorieansicht bzw. in Slidern direkt am Produkt dargestellt werden sollen.

<AccordionGroup>
  <Accordion title="Aktiviert">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>![](https://t4655718.p.clickup-attachments.com/t4655718/98151035-2593-4423-86de-efb260ebff12/image.png)</Frame>
    </div>
  </Accordion>

  <Accordion title="Deaktiviert">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>![](https://t4655718.p.clickup-attachments.com/t4655718/d96dc1dd-3ef2-4b17-bf19-63621e5eb26b/image.png)</Frame>
    </div>
  </Accordion>
</AccordionGroup>

### Produktkurzbeschreibung anzeigen

Entscheide, ob eine Kurzbeschreibung deines Produkts in der Karte angezeigt werden soll.

### Preisdarstellung

Lege fest, wie die Preise deiner Produkte in der Kategorieansicht bzw. in Slidern angezeigt werden sollen. Auswahl zwischen:

<AccordionGroup>
  <Accordion title="Einfach">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>![](https://t4655718.p.clickup-attachments.com/t4655718/0b8af8c0-4331-41cb-8274-6135265e6622/image.png)</Frame>
    </div>
  </Accordion>

  <Accordion title="Ribbon Style">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>![](https://t4655718.p.clickup-attachments.com/t4655718/e990b2dd-609f-42cd-8e21-e3dedb5fddbd/image.png)</Frame>
    </div>
  </Accordion>

  <Accordion title="Ribbons bei Sonderpreis">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>![](https://t4655718.p.clickup-attachments.com/t4655718/4ae34130-d915-4c0b-b58b-04acd9c21a37/image.png)</Frame>
    </div>
  </Accordion>
</AccordionGroup>

### Lagerbestandsanzeige darstellen

Entscheide, ob die Lagerbestandsanzeige der einzelnen Produkte in der Kategorieansicht bzw. in Slidern dargestellt werden soll. Auswahl zwischen:

<AccordionGroup>
  <Accordion title="Deaktiviert">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>![](https://t4655718.p.clickup-attachments.com/t4655718/5a347cd1-5faf-4fc1-aff9-a3e98f9e5757/image.png)</Frame>
    </div>
  </Accordion>

  <Accordion title="Aktiviert">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>![](https://t4655718.p.clickup-attachments.com/t4655718/166c5cf2-44c4-4188-87d0-7049c5fb1cb4/image.png)</Frame>
    </div>
  </Accordion>
</AccordionGroup>

### Lieferzeit anzeigen

Entscheide, ob die Lieferzeit in der Kategorieansicht bzw. in Slidern direkt am Produkt angezeigt werden soll.

<AccordionGroup>
  <Accordion title="Deaktiviert">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>![](https://t4655718.p.clickup-attachments.com/t4655718/4f698027-897e-4b42-b893-6a8a3d6f01a4/image.png)</Frame>
    </div>
  </Accordion>

  <Accordion title="Aktiviert">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>![](https://t4655718.p.clickup-attachments.com/t4655718/3b04bbdf-3a97-4214-aed0-05601e2f972c/image.png)</Frame>
    </div>
  </Accordion>
</AccordionGroup>

***

## Kategorietexte

Hier findest du Einstellungen für den Kategoriebeschreibungstext, den du über die Wawi gepflegt hast.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/6Hc0p0DsnmohjT-R/images/niu-plus-kategorieseite-kategorietexte.jpg?fit=max&auto=format&n=6Hc0p0DsnmohjT-R&q=85&s=237f429d321db9329b72ac5822c23221" alt="Kategorietexte" width="2076" height="360" data-path="images/niu-plus-kategorieseite-kategorietexte.jpg" />
  </Frame>
</div>

### Kategorietext Position

Lege fest, an welcher Stelle der Kategoriebeschreibungstext ausgegeben werden soll. Auswahl zwischen **Über Produktgallerie**, **Unter Produktgallerie** und **Geteilt per Trennzeichen**.

### Geteilt per Trennzeichen

Wenn du **Geteilt per Trennzeichen** als Kategorietext Position wählst, wird der Kategoriebeschreibungstext anhand eines definierten Trennzeichens in mehrere Spalten aufgeteilt. Folgende Einstellungen werden dann sichtbar:

<ParamField path="Anzahl Spalten" type="number">
  Lege fest, in wie viele Spalten der Text aufgeteilt werden soll.
</ParamField>

<ParamField path="Trennzeichen" type="string">
  Definiere das Zeichen oder die Zeichenfolge, anhand derer der Text aufgeteilt wird. Standard: `---`
</ParamField>

<div style={{height: '1px', backgroundColor: 'silver', margin: '24px 0'}} />