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

# Produktdetailseite

> Produktdetailseiten-Einstellungen und Custom Boxes

<Note>
  Die Kartenstile dieser Seite stehen gesammelt in [Theme 2.0](/NIU-Plus/theme-2-0), Abschnitt "Kartenstile". Dort lassen sie sich auch an einen globalen Standard binden. Die Selects hier greifen auf denselben Wert zu und funktionieren unverändert weiter.
</Note>

## Allgemeine Einstellungen

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

<ParamField path="Gallerietyp" type="select">
  Wähle hier einen passenden Gallerietypen für die Produktbilder auf deiner Produktdetailseite. Auswahl zwischen:

  **Slider**

  <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
    <Frame>
      <img src="https://mintcdn.com/dzm/EaQjwIOo3vUgpmVw/images/niu-plus-produktdetail-gallerietyp-slider.png?fit=max&auto=format&n=EaQjwIOo3vUgpmVw&q=85&s=56ddd63b8bccfcd7a4785a83a506408b" alt="Gallerietyp Slider" width="3641" height="2288" data-path="images/niu-plus-produktdetail-gallerietyp-slider.png" />
    </Frame>
  </div>

  **Grid**

  <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
    <Frame>
      <img src="https://mintcdn.com/dzm/S0oalOEK5p4z7zxF/images/niu-plus-produktdetail-gallerietyp-grid.png?fit=max&auto=format&n=S0oalOEK5p4z7zxF&q=85&s=448363745eeeadc86eaa1582f13b299c" alt="Gallerietyp Grid" width="3634" height="2866" data-path="images/niu-plus-produktdetail-gallerietyp-grid.png" />
    </Frame>
  </div>

  **Box**

  <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
    <Frame>
      <img src="https://mintcdn.com/dzm/S0oalOEK5p4z7zxF/images/niu-plus-produktdetail-gallerietyp-box.png?fit=max&auto=format&n=S0oalOEK5p4z7zxF&q=85&s=2872c593e105192729fc18a142b3c097" alt="Gallerietyp Box" width="3633" height="2329" data-path="images/niu-plus-produktdetail-gallerietyp-box.png" />
    </Frame>
  </div>
</ParamField>

<ParamField path="Border Radius" type="string">
  Hier kannst du die Kantenabrundung 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
  ```
</ParamField>

<ParamField path="Media Videos in Gallerie darstellen" type="boolean">
  Du hast hier die Option, YouTube-, Vimeo- oder lokale Videos aus den am Produkt hinterlegten Medien in der Galerie anzeigen zu lassen. Lokale Videos: Achte darauf, dass du einen Filetyp hinterlegt hast. YouTube- und Vimeo-Videos: Hinterlege die vollständige URL im Feld, bei Vimeo-Videos wird zusätzlich eine Zustimmung eingeholt. Blende die Videos nicht zusätzlich als Custom Box ein.

  <Note>
    Die frühere Voraussetzung, dass Videos mit dem Attribut `niu_gallery_video` und einem Titel angelegt werden müssen, ist seit Version 4.10.7 nicht mehr erforderlich.
  </Note>
</ParamField>

<ParamField path="Productinfo-Nav Box Card Style" type="select">
  Stil der Productinfo-Nav, also der Zeile unterhalb der gesamten Productform, in die du CustomBoxes einfügen kannst (siehe unten CustomBoxes)
</ParamField>

<ParamField path="Productinfo-Nav und Downloads/Medien Box Border Radius" type="string">
  Hier kannst du die Kantenabrundung 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
  ```
</ParamField>

<ParamField path="Downloads/Medien Box Card Style" type="select">
  Stil der Download Elemente für Downloadpreview und Downloadmedien.
</ParamField>

***

## BuyBox

Die Buybox ist der rechte Container der Artikeldetailseite, in dem alle kaufrelevanten Informationen enthalten sind.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/fTQ9qGC3E3oJPWoD/images/niu-plus-produktdetail-buybox.jpg?fit=max&auto=format&n=fTQ9qGC3E3oJPWoD&q=85&s=5125353e980ddc5528c1864a5e260bfe" alt="BuyBox" width="2070" height="1867" data-path="images/niu-plus-produktdetail-buybox.jpg" />
  </Frame>
</div>

<ParamField path="Sticky Checkout Container aktivieren" type="boolean">
  Soll die Buy Box beim scrollen im Sichtfeld des Kunden mit laufen?

  Achtung! Solltest du andere Plugins verwenden, die einen Popup Button mit in diesen Bereich einfügen, kann das ungewünschte Auswirkungen auf das Popup haben, je nachdem wie die Entwickler das Popup gestaltet haben. Deaktiviere im Zweifel diese Option und wende dich an die Entwickler mit der Bitte, ihr Popup, respektive 'Modal' außerhalb des Containers einzubinden.
</ParamField>

<ParamField path="Spaltenbreite Galerie zu Buybox auf Desktop" type="string">
  Bestimmt die Spaltenbreite der Artikelgalerie und der Buybox auf dem Desktop Die Summe muss 12 ergeben. Standard ist 7:5.
</ParamField>

<ParamField path="Buy Box Card Style" type="select">
  Lege hier einen Style für deine Buy Box fest.
</ParamField>

