# Varianten Darstellung Professional

## Installation <a href="#installation" id="installation"></a>

Sie können das Plugin über den Shopware Community Store erwerben. Das Plugin wird wie ein ganz gewöhnliches Plugin installiert.&#x20;

{% embed url="<https://store.shopware.com/de/cbax195477874706m/varianten-darstellung-professional.html>" %}
Plugin über den Shopware Community Store erwerben
{% endembed %}

Nach der Installation des Plugins öffnet sich die Konfigurationsmaske des Plugins.

## Die Einstellungen des Plugins <a href="#plugin_einstellungen" id="plugin_einstellungen"></a>

Nach der erfolgreichen Installation des Plugins können Sie in der Konfigurationsmaske die Einstellungen vornehmen und weitere Parameter ergänzen.

<figure><img src="/files/ByeMYXgDHSj8WCvPd5Xt" alt="" width="375"><figcaption></figcaption></figure>

| Feldname | Bedeutung                                                       |
| -------- | --------------------------------------------------------------- |
| Aktiv    | Das Plugin für den jeweiligen Shop aktivieren oder deaktivieren |

| Layout                  | Wie sollen die Optionen beim Bild-Konfigurator dargestellt werden? |
| ----------------------- | ------------------------------------------------------------------ |
| Feste Breite in Prozent | Breite der Option im Bild-Konfigurator (0 = Standardbreite)        |

| Maximal x Optionen anzeigen | Sollten mehr Optonen als angegeben vorhanden sein, wird ein Button zum Einblenden angezeigt |
| --------------------------- | ------------------------------------------------------------------------------------------- |
| Thumbnail Rahmenfarbe       | Rahmenfarbe der einzelnen Optionen im Format: #ffffff                                       |
| Thumbnail Rahmenabstand     | Rahmenabstand der einzelnen Optionen in Pixeln                                              |
| Thumbnailbreite             | Breite der einzelnen Option                                                                 |
| Thumbnailhöhe               | Höhe der einzelnen Option                                                                   |
| Vorschaubreite              | Breite der Vorschaubox                                                                      |
| Vorschauhöhe                | Höhe der Vorschaubox                                                                        |

| Variantengruppe    | Es können nur Varianten mit der Konfiguration: Bild, Farbe, Farbe + Vorschau, Grafik oder Grafik + Vorschau dargestellt werden |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------ |
| Bild Rahmenfarbe   | Rahmenfarbe der einzelnen Optionen im Format: #ffffff                                                                          |
| Bild Rahmenabstand | Rahmenabstand der einzelnen Optionen in Pixeln                                                                                 |
| Bildhöhe           | Breite der einzelnen Option                                                                                                    |
| Bildbreite         | Höhe der einzelnen Option                                                                                                      |

## Varianten Erweiterung <a href="#varianten_erweiterung" id="varianten_erweiterung"></a>

Gehen Sie nun auf "Artikel > Varianten Erweiterung". Hier können Sie, für jede einzelne Variante (die Sie bereits angelegt haben) wählen, wie sie dargestellt werden soll. Hierfür haben Sie 7 Auswahlmöglichkeiten. Um die Auswahlmöglichkeit zu erhalten, müssen Sie in der Spalte "Variante" eine Variante anklicken. Anschließend werden Ihnen, in der nebenliegenden Spalte, alle zugewiesenen Optionen angezeigt. Des Weiteren finden Sie neben der Spalte "Optionen" die Auswahlmöglichkeiten

<div><figure><img src="/files/YqlNThDf7bMtxtvoemDz" alt=""><figcaption></figcaption></figure> <figure><img src="/files/Kv6BZUo92ppTK9SA8XcS" alt=""><figcaption></figcaption></figure></div>

### Shopware Voreinstellung <a href="#shopware_voreinstellung" id="shopware_voreinstellung"></a>

Nutzen Sie die Einstellung „Shopware Voreinstellung“ um die Darstellung zu wählen, die Sie bereits bei der Erstellung der Variantengruppe zugewiesen haben. Hier können Sie keine weiteren Einstellungen vornehmen.

### Auswahl <a href="#auswahl" id="auswahl"></a>

Bei der Konfiguration "Auswahl" werden alle zugewiesenen Optionen in einer Auswahlbox dargestellt. Hier können Sie keine weiteren Einstellungen vornehmen.

<figure><img src="/files/wrI02cDz0G54TFcgmyJt" alt="" width="375"><figcaption></figcaption></figure>

### Bild <a href="#bild" id="bild"></a>

Mit der Einstellung "Bild" erzeugen Sie Schaltflächen die Sie im Plugin global konfigurieren können. Hier haben Sie die Möglichkeit eine feste Breite in Prozent vorgeben oder Sie nutzen die Einstellung: Automatisch an Text anpassen.

<figure><img src="/files/NDIpNg3XnDFOnhcXcVEo" alt="" width="375"><figcaption></figcaption></figure>

### Farbe <a href="#farbe" id="farbe"></a>

Die Auswahl "Farbe" erzeugt Farbfelder.

<figure><img src="/files/Cp2ShciGXsSX9YTndyYs" alt="" width="375"><figcaption></figcaption></figure>

