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

# Feature Ribbons

> Erstelle individuelle Ribbons basierend auf Artikelattributen und steuere deren Darstellung global, in Listen und auf Detailseiten.

## Allgemeine Einstellungen

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/tjVksA6_hs3mfARq/images/niu-plus-feature-ribbons-allgemeine-einstellungen.jpg?fit=max&auto=format&n=tjVksA6_hs3mfARq&q=85&s=f598c83ec5f4e28718aa39ea185d8108" alt="Allgemeine Einstellungen" width="2076" height="206" data-path="images/niu-plus-feature-ribbons-allgemeine-einstellungen.jpg" />
  </Frame>
</div>

***

## Features in Kategorien

Hier konfigurierst du die Begrenzungen für die Anzeige von Ribbons in Produktlisten (Kategorieübersichten, Suchergebnisse), um das Layout übersichtlich zu halten.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/tjVksA6_hs3mfARq/images/niu-plus-feature-ribbons-kategorien.jpg?fit=max&auto=format&n=tjVksA6_hs3mfARq&q=85&s=c72dece85a8e8a4294988ecd5eede4d1" alt="Features in Kategorien" width="2064" height="320" data-path="images/niu-plus-feature-ribbons-kategorien.jpg" />
  </Frame>
</div>

<ParamField path="Maximale Anzahl an Ribbons auf Artikelliste" type="number">
  Lege fest, wie viele Ribbons maximal pro Produktkachel in der Listenansicht angezeigt werden dürfen (z. B. "4"). Überschüssige Ribbons werden ausgeblendet.
</ParamField>

<ParamField path="Maximale Anzahl Ribbon Zeilen in Artikellisten" type="number">
  Definiere, wie viele Zeilen die Ribbons in der Listenansicht maximal einnehmen dürfen (z. B. "1"). Dies verhindert, dass Kacheln durch zu viele Ribbons unterschiedlich hoch werden.
</ParamField>

***

## Features in Details

Hier konfigurierst du die Begrenzungen für die Anzeige von Ribbons auf der Produktdetailseite.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/tjVksA6_hs3mfARq/images/niu-plus-feature-ribbons-details.jpg?fit=max&auto=format&n=tjVksA6_hs3mfARq&q=85&s=d740c6fba12f868f6eb59a671ae62b26" alt="Features in Details" width="2070" height="330" data-path="images/niu-plus-feature-ribbons-details.jpg" />
  </Frame>
</div>

<ParamField path="Maximale Anzahl an Ribbons auf Produktdetailseite" type="number">
  Gib an, wie viele Ribbons maximal auf der Detailseite eines Artikels angezeigt werden sollen.
</ParamField>

<ParamField path="Maximale Anzahl Ribbon Zeilen in Produktdetails" type="number">
  Lege fest, auf wie viele Zeilen die Ribbons auf der Detailseite begrenzt werden sollen.
</ParamField>

***

## Ribbon anlegen

In diesem Bereich erstellst du neue Ribbons und definierst deren Quelle, Verhalten und Design.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/S0oalOEK5p4z7zxF/images/niu-plus-feature-ribbons-ribbon-anlegen.jpg?fit=max&auto=format&n=S0oalOEK5p4z7zxF&q=85&s=2194a5d29d87bf2b93debaa7d4248e80" alt="Ribbon anlegen" width="2308" height="2107" data-path="images/niu-plus-feature-ribbons-ribbon-anlegen.jpg" />
  </Frame>
</div>

<ParamField path="Merkmal oder Attribute aus Liste wählen" type="select">
  Wähle ein bereits im Shop bekanntes Merkmal oder Attribut direkt aus der Dropdown-Liste aus, um es als Ribbon anzulegen. Die Liste wird dynamisch aus den in deinem Shop vorhandenen Merkmalen, Attributen und Funktionsattributen befüllt, etwa Farbe, Größe, Freitext Vater/Kind, Standardlager oder die GPSR- und Garantie-Attribute.
</ParamField>

### Merkmal- oder Attributname und Quelle manuell definieren

Falls das gewünschte Attribut nicht in der Liste erscheint, kannst du es hier manuell definieren.