<ParamField path="Buy Box Border Radius" type="string">
  Hier kannst du die Kantenabrundung 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
  ```
</ParamField>

<ParamField path="Artikelnummer ausblenden" type="boolean">
  Lege fest, ob deine Artikelnummer angezeigt werden soll.
</ParamField>

<ParamField path="Bundle Hinweis Nutzen" type="boolean">
  Lege fest, ob der Hinweis auf einen Vorteilspreis beim Kauf mehrerer Artikel angezeigt werden soll.
</ParamField>

<ParamField path="Variationsauswahl anzeigen" type="boolean">
  Wenn du ohnehin die Variationsauswahl in der Sidebar über die Custom Boxes aktiviert hast, kannst du hier die standardmäßige Variationsauswahl deaktivieren, um mehr Raum für wesentliche Inhalte zu schaffen. Deine Kunden können über die Variationsauswahl in der Sidebar direkt auf Kindartikel zugreifen, ohne erst die Kombination aus Variationen manuell auswählen zu müssen.
</ParamField>

<ParamField path="Variationsübersicht Sidebar aktivieren" type="boolean">
  Aktiviert auf Vaterartikeln mit Klick auf 'Produktvariation wählen' die Sidebar mit allen Kindartikeln zur Direktauswahl
</ParamField>

<ParamField path="Lieferzeiten mit anzeigen" type="boolean">
  Entscheide, ob die Lieferzeit des Artikels unterhalb der Bestandsanzeige auf der Produktdetailseite ausgegeben werden soll.
</ParamField>

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/EaQjwIOo3vUgpmVw/images/niu-plus-produktdetail-lieferzeiten.png?fit=max&auto=format&n=EaQjwIOo3vUgpmVw&q=85&s=c367720f97a66575f204aa7dd6f2e16b" alt="Lieferzeit auf Produktdetailseite" width="5556" height="3748" data-path="images/niu-plus-produktdetail-lieferzeiten.png" />
  </Frame>
</div>

<ParamField path="Kurzübersicht einzelner Lager anzeigen" type="boolean">
  Zu diesem Zweck muss die Lageranzeige für einzelne Lager aktiviert sein:

  [Zur Shopeinstellung](https://latest.niuplus.de/admin/warehouses)
</ParamField>

<ParamField path="Versandkostenfrei-Progressbar anzeigen" type="boolean">
  Zeigt die Versandkostenfrei Progressbar unter dem Warenkorbbutton an, wenn diese in den Warenkorbeinstellungen aktiviert wurde und mindestens ein kostenfreier Versand zur Verfügung steht.
</ParamField>

<ParamField path="Zahlungsicons mit anzeigen" type="boolean">
  Lege fest, ob die Zahlungsicons mit auf der Produktdetailseite angezeigt werden sollen. Diese kannst du in den [Footereinstellungen](https://app.clickup.com/4655718/v/dc/4e2k6-14581/4e2k6-19955?block=block-9bd7fd92-98e2-4388-bb45-0d4cabb14638) anpassen.
</ParamField>

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/EaQjwIOo3vUgpmVw/images/niu-plus-produktdetail-zahlungsicons.png?fit=max&auto=format&n=EaQjwIOo3vUgpmVw&q=85&s=9ae36206def973fbec913574ca4f8b25" alt="Zahlungsicons auf Produktdetailseite" width="5688" height="3679" data-path="images/niu-plus-produktdetail-zahlungsicons.png" />
  </Frame>
</div>

<ParamField path="Warenkorb Button ausblenden, wenn nicht verfügbar" type="boolean">
  Entscheide ob der Warenkorb Button ausgeblendet werden soll, wenn das Produkt keinen Zulauf, Lieferantenbestanden, Erscheinungsdatum oder eigenen Bestand hat. Unabhängig davon ob Überverkäufe erlaubt sind oder nicht.

  Diese Option kann durch setzen des Attributs **niu\_force\_show\_checkoutbutton** beim entsprechenden Artikel in der Wawi außer Kraft gesetzt werden.
</ParamField>

<ParamField path="Spaltenbreite Mengenauswahl" type="string">
  Gib pro Ansichtsfenster – von sehr klein (XS) bis sehr groß (XL) – an, wie breit die Mengenauswahlbox sein soll.
</ParamField>

<ParamField path="Spaltenbreite Warenkorb Button" type="string">
  Gib pro Ansichtsfenster – von sehr klein (XS) bis sehr groß (XL) – an, wie breit der Warenkorb-Button sein soll.
</ParamField>

### USP 1-3

Du kannst bis zu drei Alleinstellungsmerkmale (Unique Selling Points) aktivieren; zu diesen kannst du jeweils ein Icon aus der Liste auswählen.

Den Text der USPs kannst du in den Sprachvariablen über **niu\_buybox\_usp1\_text**, **niu\_buybox\_usp2\_text** und **niu\_buybox\_usp3\_text** festlegen

<ParamField path="Floating Cart Button verwenden" type="boolean">
  Hier kannst du einen schwebenden Warenkorbbutton einblenden, wenn der eigentliche Button nicht im Sichtfeld ist.
</ParamField>

<ParamField path="BuyForm auf Buybox beschränken (Hinweis lesen)" type="boolean">
  Darüber wird die HTML Form für Kauf und andere Aktionen auf die Größe der BuyBox reduziert. Dadurch kannst du per Custom Boxes Elemente platzieren, die ebenfalls eine Form besitzen, ohne dass sich diese gegenseitig behindern. Solltest du den Konfigurator nutzen, musst du diese Funktion deaktivieren, weil der Konfigurator die BuyForm benötigt. Bei deaktivierter Option funktionieren Elemente in der Sidebar weiterhin uneingeschränkt und unabhängig. Lass diese Option im Zweifel deaktiviert und verwende die Sidebar für Form Elemente oder platziere Custom Boxes unterhalb der Artikeldetails.
</ParamField>

***

## Zusatzprodukte anbieten

Du kannst mit 2 speziellen Crosssellinggruppen Zusatzartikel anbieten, die in der BuyBox mit gelistet werden.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/fTQ9qGC3E3oJPWoD/images/niu-plus-produktdetail-zusatzprodukte.jpg?fit=max&auto=format&n=fTQ9qGC3E3oJPWoD&q=85&s=dc65a2376e5114fcf02bcaf532ccbd92" alt="Zusatzprodukte anbieten" width="2076" height="1190" data-path="images/niu-plus-produktdetail-zusatzprodukte.jpg" />
  </Frame>
</div>

### Einrichtung

Um Zusatzprodukte anzubieten benötigst du spezielle Crosssellingruppen, die du in der Wawi pflegst.

**niu\_additionals\_single#** und **niu\_additionals\_multiple#** — Du kannst mehrere solcher Crosssellinggruppen anlegen. Wichtig ist, dass der Name so lautet wie gerade beschrieben, inkl. "#". Nach dem "#" kannst du einen normalen Namen vergeben, zB. **niu\_additionals\_single#Zusatzproducte gleich mitbestellen**. Dieser Name steht als Titel über der Liste an Produkten. In **niu\_additionals\_single#** Gruppen kannst du Artikel hinzufügen, die du exakt ein mal per Checkbox aktivieren lassen möchtest. In **niu\_additionals\_multiple#** Gruppen kannst du Artikel hinzufügen, die über eine Mengenauswahl mehrfach hinzugefügt werden können. Du steuerst den Initialwert dabei über die Mindestbestellmenge und das Abnahmeintervall, wie gewohnt. Achte aber darauf, dass bei einer Mindestbestellmenge der Zusatzartikel zwingend mit in den Warenkorb gelegt wird, auch wenn der Kunde diesen wieder aus seinem Warenkorb entfernen kann.

<ParamField path="Kartenstil der Artikelelemente" type="select">
  Wähle hier zwischen verschiedenen Styles Zusatzartikelkarten.
</ParamField>

<ParamField path="Bild mit anzeigen" type="boolean">
  Entscheide ob das Produktbild mit angezeigt werden soll.
</ParamField>

<ParamField path="Kurzbeschreibung mit anzeigen" type="boolean">
  Aktivieren die Anzeige der Kurzbeschreibung hier.

  Alternativ kannst du das spezielle Attribut **niu\_additionals\_short\_desc** für eine alternative Kurzbeschreibung innerhalb der Boxen verwenden. Wenn das Attribut gesetzt ist, wird die Beschreibung immer angezeigt. Ist es nicht gesetzt, wird die Kurzbeschreibung nur dann angezeigt, wenn die entsprechende Option aktiviert ist.
</ParamField>

<ParamField path="Einheit bei Menge anzeigen" type="boolean">
  Hier kannst du die Anzeige der Mengeneinheit deiner Zusatzartikel aktivieren.
</ParamField>

***

## NIU+ HiLite

Sag Hallo zu NIU+ HiLite - der Option, die die Farbstimmung deiner Produktfotos aufgreift und deinen Shop um eine stimmungsvolle Farbgebung bereichert.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/fTQ9qGC3E3oJPWoD/images/niu-plus-produktdetail-hilite.jpg?fit=max&auto=format&n=fTQ9qGC3E3oJPWoD&q=85&s=601dc9d2730f0a6000335d4b707c2a45" alt="NIU+ HiLite" width="2066" height="524" data-path="images/niu-plus-produktdetail-hilite.jpg" />
  </Frame>
</div>

<ParamField path="HiLite verwenden" type="boolean">
  Aktiviere hier diese Option.
</ParamField>

<ParamField path="HiLite Position" type="select">
  Lege hier fest, an welcher Position die von HiLite ermittelte Farbstimmung auf der Produktdetailseite eingesetzt werden soll.
</ParamField>

<ParamField path="HiLite Profil" type="select">
  Wähle hier ein Profil, das bestimmt, nach welchem Muster HiLite die Farbe aus dem Produktbild ermittelt. Standard ist **normal**.
</ParamField>

<ParamField path="Statische Farben verwenden" type="boolean">
  Aktiviere diese Option, um anstelle der automatisch aus dem Produktbild ermittelten Farbe feste, manuell hinterlegte Farben zu verwenden.
</ParamField>

***

## Produktempfehlungs Slider

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/fTQ9qGC3E3oJPWoD/images/niu-plus-produktdetail-empfehlungs-slider.jpg?fit=max&auto=format&n=fTQ9qGC3E3oJPWoD&q=85&s=95843c9905a534bd7041ef8cb238ae49" alt="Produktempfehlungs Slider" width="2072" height="286" data-path="images/niu-plus-produktdetail-empfehlungs-slider.jpg" />
  </Frame>
</div>

<ParamField path="Kunden kauften auch Slider darstellen" type="boolean">
  Aktiviert den Slider, welcher Produkte auf Basis des Kaufverhaltens von Kunden für denselben Artikel anzeigt.

  Dafür muss die JTL Shop Einstellung [87](https://latest.niuplus.de/admin/config?einstellungen_suchen=1\&cSuche=87) aktiv sein.
</ParamField>

<ParamField path="Ähnliche Produkte Slider darstellen" type="boolean">
  Aktiviert den Slider, welcher gleichartige Produkte anzeigt.

  Dafür muss die JTL Shop Einstellung [1123](https://latest.niuplus.de/admin/config?einstellungen_suchen=1\&cSuche=1123) mehr als 0 sein.
</ParamField>

***

## 30 Tage Bestpreis

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/fTQ9qGC3E3oJPWoD/images/niu-plus-produktdetail-bestpreis.jpg?fit=max&auto=format&n=fTQ9qGC3E3oJPWoD&q=85&s=b6baf1952ea3e6aa6afef81142db5d35" alt="30 Tage Bestpreis" width="2076" height="494" data-path="images/niu-plus-produktdetail-bestpreis.jpg" />
  </Frame>
</div>

⚠️ **Wichtiger Hinweis:** Die Regelung der Omnibus-Richtlinie, aus der der laienhafte Begriff '30-Tage-Bestpreis' entspringt sieht nicht vor, dass eine Markierung als 30 Tage Bestpreis am Artikel geführt werden muss. Die Regel bezieht sich ausschließlich auf rabattierte Artikel. Dazu muss am Artikel 1. ein Bezugspreis stehen, also der ursprüngliche Preis und 2. muss dieser Preis dem niedrigsten Preis der letzten 30 Tage entsprechen. Das bedeutet, dass dein Standard VK in der Wawi so gepflegt sein muss, dass er nicht höher liegt als der aktuelle VK, bevor du einen Rabatt darauf anwendest. Dennoch kann eine Auszeichnung als 30 Tage Bestpreis vorteilhaft für deine Verkäufe sein und gibt dem Kunden ein gutes Gefühl. Geh sparsam damit um und pflege in erster Linie deine korrekten Preise, vermeide Ballonpreise und Fake-Rabatte.

<ParamField path="30 Tage Bestpreis Badge anzeigen" type="boolean">
  Hier aktivierst du die Anzeige für ein Badge unter dem Preis mit frei wählbarem Text an, wenn der Standard VK dem niedrigsten VK des aktuellen und letzten Monats entspricht.

  Den Text für den Bestpreis Badge kannst du in den Sprachvariablen über **niu\_best\_price** festlegen.
</ParamField>

<ParamField path="Bestpreis statt Alter Preis" type="boolean">
  Hier ersetzt due die Anzeige '**Alter Preis**' durch ein durchgestrichenes Best Preis Badge, wenn du einen Rabatt pflegst und der sonst Standard VK dem niedrigsten VK des aktuellen und letzten Monats entspricht.
</ParamField>

<ParamField path="Hinweis auf Bestpreis anzeigen" type="boolean">
  Hier aktivierst du einen abgesetzten Hinweis mit dem Wert des aktuellen Bestpreises des letzten Zeitraums, wenn der aktuelle Standard VK vor Rabatt höher liegt als der niedrigste VK des aktuellen und letzten Monats.
</ParamField>

***

## Custom Boxes

### Was sind Custom Boxes und worauf ist zu achten?

Custom Boxes ist unsere Antwort auf überladene Produktdetailseiten und dein Weg zu einer verkaufsoptimierten Produktpräsentation bei der Produkt und Crossselling Artikel wieder im Fokus des Users sind. Sämtliche "Tabs", die du von JTL kennst, werden bei uns über Custom Boxes abgebildet. Oben drauf haben wir noch nette Zusatzoptionen für eigene Boxen. Custom Boxes kannst du beliebig verteilen und in die dafür vorgesehenen Slots einbauen. Dabei bieten dir Custom Boxes viele Gestaltungsmöglichkeiten. Ein Grundkonzept ist die Zusammenarbeit mit der Sidebar. Standardmäßig werden alle Inhalte per Klick über Sidebar aufgerufen. Bis auf Custom Boxes vom Style "Button" hast du aber immer die Möglichkeit über eine Option den Inhalt direkt in der Box ausgeben zu lassen. So kannst du relevante Daten direkt anzeigen lassen und zusätzliche Informationen über die Sidebar zur Verfügung stellen.

**Ist das nicht schlecht fürs SEO?** Nein, ist es nicht. Fürs SEO wäre es nur schlecht, wenn du Texte komplett versteckst und damit versuchst die Suchmaschine zu täuschen. Inhalte, die bei Bedarf über Sidebars oder Akkordions bereitgestellt werden, sind SEO-technisch absolut unproblematisch.

**WICHTIG:** Damit jede Box dargestellt werden kann, muss die entsprechende Option im Shop auch aktiviert sein. zB: Wenn du die Box **Frage zum Artikel** nutzen möchtest, dann muss auch im Shop die Form **Frage zum Artikel** aktiv sein. Gleiches gilt für alle anderen Boxen wie **Bewertung** oder **Medien Tabs**

<a href="https://www.loom.com/embed/61e45776d7af42c283adbf08423997fc?sid=ea0a2179-5ce0-4467-8053-c4623aea6064" target="_blank" style={{display: 'block', width: '100%', padding: '10px 16px', backgroundColor: '#004c54', color: '#fff', borderRadius: '8px', textAlign: 'center', fontWeight: '500', textDecoration: 'none', boxSizing: 'border-box'}}>Videoeinführung in Custom Boxes</a>

***

**Allgemeines**

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/S0oalOEK5p4z7zxF/images/niu-plus-produktdetail-custom-boxes-uebersicht.png?fit=max&auto=format&n=S0oalOEK5p4z7zxF&q=85&s=2972046b3f7664802d6e5cfef48df675" alt="Custom Boxes Übersicht mit allen Slots" width="2024" height="2660" data-path="images/niu-plus-produktdetail-custom-boxes-uebersicht.png" />
  </Frame>
</div>

In der Vorschau wird jeder einzelne Eintrag als "Content-Box" bezeichnet, die Gesamtfunktion trägt weiterhin den Namen Custom Boxes.

<ParamField path="Mobil Box unter Produktbild und Box unter Buybox tauschen" type="boolean">
  Standardmäßig wird mobil zuerst der Content der Boxen unter dem Produktbild und anschließend der Content der Boxen unter der Buybox ausgegeben. Mit Aktivierung der Checkbox tauschen die beiden Slots ihren Platz unter mobilen Endgeräten.
</ParamField>

### In Kürze

Um eine Custom Box anzulegen, klickst du lediglich auf das kleine **+** auf den jeweiligen Slots und wählst den Typ der Custom Box aus. Scroll anschließend nach unten, klick auf **Hinzufügen** und abschließend im Haupteinstellungsbereich unten rechts auf **Speichern,** um die Änderung auch im Shop zu übernehmen.

### Eine Custom Box konfigurieren

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/S0oalOEK5p4z7zxF/images/niu-plus-produktdetail-custom-box-konfiguration.png?fit=max&auto=format&n=S0oalOEK5p4z7zxF&q=85&s=83b1ebf1282537104990b0817022bb0b" alt="Konfiguration einer Custom Box" width="2266" height="2423" data-path="images/niu-plus-produktdetail-custom-box-konfiguration.png" />
  </Frame>
</div>

<ParamField path="Position" type="select">
  Wähle hier die Position, wo die Custom Box angezeigt werden soll. Zur Auswahl stehen:
</ParamField>

| Slot | UUID |
| - | - |
| Unter Artikelbild | `51a883b4` |
| Zwischen Titel und Preisinfos | `dcdba3fb` |
| Unter Warenkorb Button | `1a1db012` |
| Unter der Buy Box | `2c12ac28` |
| In Productinfo-Nav | `e27cb814` |
| Unter Produktdetails | `d530b70c` |
| Nach dem CrossSelling | `85f08207` |

<ParamField path="Dynamische Breite (erlaubte Werte 1-4)" type="number">
  Gib pro Viewport an, wie klein die Box minimal schrumpfen darf. Jede Box beansprucht mindestens so viel Platz, wie ihr Content benötigt. Erlaubt sind Werte von 1 bis 4, wobei 1 gar nicht schrumpft und 4 auf maximal 1/4, 3 auf 1/3 und 2 auf 1/2. Teilen sich 2 Boxen eine 1/2-Eigenschaft und lässt es der Platz zu, können sie nebeneinander stehen.
</ParamField>

<ParamField path="Typ" type="select">
  Legt fest, welcher Inhalt in der Box ausgegeben wird. Vom Typ hängt auch ab, welche Sprachvariable standardmäßig für Überschrift und Untertitel greift. Klappe die Typen unten auf, um Details zu jedem einzelnen zu sehen.
</ParamField>

<div style={{display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '0 24px'}}>
  <AccordionGroup>
    <Accordion title="Artikelbeschreibung">
      Gibt die Artikelbeschreibung aus. Wenn du in den JTL-Shop-Einstellungen die Ausgabe von Attributen und Merkmalen aktiv hast, werden diese hier auch unter der Artikelbeschreibung ausgegeben. Überschrift standardmäßig `description` (Sektion `productDetails`), Untertitel standardmäßig `niu_sidebar_description_desc` (Sektion `dzm_niuplus_companion`).
    </Accordion>

    <Accordion title="Herstellerinformationen (aus Beschreibung)">
      In dieser Box werden die Herstellerinformationen aus der Herstellerbeschreibung geladen. Das ist die einfachere Lösung, wenn du nicht mit dem GPSR-Plugin und den Attributen arbeiten möchtest. Bearbeite dazu in der Wawi deine Herstellerbeschreibungen so, dass sie aus 2 unabhängigen Teilen bestehen, getrennt durch `###`. Achte darauf, dass die `###` selbst nicht in einem HTML-Tag umfasst sind. Der Teil vor den `###` wird auf der Herstellerseite normal als Beschreibung ausgegeben. Der Teil nach `###` wird in der Custom Box als Herstellerinformation ausgegeben.
    </Accordion>

    <Accordion title="Herstellerinformationen (aus JTL Attributen)">
      Diese Box gibt die Herstellerinformationen mit Hilfe der JTL-GPSR-Attribute aus. Wenn du also das GPSR-Plugin von JTL nutzt, kannst du diese Box verwenden, um die Attribute auszugeben.
    </Accordion>

    <Accordion title="CLP Gefahrenhinweise">
      Diese Box gibt die CLP-Warnhinweise aus, die du mit den Attributen `dzm_clp` und `dzm_clp_ingredients` pflegst. Lege die Attribute als Funktionsattribute an und trage die H-, P- und EUH-Sätze nach Dokumentation in `dzm_clp` ein, getrennt durch ein Semikolon. Ersetze bei Kombinationen das Plus durch einen Unterstrich. Trage Inhaltsstoffe in `dzm_clp_ingredients` ein, mehrere Werte ebenfalls durch Semikolon getrennt. Du benötigst dafür das Plugin DZM CLP, deine NIU-Plus-Lizenz umfasst dafür eine kostenfreie Lizenz.
    </Accordion>

    <Accordion title="Bewertungen">
      Diese Box lädt die Produktbewertungen. Sie wird immer geladen, wenn du Produktbewertungen verwendest, aktiviere dazu die entsprechende Einstellung im Shop. Existieren noch keine Bewertungen, wird der User aufgefordert, eine Bewertung abzugeben. Diese Box darf nur in der Sidebar oder unter den Produktdetails geladen werden, wenn du den Inhalt in der Box statt in der Sidebar anzeigen lassen möchtest.
    </Accordion>

    <Accordion title="Frage zum Produkt">
      Diese Box stellt das Formular für Fragen zum Produkt zur Verfügung. Aktiviere dazu die entsprechende Einstellung im Shop. Diese Box darf nur in der Sidebar oder unter den Produktdetails geladen werden, wenn du den Inhalt in der Box statt in der Sidebar anzeigen lassen möchtest.
    </Accordion>

    <Accordion title="Verfügbarkeitsbenachrichtigung">
      Diese Box lädt das Formular zur Verfügbarkeitsbenachrichtigung, wenn du die Option im Shop aktiviert hast. Diese Box darf nur in der Sidebar oder unter den Produktdetails geladen werden, wenn du den Inhalt in der Box statt in der Sidebar anzeigen lassen möchtest.
    </Accordion>

    <Accordion title="Individuelle Tabs">
      Diese Box bezieht sich auf die individuellen Tabs, die du dem Artikel über die Wawi-Attribute `tabx name` und `tabx inhalt` vergeben hast. Die Auswahl dieser Custom Box rendert für jeden individuellen Tab, also tab1, tab2, tabx usw., eine eigene Box. Der Titel wird durch den Wert in `tabx name` bestimmt, der Inhalt stammt aus dem Wert in `tabx inhalt`. Du kannst einen Untertitel durch das zusätzliche Attribut `tabx sub` hinzufügen, analog zu den anderen Tabs. Die Felder Überschrift und Untertitel werden hier nicht berücksichtigt und dienen nur deiner Orientierung. Die Boxen werden nur dann geladen, wenn wenigstens ein Attributpaar im Artikel gesetzt ist.
    </Accordion>

    <Accordion title="Individueller Tab Einzeln">
      Diese Box funktioniert wie Individuelle Tabs, aber es wird nur eine Box geladen, deren Index zum Tab passt. Das Attribut muss gesetzt sein, andernfalls wird diese Box nicht geladen. Den Untertitel kannst du auch über das Attribut `tabx sub` übergeben (siehe Hinweis bei Untertitel oben).

      <ParamField path="Tab Index / Custom Crossselling Index" type="number">
        Welche Tab-Nummer oder Crossselling-Gruppe soll in der Custom Box zur Ausgabe ausgewählt werden? Beispiel: Wenn du in der Wawi die Attribute `tab1 name` und `tab1 inhalt` verwendet hast und diesen Tab hier ausgeben möchtest, wähle die 1 als Tab Index. Möchtest du eine Crossselling-Gruppe wählen und hast in der Wawi eine Gruppe mit dem Namen `niu_cross_1` angelegt, dann trage hier die 1 ein.
      </ParamField>
    </Accordion>

    <Accordion title="Downloads">
      Gibt die Downloads aus, die du über die Wawi dem Artikel hinzugefügt hast. Diese Box wird nur dann ausgegeben, wenn Downloadfiles vorhanden sind. Überschrift standardmäßig `downloadSection` (Sektion `productDownloads`), Untertitel standardmäßig `niu_sidebar_downloads_desc` (Sektion `dzm_niuplus_companion`).
    </Accordion>

    <Accordion title="Medien Tabs">
      Gibt die Mediafiles zum Download aus, die du über die Wawi dem Artikel hinzugefügt hast. Diese Box wird nur dann ausgegeben, wenn Mediafiles vorhanden sind. Überschrift und Untertitel sind hier frei wählbar, ohne vorausgefüllte Sprachvariable.
    </Accordion>

    <Accordion title="Alle Medien Tabs">
      Gibt alle Mediafiles in einer Sidebar zum Download aus, die du über die Wawi dem Artikel hinzugefügt hast. Diese Box wird nur dann ausgegeben, wenn Mediafiles vorhanden sind. Überschrift und Untertitel sind hier frei wählbar, ohne vorausgefüllte Sprachvariable (Sektion `custom`).
    </Accordion>
  </AccordionGroup>

  <AccordionGroup>
    <Accordion title="Medien nach Typ">
      Gibt alle Mediafiles eines Dateityps in einer Sidebar zum Download aus, die du über die Wawi dem Artikel hinzugefügt hast. Diese Box wird nur dann ausgegeben, wenn Mediafiles vorhanden sind.

      <ParamField path="Mediatype" type="string">
        Hinterlege hier alle Dateitypen, die in einer Sidebar zusammen aufgelistet werden sollen, mit der genauen Bezeichnung. Trenne mehrere Typen mit einem Komma, ohne Leerzeichen. Beispiel: `.pdf,.zip,.jpg,.jpeg`
      </ParamField>

      Überschrift und Untertitel sind hier frei wählbar, ohne vorausgefüllte Sprachvariable (Sektion `custom`).
    </Accordion>

    <Accordion title="Preisverlauf">
      Diese Box lädt die Preisverlaufsanzeige, wenn du die entsprechende Option im Shop aktiviert hast. Überschrift standardmäßig `priceFlow` (Sektion `productDetails`), Untertitel standardmäßig `niu_sidebar_priceflow_desc` (Sektion `dzm_niuplus_companion`).
    </Accordion>

    <Accordion title="Variationsübersicht">
      Gibt die Variationsübersicht aus, wenn der Artikel über Variationen verfügt. Der Kunde kann hierüber direkt Variationen auswählen. Überschrift standardmäßig `niu_more_variations`, Untertitel standardmäßig `niu_more_variations_desc` (beide Sektion `dzm_niuplus_companion`).
    </Accordion>

    <Accordion title="Kurzbeschreibung">
      Gibt die Kurzbeschreibung aus, wenn eine Kurzbeschreibung gesetzt ist. Du kannst die Standard-Kurzbeschreibung über die JTL-Artikeldetail-Einstellungen deaktivieren, um die Kurzbeschreibung so neu zu positionieren. Überschrift standardmäßig `shortDescription` (Sektion `comparelist`), Untertitel standardmäßig `niu_sidebar_short_description_desc` (Sektion `dzm_niuplus_companion`).
    </Accordion>

    <Accordion title="Attributtabelle">
      Zeigt die Attribute des Artikels als Tabelle. Überschrift und Untertitel sind hier frei wählbar, ohne vorausgefüllte Sprachvariable (Sektion `custom`).
    </Accordion>

    <Accordion title="Merkmaletabelle">
      Zeigt die Merkmale des Artikels als Tabelle. Überschrift und Untertitel sind hier frei wählbar, ohne vorausgefüllte Sprachvariable (Sektion `custom`).
    </Accordion>

    <Accordion title="Crossselling Kunden kauften auch">
      Zeigt die Crossselling-Empfehlung "Kunden kauften auch". Überschrift und Untertitel sind hier frei wählbar, ohne vorausgefüllte Sprachvariable.
    </Accordion>

    <Accordion title="Crossselling Ähnliche Artikel">
      Zeigt die Crossselling-Empfehlung "Ähnliche Artikel". Überschrift und Untertitel sind hier frei wählbar, ohne vorausgefüllte Sprachvariable.
    </Accordion>

    <Accordion title="Eigene Crossselling Gruppe">
      Um eine eigene Crossselling-Gruppe in der Sidebar darzustellen, musst du eine Crossselling-Gruppe in der JTL-Wawi anlegen mit einem Namen nach dem Muster `niu_cross_1`, `niu_cross_2`, `[niu_cross_n]`. Achte unbedingt darauf, dass der Name in allen Sprachen gesetzt ist. Diese speziellen Crossselling-Gruppen werden nicht als Slider unterhalb der Produkte angezeigt. Trage anschließend bei der Custom Box die Nummer ein, die der entsprechenden Crossselling-Gruppe entspricht, also 1 für `niu_cross_1` usw. Überschrift und Untertitel sind hier frei wählbar, ohne vorausgefüllte Sprachvariable (Sektion `custom`).

      <ParamField path="Tab Index / Custom Crossselling Index" type="number">
        Welche Tab-Nummer oder Crossselling-Gruppe soll in der Custom Box zur Ausgabe ausgewählt werden? Beispiel: Wenn du in der Wawi die Attribute `tab1 name` und `tab1 inhalt` verwendet hast und diesen Tab hier ausgeben möchtest, wähle die 1 als Tab Index. Möchtest du eine Crossselling-Gruppe wählen und hast in der Wawi eine Gruppe mit dem Namen `niu_cross_1` angelegt, dann trage hier die 1 ein.
      </ParamField>
    </Accordion>

    <Accordion title="Garantie-Label">
      Das Label mit der Jahreszahl erscheint unabhängig von dieser Box automatisch an Artikelkacheln, Artikeldetailseite, Warenkorb und Checkout, sofern die jeweilige Shopeinstellung aktiv ist, siehe [Garantie und Gewährleistung](/NIU-Plus/garantie-label). Überschrift standardmäßig `guarantee` (Sektion `productDetails`), Untertitel ist hier frei wählbar, ohne vorausgefüllte Sprachvariable.
    </Accordion>

    <Accordion title="Custom">
      Diese Box bietet Platz für freien Inhalt via OPC und eignet sich hervorragend als Box zur Verlinkung oder für die Injizierung dritter Inhalte über eine Selektor ID. Wenn du den Inhalt in der Sidebar ausgibst, wird der Container mit der Selektor ID in der Sidebar geladen. Nutzt du den Inhalt in der Box statt in der Sidebar, wird der Container mit der Selektor ID direkt in der Box geladen. Überschrift und Untertitel sind hier frei wählbar, ohne vorausgefüllte Sprachvariable (Sektion `custom`).
    </Accordion>

    <Accordion title="Custom Template">
      Die Custom Box für Templateentwickler: Diese Box bietet dir die Möglichkeit, ein eigenes Templatefile innerhalb deiner Box oder der Sidebar zu laden. Hinterlege dafür hier den Namen des Templatefiles und lege im Childtemplate-Ordner ein File im Verzeichnis `/niu-components/sidebar/mein_template_file.tpl` an. Verwende im Feld für den Templatenamen nur den Namen des Files, ohne Pfad und ohne Dateiendung.

      <ParamField path="Template Name" type="string">
        Hinterlege hier den Namen für dein Templatefile, ohne Pfad und ohne Dateiendung, z. B. `mein_template_file`, und lege im Childtemplateverzeichnis unter `/niu-components/sidebar/mein_template_file.tpl` ein neues Templatefile an, welches für die Box gerendert werden soll.
      </ParamField>
    </Accordion>
  </AccordionGroup>
