> For the complete documentation index, see [llms.txt](https://docs.bogos.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.bogos.io/de/detailed-guide/customize/customize-variant-input.md).

# Variantenauswahl anpassen

Hier legen Sie fest, wie Ihre Produktvarianten Kunden angezeigt werden.

Sie haben zwei Anzeigeoptionen: **Nach Varianten anzeigen** und **Nach Optionen anzeigen**.

### **1. Nach Varianten anzeigen**

<figure><img src="/files/SWp1AzZjSom79TuQoTET" alt=""><figcaption></figcaption></figure>

Diese Option verwendet ein Dropdown-Menü zur Auswahl von Produktvarianten.

Sie können die Hintergrundfarbe dieses Widgets ganz einfach ändern, indem Sie zu **Standardanzeige** -> **Hintergrund des aktiven Elements** navigieren und die Farbe ändern.

<figure><img src="/files/4ggq61eIbAlFpcno151v" alt=""><figcaption></figcaption></figure>

### 2. Nach Optionen anzeigen

<figure><img src="/files/njaJIMkKSQ9rZubwUXit" alt=""><figcaption></figcaption></figure>

Es gibt zwei Anzeigeoptionen zur Auswahl.

* **Standardanzeige**: Zeigt Variantenwerte als beschriftete rechteckige Schaltflächen an.

<figure><img src="/files/CwMHLms7eTKgtXBjolnK" alt=""><figcaption></figcaption></figure>

* **Erweiterte Anzeige**: Zeigt Varianten als Farbmuster oder Bild-Thumbnails an.

<div data-full-width="false"><figure><img src="/files/ULDQTAhHYmka9Dtjjv4O" alt="" width="504"><figcaption></figcaption></figure></div>

Wenn Sie die Standardoption anpassen möchten, gehen Sie einfach zu **Standardanzeige** und passen Sie die Farbe für jedes Element an.

<figure><img src="/files/gtMhnzBKmsfDGo4zQf8M" alt=""><figcaption></figcaption></figure>

Bei der **Erweiterten Anzeige** können Sie für jeden Variantensatz separat einrichten und zwischen Farbmuster oder Bild-Thumbnail wählen.

<figure><img src="/files/ihSAFrrTAwrqTKDJv06K" alt=""><figcaption></figcaption></figure>

\
Wählen Sie danach in dieser Tabelle **Option auswählen** einen Variantensatz aus. BOGOS synchronisiert und zeigt automatisch alle Variantenwerte aus Ihrer Shopify-Einrichtung an.<br>

<figure><img src="/files/XC9pJBjGjxv5EXFLMuBz" alt="" width="483"><figcaption></figcaption></figure>

Im nächsten Schritt richten Sie jeden Variantenwert einzeln ein.

* Für die Anzeige **Farbmuster**: Wählen Sie einfach die entsprechende Farbe für jede Variante aus – entweder durch Eingabe eines Farbcodes oder durch Auswahl aus dem Farbkreis.

<figure><img src="/files/MRIglqFE0VHZ4JTrVV8W" alt="" width="402"><figcaption></figcaption></figure>

* Für die Anzeige **Bild-Thumbnail**: Laden Sie Bilder hoch, die jeden Variantenwert klar darstellen. Diese Bilder müssen kleiner als 20 KB sein.

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

Für beide Anzeigearten finden Sie drei Schaltflächen, die Ihnen bei der Anpassung der Einrichtung helfen:

* **Optionswert auswählen**: Fügen Sie einen Variantenwert hinzu, der möglicherweise übersehen oder gelöscht wurde.
* **Anpassen**: Passen Sie das Erscheinungsbild Ihres Varianten-Widgets in Ihrem Storefront mit den folgenden Optionen an.

▶ *Größe auswählen*: Wählen Sie Klein, Mittel oder Groß für Ihre Schaltflächen oder Farbmuster.

▶ *Musterform auswählen*: Wählen Sie zwischen Kreisen oder Quadraten für Ihre Farbmuster.

▶ *Variantenname neben den Farbmustern anzeigen*: Aktivieren Sie diese Option, um den Variantennamen neben jedem Farbmuster anzuzeigen.

<figure><img src="/files/Hb7LudwM7WJ7cBYutxc3" alt="" width="563"><figcaption></figcaption></figure>

Wenn Sie einen zusätzlichen Variantensatz konfigurieren möchten, klicken Sie auf **Variantensatz hinzufügen**. Alle Einrichtungsschritte sind dieselben wie oben beschrieben.

{% hint style="warning" %}
**Hinweis:**

* Varianteneinrichtungen gelten automatisch für Produkte, die denselben Variantenoptionsnamen verwenden.
* Jeder Variantensatz kann nur einen Anzeigestil verwenden.
  {% endhint %}

<br>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.bogos.io/de/detailed-guide/customize/customize-variant-input.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.