* **Name:** Trage den internen Namen des Merkmals oder Attributs ein.
* **Quelle:** Wähle im Dropdown daneben den Typ aus: **Attribut**, **Funktions-Attribut** oder **Merkmal**.

<br />

<ParamField path="Datentyp" type="select">
  Bestimme das Format der Daten, z. B. **Text** oder **Gleitkomma (2 Nachkommastellen)**.
</ParamField>

<ParamField path="'Felder mit Leer- und 0-Werten' nicht als Ribbon darstellen" type="boolean">
  Je nach Datentyp kannst du hier einstellen, dass Felder mit leeren Werten nicht als Ribbon angezeigt werden sollen:

  * Ganzzahl & Gleitkomma: 0 oder ohne Wert
  * Checkbox: False
  * Alles andere: leer/ohne Inhalt

  Trifft der jeweilige Wert zu, wird das Ribbon bei aktiver Option ausgeblendet. Alternativ wird immer ein Ribbon ausgegeben, wenn das Attribut vorhanden ist.

  <Note>
    Abhängig vom Feldtyp listet der Shop z. B. Funktionsattribute gar nicht, diese können damit unabhängig von dieser Option nicht dargestellt werden. Prüfe gegebenenfalls mit aktiver Debug-Einstellung unter den globalen Einstellungen im Frontend auf der Artikeldetailseite, ob das Attribut vorhanden ist. Beachte auch den Shopcache, der eine Aktualisierung öfter mal behindert.
  </Note>
</ParamField>

<ParamField path="Einheit" type="string">
  Gib optional eine Einheit an (z. B. "cm", "kg"), die hinter dem Wert im Ribbon angezeigt wird.
</ParamField>

<ParamField path="Alternativer Eigenschaftsname" type="string">
  Besonders geeignet für Funktionsattribute. Trage einen eigenen Namen oder eine Sprachvariable ein, wenn im Shop ein anderer Text stehen soll als der technische Name aus der Warenwirtschaft.
</ParamField>

<ParamField path="Anzeige" type="boolean">
  Steuere die Sichtbarkeit des Ribbons getrennt für verschiedene Bereiche:

  * **in Listen:** Aktivieren für Kategorie- und Übersichtsseiten.
  * **in Details:** Aktivieren für die Produktdetailseite.
</ParamField>

<ParamField path="Eigene Farben verwenden" type="boolean">
  Aktiviere diese Option, um die globalen Farbeinstellungen des Themes zu überschreiben und individuelle Farben für dieses spezifische Ribbon festzulegen.
</ParamField>

<ParamField path="Hintergrund" type="color">
  Wähle die Hintergrundfarbe für das Ribbon (nur aktiv, wenn "Eigene Farben verwenden" aktiviert ist).
</ParamField>

<ParamField path="Schriftfarbe" type="color">
  Wähle die Farbe für den Text im Ribbon (nur aktiv, wenn "Eigene Farben verwenden" aktiviert ist).
</ParamField>

<ParamField path="Custom Icon Code verwenden" type="boolean">
  Aktiviere diese Option, um ein Icon mittels Code einzufügen.
</ParamField>

<ParamField path="Icon" type="icon">
  Wähle über den Icon-Picker ein Icon aus, das im Ribbon angezeigt werden soll.
</ParamField>

<ParamField path="Icon anzeigen" type="boolean">
  Lege fest, ob das Icon angezeigt werden soll:

  * **in Listen:** Icon in der Listenansicht anzeigen.
  * **in Details:** Icon auf der Detailseite anzeigen.
</ParamField>

<ParamField path="Eigenschaftsnamen anzeigen" type="boolean">
  Entscheide, ob der Name des Attributs (z. B. "Material:") angezeigt wird:

  * **in Listen**
  * **in Details**
</ParamField>

<ParamField path="Eigenschaftswert anzeigen" type="boolean">
  Entscheide, ob der Wert des Attributs (z. B. "Holz") angezeigt wird:

  * **in Listen**
  * **in Details**
</ParamField>

<ParamField path="Tooltip einblenden" type="boolean">
  Aktiviere diese Option, um beim Überfahren des Ribbons mit der Maus (Hover) einen Tooltip anzuzeigen.
</ParamField>