</div>

<ParamField path="Überschrift *" type="string">
  Pflichtfeld: Ohne Überschrift lässt sich die Box nicht speichern. Sie benennt die Box auch hier in den Einstellungen. Gibst du zusätzlich eine Sprachvariable mit Sektion an, wird im Frontend diese ausgegeben und die Überschrift dient nur noch dir zur Orientierung, sie ersetzt das Pflichtfeld also nicht. Boxen, die ihren Titel aus eigenen Werten beziehen, wie individuelle Tabs, nutzen primär ihren eigenen Wert. Soll im Frontend gar keine Überschrift erscheinen, nutze den Schalter "Titel und Untertitel im Frontend ausblenden".
</ParamField>

<ParamField path="Untertitel" type="string">
  Wähle hier einen Untertitel für deine Box. Hier gilt die gleiche Regel wie für die Überschrift. Den Untertitel eines individuellen Tabs kannst du übrigens über das Attribut `tabx sub` übergeben, wobei das x jeweils mit der Zahl des Tabs zu ersetzen ist, analog zu `tab1 name` und `tab1 inhalt`.
</ParamField>

<ParamField path="Titel und Untertitel im Frontend ausblenden" type="boolean">
  Falls du den Content in der Box selbst ausgibst, kannst du hier die Überschrift der Box ausblenden, wenn der Inhalt deiner Box bereits eine Überschrift hat.
