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

# Product Item Box

# Allgemeine Beschreibung

Das "Product Item Box" Portlet zeigt einen oder mehrere frei ausgewählte Artikel in der bekannten Produktkachel-Darstellung an, z. B. um bestimmte Produkte gezielt hervorzuheben.

# Einsatzmöglichkeiten (Inspiration)

* **Einzelne Produkte hervorheben:** Platziere gezielt einzelne Artikel außerhalb von Kategorie- oder Suchergebnislisten, z. B. in Content-Seiten oder Landingpages.
* **Konsistente Darstellung:** Nutze dieselbe Produktkachel-Optik wie in deinen Artikellisten, auch außerhalb dieser Listen.

***

# Settings:

## Produktauswahl

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/5yI44_TalYoOc6bU/images/opc-plus-product-item-box-produktauswahl.jpg?fit=max&auto=format&n=5yI44_TalYoOc6bU&q=85&s=afb6b06bdcf1c652bcda36cbd07e7661" alt="Produktauswahl" width="1276" height="724" data-path="images/opc-plus-product-item-box-produktauswahl.jpg" />
  </Frame>
</div>

**Suche nach Artikelnamen oder -nummern:** Suche über das Textfeld nach Artikeln und wähle per Klick aus den gefundenen Einträgen die Artikel aus, die angezeigt werden sollen. Über **Alle auswählen** bzw. **Alle abwählen** kannst du die gesamte Trefferliste auf einmal (ab)wählen.

***

## Darstellung

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/5yI44_TalYoOc6bU/images/opc-plus-product-item-box-darstellung.jpg?fit=max&auto=format&n=5yI44_TalYoOc6bU&q=85&s=494aeb896973d78447af27cddd82cfe7" alt="Darstellung" width="1284" height="416" data-path="images/opc-plus-product-item-box-darstellung.jpg" />
  </Frame>
</div>

**Design:** Wähle das Design der Produktkachel:

* Clean
* Cards

***

## Strukturierte Daten

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/5yI44_TalYoOc6bU/images/opc-plus-product-item-box-strukturierte-daten.jpg?fit=max&auto=format&n=5yI44_TalYoOc6bU&q=85&s=1ad64d9ce026704cc6d7c23b1f371745" alt="Strukturierte Daten" width="1288" height="396" data-path="images/opc-plus-product-item-box-strukturierte-daten.jpg" />
  </Frame>
</div>

**Strukturierte Daten verwenden?** (nur relevant für NIU Plus und Slider mit Item Box Templates): Entfernt bei Bedarf das Microdata Markup, z. B. wenn die Item Box auf Produktseiten platziert werden soll.

<Note>
  Für weitere Einstellungen zum Layout, siehe den Tab **Layout** im Portlet selbst.
</Note>

***

# Beispiel

So erscheinen die Product Item Boxes im Frontend:

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/5yI44_TalYoOc6bU/images/opc-plus-product-item-box-beispiel.jpg?fit=max&auto=format&n=5yI44_TalYoOc6bU&q=85&s=60c91cf5160425d896ef36b79dc8e4a7" alt="Beispiel" width="902" height="778" data-path="images/opc-plus-product-item-box-beispiel.jpg" />
  </Frame>
</div>

***