<ParamField path="Eigenschaftsname im Tooltip anzeigen" type="boolean">
  Wenn aktiviert, wird auch im Tooltip der Name der Eigenschaft angezeigt.
</ParamField>

<ParamField path="Custom CSS Klassen" type="string">
  Füge hier eigene CSS-Klassen hinzu, um das Ribbon über dein Stylesheet individuell anzusprechen.
</ParamField>

<ParamField path="Entferne alle Standard Klassen des Elements" type="boolean">
  Aktiviere diese Option, um das Standard-Styling des Themes für dieses Ribbon komplett zu entfernen (Reset).
</ParamField>

### Hinzufügen

Klicke auf diesen Button, um das konfigurierte Ribbon zu speichern und der Liste hinzuzufügen.

***

## Angelegte Feature Ribbons

Hier kannst du Einstellungen für die Darstellung der Feature-Ribbons auf der Produktdetailseite vornehmen.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/tjVksA6_hs3mfARq/images/niu-plus-feature-ribbons-angelegte-ribbons.jpg?fit=max&auto=format&n=tjVksA6_hs3mfARq&q=85&s=6c9c1c391846040a8392fca3cf5bcf72" alt="Angelegte Feature Ribbons" width="2070" height="308" data-path="images/niu-plus-feature-ribbons-angelegte-ribbons.jpg" />
  </Frame>
</div>

<ParamField path="Maximale Anzahl an Ribbons auf Produktdetailseite" type="number">
  Gib hier einen Zahlenwert ein, um festzulegen, wie viele Ribbons maximal auf der Detailseite eines Artikels angezeigt werden dürfen.
</ParamField>

<ParamField path="Maximale Anzahl Ribbon Zeilen in Produktdetails" type="number">
  Gib hier einen Zahlenwert ein, um zu definieren, auf wie viele Zeilen die Ribbons auf der Detailseite maximal begrenzt werden sollen.
</ParamField>

***

## Standard Ribbons

Hier kannst du steuern, wie mit den Standard-Ribbons des Shops (z. B. "Neu", "Bestseller", "Sale") verfahren wird.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/tjVksA6_hs3mfARq/images/niu-plus-feature-ribbons-standard-ribbons.jpg?fit=max&auto=format&n=tjVksA6_hs3mfARq&q=85&s=a4458b8b4c5830f90e6d0051b9f19b60" alt="Standard Ribbons" width="2068" height="356" data-path="images/niu-plus-feature-ribbons-standard-ribbons.jpg" />
  </Frame>
</div>

<ParamField path="Standardribbons mit in Liste aufnehmen" type="boolean">
  Die Standard-Ribbons werden der Liste der Feature Ribbons vorangestellt, in der Reihenfolge ihrer Priorität, die du in deinem Shop eingestellt hast. Standard-Ribbons zählen mit zu der Anzahl maximal darstellbarer Ribbons, sie verdrängen also nachfolgende Feature Ribbons.

  Ist die Option aktiv, erscheint der Abschnitt "Standardribbons die mit gelistet werden sollen" mit einem eigenen Schalter je Standard-Ribbon.
</ParamField>

<ParamField path="Auf Artikellisten" type="boolean">
  Aktiviere dies, um Standard-Ribbons in den Listenansichten anzuzeigen.
</ParamField>

<ParamField path="Auf Artikeldetails" type="boolean">
  Aktiviere dies, um Standard-Ribbons auf den Detailseiten anzuzeigen.
</ParamField>

### Standardribbons die mit gelistet werden sollen

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/S0oalOEK5p4z7zxF/images/niu-plus-feature-ribbons-standardribbons-liste.png?fit=max&auto=format&n=S0oalOEK5p4z7zxF&q=85&s=9f7dbd97bde82ce13fcb6721b3ecdbdb" alt="Standardribbons die mit gelistet werden sollen" width="2076" height="876" data-path="images/niu-plus-feature-ribbons-standardribbons-liste.png" />
  </Frame>
</div>

* Bestseller
* Sonderangebot
* Neu im Sortiment
* Top Angebot
* Erscheinendes Produkt
* Top bewertet
* Ausverkauft
* Auf Lager
* Vorbestellbar

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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.