</ParamField>

<ParamField path="Icon" type="icon">
  Wähle hier ein Icon aus, welches in der Box angezeigt werden soll.
</ParamField>

<ParamField path="Style" type="select">
  Wähle hier den optischen Stil deiner Box aus: Sidebar Trigger, Karte, Button oder Nav Item. Probiere Stile aus und nutze den Stil, der am besten zu deinem Shop passt. Die Option "Container" ist veraltet und sollte nicht mehr neu verwendet werden.
</ParamField>

<ParamField path="Karten Style" type="select">
  Nur bei Style "Karte" verfügbar. Wähle hier den optischen Stil deiner Karte aus, etwa Schattierte Karte.
</ParamField>

<ParamField path="Karten Border Radius" type="string">
  Nur bei Style "Karte" verfügbar. Leer gelassen folgt die Eckenrundung dem Theme (Theme 2.0 → Radius → "Flächen & Karten"). Ein Wert hier wird als Inline-Style gerendert und gewinnt gegen das Theme.
</ParamField>

<ParamField path="Eigene CSS Klassen" type="string">
  Hier kannst du eigene CSS-Klassen an deine Box übergeben, um diese nach deinen Wünschen gezielt im Stylesheet zu überarbeiten.
</ParamField>

<ParamField path="Selektor ID" type="string">
  Gib hier eine ID für einen Selektor an. Selektoren kannst du nutzen, um Inhalte selbst oder aus anderen Plugins in deine Box zu injizieren. Nutzt deine Box die Sidebar, wird der Container mit dieser ID dort eingefügt. Nutzt du den Content innerhalb deiner Box, wird der Container direkt in der Box eingefügt. Die Selektor ID wird auch als Wert im Funktionsattribut `niu_exclude_box` verwendet, um einzelne Boxen für ausgewählte Produkte zu verbergen (siehe Hinweis unten).