Die Farbe können Sie selber per Farbauswahl oder per HTML Farbcode wählen. Zudem haben Sie die Möglichkeit von der Plugin Einstellung abzuweichen und Rahmfarbe, Rahmenabstand und Thumbnailbreite bzw. –höhe individuell festzulegen.

<div><figure><img src="/files/iPDVNtocWVHodo2lGaDk" alt=""><figcaption></figcaption></figure> <figure><img src="/files/iS2OFeS0GRWNb6EThMWN" alt=""><figcaption></figcaption></figure></div>

### Farbe + Vorschau <a href="#farbe_vorschau" id="farbe_vorschau"></a>

Die Auswahl "Farbe" erzeugt Farbfelder und ein Vorschaubild. Das Vorschaubild erscheint, wenn sich die Mouse über ein Farbfeld befindet. Das Vorschaubild wird immer auf der linken Seite, auf der Höhe des aktuellen Farbfeldes angezeigt.

<figure><img src="/files/ud2q9mfQbN3z4Xj4Jt1e" alt="" width="375"><figcaption></figcaption></figure>

Genau wie bei der Auswahl „Farbe“ können Sie per Farbauswahl oder per HTML Farbcode die Farbe wählen und die Rahmfarbe, Rahmenabstand sowie Thumbnailbreite bzw. –höhe individuell festzulegen. Zusätzlich haben Sie die Möglichkeit einen Titel und eine Beschreibung über bzw. unter dem Vorschaubild anzeigen zu lassen und die Breite und Höhe der Vorschau festzulegen.

<div><figure><img src="/files/BHkG70TePR7ArtzWphIH" alt=""><figcaption></figcaption></figure> <figure><img src="/files/Np5hrjZ3Ir2KDCSCy9IB" alt=""><figcaption></figcaption></figure></div>

### Grafik <a href="#grafik" id="grafik"></a>

Die Auswahl "Grafik" zeigt eine von Ihnen hinterlegte Grafik an.

<figure><img src="/files/8gziMRaa0Ukhco0GWbxq" alt="" width="375"><figcaption></figcaption></figure>

Die Grafik laden Sie im Medienmanager hoch und wiesen Sie der entsprechenden Option zu. Zudem haben Sie die Möglichkeit von der Plugin Einstellung abzuweichen und Rahmfarbe, Rahmenabstand und Thumbnailbreite bzw. –höhe individuell festzulegen.

<div><figure><img src="/files/qj4ptr4j2zbEmzYUqCOi" alt=""><figcaption></figcaption></figure> <figure><img src="/files/tQnFrTCQnqMh01jD6JF0" alt=""><figcaption></figcaption></figure></div>

### Grafik + Vorschau <a href="#grafik_vorschau" id="grafik_vorschau"></a>

Die Auswahl "Grafik" zeigt ein von Ihnen hinterlegte Grafik und ein Vorschaubild an. Das Vorschaubild erscheint, wenn sich die Mouse über eine Grafik befindet. Das Vorschaubild wird immer auf der linken Seite, auf der Höhe der aktuellen Grafik angezeigt.

<figure><img src="/files/2v61itcaZtCJBuwkM4K0" alt="" width="375"><figcaption></figcaption></figure>

Genau wie bei der Auswahl „Grafik“ können Sie eine hinterlegte Grafik anzeigen lassen und die Rahmfarbe, Rahmenabstand sowie Thumbnailbreite bzw. –höhe individuell festzulegen. Zusätzlich haben Sie die Möglichkeit einen Titel und eine Beschreibung über bzw. unter dem Vorschaubild anzeigen zu lassen und die Breite und Höhe der Vorschau festzulegen

<div><figure><img src="/files/zBdmeSGxlxprCRKudNSX" alt=""><figcaption></figcaption></figure> <figure><img src="/files/o5NB15HCI904hZ9lYakF" alt=""><figcaption></figcaption></figure></div>

## Art der Varianten-Darstellung <a href="#varianten_darstellung" id="varianten_darstellung"></a>

Mit Hilfe der Standard Einstellmöglichkeit bei der Variantengenerierung können Sie die Auswahl der Varianten beeinflussen. Im Dropdown Menü unter "Art der Konfigurators" haben Sie folgende Auswahlmöglichkeiten:

* Standard: eine Vorauswahl ist gesetzt
* Auswahl: Variante werden nacheinander eingeblendet und ausgewählt
* Bild: alle Varianten sind eingeblendet und können durcheinander ausgewählt werden

## Responsive - Tablet, Smartphone <a href="#responsive_darstellung" id="responsive_darstellung"></a>

Die Anzeige der Varianten Darstellung Professional. Dargestellt auf den verschiedenen Endgeräten.

<div><figure><img src="/files/sUR8YwvEQLEl39hjDg90" alt=""><figcaption></figcaption></figure> <figure><img src="/files/NSGMxq2Cl3EWGR6AEnA4" alt=""><figcaption></figcaption></figure> <figure><img src="/files/uskhu95ccP2mqn8dpJhu" alt=""><figcaption></figcaption></figure></div>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://coolbax.gitbook.io/coolbax-docs/shopware-5-plugins/storefront/varianten-darstellung-professional.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.