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

> Präsentiere ausgewählte Produkte oder Produktkategorien in einem attraktiven Tab-basierten Showcase

## Allgemeine Beschreibung

Das "Product Showcase" Portlet im OPC Conversion Booster bietet eine effektive Möglichkeit, ausgewählte Produkte oder Produktkategorien gezielt zu präsentieren. Mit seiner tab-basierten Struktur, den anpassbaren Erscheinungsbildern und den speziellen Effekten kannst du sicherstellen, dass deine Produkte in einem attraktiven und interaktiven Showcase hervorgehoben werden.

## Einsatzmöglichkeiten

* **Produktempfehlungen:** Zeige Empfehlungen für bestimmte Produkte in verschiedenen Kategorien an, um Kunden zu inspirieren.
* **Feature-Highlights:** Präsentiere herausragende Funktionen oder Vorteile deiner Produkte durch individuell gestaltete Tabs.
* **Saisonale Angebote:** Stelle spezielle Angebote oder Kollektionen in einem ansprechenden Showcase während saisonaler Ereignisse oder Feiertage vor.

## Featureübersicht

<AccordionGroup>
  <Accordion title="Tab-basierte Struktur">
    Lege verschiedene Tabs im Showcase an, um Produkte oder Produktkategorien gezielt zu präsentieren.
  </Accordion>

  <Accordion title="Inhaltsbefüllung">
    Fülle jeden Tab mit verschiedenen Inhalten, wie Artikelslidern, um eine breite Produktpalette auf ansprechende Weise zu zeigen.
  </Accordion>

  <Accordion title="Anpassbare Überschrift">
    Definiere eine Überschrift für das Showcase, um den Fokus auf bestimmte Produkte oder Themenbereiche zu lenken.
  </Accordion>

  <Accordion title="Hintergrundverlauf">
    Wähle aus verschiedenen Hintergrundverläufen (Gold, Bronze, Grau oder Transparent), um das visuelle Erscheinungsbild des Showcases zu gestalten.
  </Accordion>

  <Accordion title="Aktivierbarer Effekt">
    Schalte einen Effekt ein, der Sterne anzeigen kann, um besondere Produkte oder Empfehlungen hervorzuheben.
  </Accordion>

  <Accordion title="Responsives Design">
    Das Product Showcase passt sich verschiedenen Bildschirmgrößen und Geräten an, um eine optimale Darstellung sicherzustellen.
  </Accordion>

  <Accordion title="Benutzerfreundliche Konfiguration">
    Konfiguriere das Showcase mühelos und intuitiv, um eine gezielte Präsentation deiner Produkte zu ermöglichen, ohne komplexe Einstellungen vornehmen zu müssen.
  </Accordion>
</AccordionGroup>

## Settings

### Allgemein

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/ZzabEFeg0Pt8hka0/images/product-showcase-allgemein.png?fit=max&auto=format&n=ZzabEFeg0Pt8hka0&q=85&s=7749440512cf786549faaf11ac7b4000" alt="Allgemein" width="1340" height="436" data-path="images/product-showcase-allgemein.png" />
  </Frame>
</div>

<ParamField path="Position der Überschrift und Tabs" type="select">
  Wähle hier, wie die Überschrift und Tabs horizontal ausgerichtet werden sollen.

  **Optionen:**

  * links
  * zentriert
  * rechts
</ParamField>

<br />

### Überschrift

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/ZzabEFeg0Pt8hka0/images/product-showcase-ueberschrift.png?fit=max&auto=format&n=ZzabEFeg0Pt8hka0&q=85&s=712753d0bf070dee59e53e5f0f43a04c" alt="Überschrift" width="1340" height="686" data-path="images/product-showcase-ueberschrift.png" />
  </Frame>
</div>

<ParamField path="Überschrift des Showcases" type="string">
  Vergebe hier eine Überschrift, die oberhalb der Tabs angezeigt wird.
</ParamField>

<ParamField path="HTML-Tag der Überschrift" type="select">
  Bestimmt welchen HTML-Tag die Überschrift bekommen soll. Hilfreich für SEO-freundliche Textstrukturen.
</ParamField>

<ParamField path="Größe der Überschrift" type="select">
  Bestimmt, wie groß der Text angezeigt werden soll und orientiert sich an den Vorgaben des aktuellen Themes.
</ParamField>

<ParamField path="Textfarbe der Überschrift" type="color">
  Bestimmt die Farbe der Überschrift.
</ParamField>

<ParamField path="Schrift-Dicke" type="select">
  Bestimmt die font-weight (CSS) der Überschrift. Je höher die font-weight, desto dicker die Schrift.
</ParamField>

<br />

### Tabs

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/ZzabEFeg0Pt8hka0/images/product-showcase-tabs.png?fit=max&auto=format&n=ZzabEFeg0Pt8hka0&q=85&s=e843127067d2575c029a1d0d2ea65c4c" alt="Tabs" width="1332" height="620" data-path="images/product-showcase-tabs.png" />
  </Frame>
</div>

| Aktion                  | Beschreibung                                                |
| ----------------------- | ----------------------------------------------------------- |
| **Entfernen von Tabs**  | Durch Klicken auf das 'x' löschst du den entsprechenden Tab |
| **Hinzufügen von Tabs** | Durch Klicken auf das '+' fügst du neue Tabs hinzu          |
| **Benennen von Tabs**   | Hier kannst du den einzelnen Tabs Namen/Überschriften geben |

<br />

### Darstellung

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/ZzabEFeg0Pt8hka0/images/product-showcase-darstellung.png?fit=max&auto=format&n=ZzabEFeg0Pt8hka0&q=85&s=6d05e825685d52602c919f8a05a53f61" alt="Darstellung" width="1334" height="664" data-path="images/product-showcase-darstellung.png" />
  </Frame>
</div>

<ParamField path="Containergröße in den Tabs" type="select">
  Bestimmt wie breit der Container in den einzelnen Tabs sein soll.

  **Optionen:**

  * Fluid (minimaler Abstand)
  * Boxed (regulärer Abstand)
  * Kein Container (ohne Abstand)

  Die Abstände orientieren sich an den gesetzten Werten in deinem Theme.
</ParamField>

<ParamField path="Hintergrundverlauf" type="select">
  Wähle hier einen Hintergrundverlauf für das Productshowcase aus.

  **Optionen:**

  * Gold
  * Bronze
  * Grau
  * Transparent
</ParamField>

<ParamField path="Sterne anzeigen" type="boolean">
  Wenn aktiviert, wird das Showcase mit einem Sternregen-Effekt bestückt.
</ParamField>

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