</ParamField>

<ParamField path="Sichtbarkeit" type="select">
  Legt fest, bei welchen Artikeln die Box angezeigt wird: Bei Vater- und Kindartikeln, Variationsauswahl bei Vater öffnen, Nur bei Vaterartikeln oder Nur bei Kindartikeln.
</ParamField>

<ParamField path="Sichtbarkeit nach Kaufbarkeit" type="select">
  Legt fest, ob die Box abhängig von der Kaufbarkeit des Artikels angezeigt wird: Immer anzeigen, Nur bei kaufbaren Artikeln oder Nur bei nicht-kaufbaren Artikeln.
</ParamField>

<ParamField path="Nur Sichtbar mit Attribut" type="boolean">
  Zeigt die Box nur an, wenn beim Artikel ein bestimmtes Funktionsattribut gesetzt ist. Ist die Option aktiv, erscheint zusätzlich das Feld "Name des Sichtbarkeitsattributs".

  <Info>
    Lege dazu in der Wawi ein Funktionsattribut vom Typ Checkbox an. Wähle am besten einen Namen ohne Leer- und Sonderzeichen und trage ihn im Feld "Name des Sichtbarkeitsattributs" ein. Die Box wird nur dann geladen, wenn das Funktionsattribut gesetzt und die Checkbox aktiv ist.
  </Info>
