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

# Allgemeine Beschreibung

Der "Product Showcase" ist ein elegantes Portlet, um Produktgruppen in einem tab-basierten Layout zu präsentieren. Anstatt mehrere Slider untereinander zu stapeln, können Kunden hier bequem zwischen verschiedenen Kategorien oder Themen (Tabs) umschalten, ohne die Seite scrollen zu müssen. Dies spart Platz und sorgt für eine strukturierte, übersichtliche Darstellung deiner Highlights.

<Frame>
  <img src="https://mintcdn.com/dzm/BIYy3lWK1IboA0Ia/images/image-102.png?fit=max&auto=format&n=BIYy3lWK1IboA0Ia&q=85&s=b6762991c77e1f3f693e255fbb84c45a" alt="Image" width="4520" height="1544" data-path="images/image-102.png" />
</Frame>

# Einsatzmöglichkeiten (Inspiration)

* **Neuheiten vs. Sale:** Erstelle Tabs für "Neue Kollektion" und "Reduziert", damit Kunden sofort die für sie interessanten Angebote finden.
* **Kategorien-Mix:** Zeige Tabs wie "Wohnzimmer", "Schlafzimmer", "Küche" an, um Bestseller aus verschiedenen Bereichen kompakt zu teasern.
* **Zielgruppen:** Nutze Tabs für "Damen", "Herren", "Kinder".
* **Themenwelten:** "Geschenkideen", "Outdoor", "Home Office" – gruppiere Produkte nach Anlass.

# Featureübersicht:

* **Tab-Navigation:** Intuitive Umschaltung zwischen verschiedenen Produktlisten.
* **Vollständige Design-Kontrolle:** Passe Überschriften, HTML-Tags und Größen individuell an (SEO-freundlich).
* **Flexible Layouts:** Wähle zwischen Boxed- oder Fluid-Containern und verschiedenen Hintergrundstilen.
* **Bewertungen:** Integrierte Option, um Bewertungssterne direkt im Showcase anzuzeigen.

***

# Settings:

## Allgemein

<Frame>
  <img src="https://mintcdn.com/dzm/BIYy3lWK1IboA0Ia/images/image-106.png?fit=max&auto=format&n=BIYy3lWK1IboA0Ia&q=85&s=b171db5eb45b87dc51a134cda13bd8db" alt="Image" width="2381" height="776" data-path="images/image-106.png" />
</Frame>

***

**Position der Überschrift und Tabs:** Lege fest, wie die Navigation und der Titel ausgerichtet sein sollen (z. B. "Zentriert").

***

## Überschrift

Hier definierst du den Titel des gesamten Blocks.

<Frame>
  <img src="https://mintcdn.com/dzm/BIYy3lWK1IboA0Ia/images/image-105.png?fit=max&auto=format&n=BIYy3lWK1IboA0Ia&q=85&s=8e8f3cc1dcbc54f9c0d4e0ecae6c257d" alt="Image" width="2365" height="1216" data-path="images/image-105.png" />
</Frame>

**Überschrift des Showcases:** Der Text, der über den Tabs steht (z. B. "Unsere Highlights").

**HTML-Tag der Überschrift:** Wähle aus semantischen Gründen das passende Tag (h1-h6 oder Standard Text/Div). Dies ist wichtig für die SEO-Struktur deiner Seite.

**Größe der Überschrift:** Steuere die optische Größe unabhängig vom HTML-Tag (z. B. "wie ein h1-tag" für große Darstellung, auch wenn es technisch eine h2 ist).

**Textfarbe der Überschrift:** Passe die Farbe an dein Design an.

**Schrift-Dicke:** Wähle den Schriftschnitt (z. B. 800 für Fett/Bold).

***

## Tabs

In diesem Bereich verwaltest du die einzelnen Reiter.

<Frame>
  <img src="https://mintcdn.com/dzm/BIYy3lWK1IboA0Ia/images/image-103.png?fit=max&auto=format&n=BIYy3lWK1IboA0Ia&q=85&s=99a86b758b2144ced6d6d231a5f2e97d" alt="Image" width="2389" height="1112" data-path="images/image-103.png" />
</Frame>

***

**Tabs verwalten:**

* **Hinzufügen (+):** Erstelle einen neuen Tab.
* **Verschieben:** Nutze das Icon rechts, um die Reihenfolge der Tabs per Drag & Drop zu ändern.
* **Löschen (x):** Entferne nicht mehr benötigte Tabs.
* **Benennen:** Gib jedem Tab einen eindeutigen Namen (z. B. "Tab-1", "Tab-2"), der dem Kunden als Klickfläche dient. *Hinweis: Die Produkte für die Tabs werden vermutlich in den Einstellungen des jeweiligen Tabs zugewiesen.*

***

## Darstellung

Hier passt du das Layout und den Hintergrund des Inhaltsbereichs an.

<Frame>
  <img src="https://mintcdn.com/dzm/BIYy3lWK1IboA0Ia/images/image-104.png?fit=max&auto=format&n=BIYy3lWK1IboA0Ia&q=85&s=3c1185ea415469e0e5f895057adacce4" alt="Image" width="2373" height="1168" data-path="images/image-104.png" />
</Frame>

***

**Containergröße in den Tabs:** Bestimme die Breite des Inhalts innerhalb der Tabs.

* *Fluid:* Der Inhalt nutzt die volle Bildschirmbreite.
* *Boxed:* Der Inhalt wird auf eine maximale Breite begrenzt (zentriert).
* *Kein Container:* Der Inhalt hat keine Begrenzung.

**Hintergrundverlauf:** Wähle einen stilvollen Hintergrundeffekt für den aktiven Tab-Bereich.

* *Auswahlmöglichkeiten:* Gold, Bronze, Grau, Transparent.

**Sterne anzeigen:** Aktiviere diese Checkbox, um die Bewertungssterne der Produkte (JTL Bewertungen) direkt in der Vorschau anzuzeigen.

***

***