</ParamField>

<ParamField path="Nur Sichtbar wenn Preis auf Anfrage" type="boolean">
  Zeigt die Box nur bei Artikeln mit der Einstellung "Preis auf Anfrage" an.
</ParamField>

<ParamField path="Name des Sichtbarkeitsattributs" type="string">
  Name des Funktionsattributs, das für "Nur Sichtbar mit Attribut" ausgewertet wird. Nur sichtbar, wenn diese Option aktiviert ist.
</ParamField>

<ParamField path="Inhalt in Box statt in Sidebar ausgeben" type="boolean">
  Gibt den Inhalt direkt in der Box statt über die Sidebar aus. Steht bei Boxen vom Style "Button" nicht zur Verfügung. Ist die Option aktiv, erscheint zusätzlich das Feld "Gesamte Box verlinken".
</ParamField>

<ParamField path="Gesamte Box verlinken" type="boolean">
  Nur bei aktivierter Option "Inhalt in Box statt in Sidebar ausgeben" verfügbar. Macht die gesamte Box zu einem Link, statt nur einzelne Elemente innerhalb der Box zu verlinken.
</ParamField>

<ParamField path="Box Aktiv" type="boolean">
  Aktiviert oder deaktiviert die Box, ohne sie zu löschen. Eine inaktive Box wird im Frontend nicht dargestellt. So musst du Boxen nicht löschen, wenn du sie aktuell nicht benötigst, und kannst sie bei Bedarf schnell wieder aktivieren.
</ParamField>

<ParamField path="Box verstecken" type="boolean">
  Blendet die Box aus, ohne die Konfiguration zu verlieren.

  <Info>
    Diese Option ist sinnvoll, wenn du eine Sidebar anlegen willst, die über ein eigenes Element getriggert werden soll und nicht über die Standard Custom Boxes. Mit dieser Option wird die Sidebar gerendert, ohne dass ein Trigger erscheint. Du kannst dann mit den passenden Data-Attributes die Sidebar ansteuern. Dein Element sollte folgende Attribute besitzen:

    ```plain theme={null}
    data-niu-sidebar-trigger='productdetails'
    data-niu-sidebar-trigger-content='[identifier]'
    ```

    Als `[identifier]` musst du den Selektor der Sidebar verwenden. Wenn du dir unsicher bist, was der richtige Selektor ist, deaktiviere diese Option, inspiziere die Custom Box im Frontend und trage den Wert aus dem Data-Attribut ein.
  </Info>
</ParamField>

<Note>
  Custom Boxes stellen Inhalte deiner Produkte dort zur Verfügung, wo du sie haben willst, wahlweise in der Sidebar oder direkt innerhalb der jeweiligen Box. Um einzelne Boxen von der Darstellung bei einem bestimmten Produkt auszuschließen, legst du in der Wawi ein Funktionsattribut mit dem Namen `niu_exclude_box` an. Trage im Feld Selektor ID eine eigene ID ein und hinterlege dieselbe ID kommasepariert als Wert im Attribut, um die jeweilige Box bei diesem Produkt auszuschließen.
</Note>

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


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