> 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-frequently-bought-together.md).

# Häufig zusammen gekauft anpassen

## 1. Häufig zusammen gekauft

### 1.1 Allgemein

Um das Widget „Häufig zusammen gekauft“ anzupassen, folgen Sie diesen Schritten:

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

1. Wählen Sie das **Widget-Layout:** Wählen Sie, wie die Upsell-Produkte angezeigt werden (z. B. im Amazon-Stil oder gestapelt).
2. Geben Sie die **Maximale Anzahl angezeigter Produkte** ein: Legen Sie die maximale Anzahl der im Widget angezeigten Upsell-Produkte fest. Wenn Kunden weitere Produkte sehen möchten, müssen sie auf Mehr anzeigen klicken.
3. **Widget-Randradius**: Ziehen Sie den Schieberegler, um die Eckenrundung des Widgets anzupassen.
4. **Produktbildgröße:** Wählen Sie die Größe der im Widget angezeigten Produktbilder.
5. **Bildrandradius aktivieren** (optional), um die Eckenrundung der Produktbilder automatisch an den Widget-Rand anzupassen.

### 1.2 Inhalt

Steuern Sie den im Upsell-Widget angezeigten Inhalt:

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

1. **Gesamtpreis:** Passen Sie den Text für den Gesamtpreisbereich an.
2. **Schaltflächentext:** Ändern Sie den auf der Schaltfläche „Zum Warenkorb hinzufügen“ angezeigten Text.
3. **Preis jedes Artikels anzeigen:** Aktivieren oder deaktivieren Sie die Anzeige einzelner Produktpreise im Widget.
4. **Rabattbetrag auf der Schaltfläche „Zum Warenkorb hinzufügen“ anzeigen:** Wählen Sie, ob der angewendete Rabatt (z. B. „20 % RABATT“) auf der Schaltfläche angezeigt werden soll.
5. Richten Sie das **Etikett „Mehr anzeigen“** ein:
   * Geben Sie den Text für die Schaltflächen **Mehr anzeigen und Weniger anzeigen** ein, der angezeigt wird, wenn die Produktliste erweitert oder eingeklappt wird.
   * Wählen Sie die **Ausrichtung des Textes „Mehr anzeigen“**: Wählen Sie Links, Zentriert oder Rechts, um die Ausrichtung dieser Schaltflächen zu steuern.
6. **Versandrabatt:** Wählen Sie Ihr Versandsymbol aus einigen verfügbaren Optionen oder laden Sie Ihr eigenes hoch (Bild oder GIF wird unterstützt).
7. Bearbeiten Sie das **Textetikett für den günstigsten Artikel** (wenn Sie als [Rabattart](https://docs.bogos.io/de/detailed-guide/customize/pages/ISD6kieaGTUaQXLJ4ku3#id-5.2-discount-frequently-bought-together-widget) „Günstigster Artikel kostenlos“ wählen)

{% hint style="info" %}
Denken Sie daran, die Vorschauoptionen zu aktivieren, um zu sehen, wie der Versandrabatt und der kostenlose günstigste Artikel im Widget angezeigt werden.
{% endhint %}

### 1.3 Farbe

BOGOS ermöglicht Ihnen, die Farben aller Elemente mit einer der 4 unten stehenden Methoden anzupassen:

* Wählen Sie ein **vorgefertigtes Farbset** aus dem Dropdown-Menü.
* **Passen Sie jedes Farbfeld manuell an** für alle verfügbaren Farben.
* Verwenden Sie den [KI-Theme-Detektor](#ai-theme-detector), um automatisch eine vollständige Widget-Farbpalette basierend auf dem Branding Ihres Shops zu generieren.
* **Kontaktieren Sie das BOGOS-Support-Team**, um Hilfe bei der Farbanpassung zu erhalten.

Klicken Sie auf **Speichern**, wenn Sie fertig sind.

#### KI-Theme-Detektor

Die BOGOS-KI scannt Ihren Online-Shop und erkennt die primären, sekundären und Textfarben Ihrer Marke und generiert dann automatisch eine vollständige Widget-Farbpalette.

{% hint style="warning" %}
Ihr Shop darf NICHT passwortgeschützt sein, damit die KI auf Ihre Markenfarben zugreifen und diese erkennen kann.
{% endhint %}

So bearbeiten Sie die Farben mit der BOGOS-KI:

1. Klicken Sie auf das **Stiftsymbol**.

![](/files/8HMgW0p6Hvadbsq4mpf0)

2. Klicken Sie auf **Erneut scannen**, damit die BOGOS-KI erneut erkennt, oder **passen Sie manuell** die Felder Primärfarbe, Sekundärfarbe oder Text an.

![](/files/wr4WVSAsv8yHcB3JKixf)

3. Klicken Sie auf **Anwenden** für die Vorschau, um die Farben auf die Widget-Vorschau anzuwenden.

## 2. Produkt-Add-on

### 2.1 Allgemein

Um das Widget Produkt-Add-on anzupassen, folgen Sie diesen Schritten:

<img src="/files/AD1vQLi4DPlfSpZdwSTA" alt="" height="480" width="624">

1. Wählen Sie den **Produktkartenstil:** zwischen Horizontal und Vertikal, um zu steuern, wie jede Produktkarte angeordnet ist.
2. Wählen Sie den **Widget-Stil** aus 3 Stilen.
3. Wählen Sie die **Position des Kontrollkästchens** zwischen links und rechts, um festzulegen, wo das Kontrollkästchen auf jeder Produktkarte erscheint.
4. **Widget-Randradius**: Ziehen Sie den Schieberegler, um die Eckenrundung des Widgets anzupassen.
5. **Bildrandradius aktivieren** (optional), um die Eckenrundung der Produktbilder automatisch an den Widget-Rand anzupassen.

### 2.2 Inhalt

Um die Inhaltsanzeige des Widgets Produkt-Add-on anzupassen, folgen Sie diesen Schritten:

<img src="/files/UeyxAb6f5eqItEHCxD7C" alt="" height="501" width="624">

1. Wählen Sie die **Ausrichtung des Titeltextes**: Wählen Sie Links, Zentriert oder Rechts, um zu steuern, wie der Widget-Titel ausgerichtet ist.
2. Geben Sie die **Anzahl der angezeigten Produkte** ein: Legen Sie fest, wie viele Produkte zunächst sichtbar sind. Kunden können auf **Mehr anzeigen** klicken, um alle verfügbaren Produkte zu sehen.

* **Kompakt:** gilt für das Widget, das auf der Produktseite angezeigt wird.
* **Vollbreite:** gilt, wenn das Widget als eigenständiger Abschnitt in Ihrem Theme hinzugefügt wird.

3. Richten Sie das **Etikett „Mehr anzeigen“** ein:

* Geben Sie den Text für die Schaltflächen **Mehr anzeigen und Weniger anzeigen** ein, der angezeigt wird, wenn die Produktliste erweitert oder eingeklappt wird.
* Wählen Sie die **Ausrichtung des Textes „Mehr anzeigen“**: Wählen Sie Links, Zentriert oder Rechts, um die Ausrichtung dieser Schaltflächen zu steuern.

### 2.3 Farbe

BOGOS ermöglicht Ihnen, die Farben aller Elemente mit einer der 4 unten stehenden Methoden anzupassen:

* Wählen Sie ein **vorgefertigtes Farbset** aus dem Dropdown-Menü.
* **Passen Sie jedes Farbfeld manuell an** für alle verfügbaren Farben.
* Verwenden Sie den [KI-Theme-Detektor](#ai-theme-detector-1), um automatisch eine vollständige Widget-Farbpalette basierend auf dem Branding Ihres Shops zu generieren.
* **Kontaktieren Sie das BOGOS-Support-Team**, um Hilfe bei der Farbanpassung zu erhalten.

Klicken Sie auf **Speichern**, wenn Sie fertig sind.

#### KI-Theme-Detektor

Die BOGOS-KI scannt Ihren Online-Shop und erkennt die primären, sekundären und Textfarben Ihrer Marke und generiert dann automatisch eine vollständige Widget-Farbpalette.

{% hint style="warning" %}
Ihr Shop darf NICHT passwortgeschützt sein, damit die KI auf Ihre Markenfarben zugreifen und diese erkennen kann.
{% endhint %}

So bearbeiten Sie die Farben mit der BOGOS-KI:

1. Klicken Sie auf das **Stiftsymbol**.

![](/files/8HMgW0p6Hvadbsq4mpf0)

2. Klicken Sie auf **Erneut scannen**, damit die BOGOS-KI erneut erkennt, oder **passen Sie manuell** die Felder Primärfarbe, Sekundärfarbe oder Text an.

![](/files/wr4WVSAsv8yHcB3JKixf)

3. Klicken Sie auf **Anwenden** für die Vorschau, um die Farben auf die Widget-Vorschau anzuwenden.

## 3. Position des Upsell-Widgets bearbeiten

{% hint style="info" %}
Sie können den Block „Häufig zusammen gekauft“ auf jeder Seite Ihres Shops platzieren, außer auf der Checkout-Seite.
{% endhint %}

Normalerweise erscheint das Widget „Häufig zusammen gekauft“ **automatisch auf relevanten Produktseiten.** Sie **müssen es jedoch manuell anpassen**, wenn Sie:

* Die Widgets nicht erscheinen sehen
* Die Position der Widgets auf der Produktseite ändern möchten
* Neue Blöcke auf Produktseiten oder anderen Seiten Ihres Shops hinzufügen möchten

Bitte folgen Sie diesen Schritten:

<figure><img src="/files/72q7GN2p8xVMLkZVW6m0" alt=""><figcaption></figcaption></figure>

1. Öffnen Sie Ihren **Theme-Editor** > gehen Sie zu der Seite, auf der Sie ein neues Widget „Häufig zusammen gekauft“ hinzufügen oder das aktuelle anpassen möchten.
2. Klicken Sie im linken Bereich auf **Block hinzufügen** > wählen Sie **Apps** > suchen und wählen Sie den Block **BOGOS: FBT**.
3. Ziehen Sie den Abschnitt/Block per Drag-and-Drop an die gewünschte Stelle.
4. Füllen Sie im oberen rechten Bereich die Einrichtungsfelder aus (nur wenn Sie den FBT-Block zu Seiten hinzufügen, die keine Produktseiten sind)

* **Angebots-ID**: Geben Sie die ID des Angebots „Häufig zusammen gekauft“ ein, das Sie anzeigen möchten.
* **Produktanzeige**: Wählen Sie ein Produkt aus Ihrem Shop aus. Alle mit diesem Produkt verknüpften Angebote „Häufig zusammen gekauft“ werden auf der aktuellen Seite angezeigt.

5. Klicken Sie auf Speichern.

Weitere Details finden Sie in unserem Leitfaden \[[BOGOS-Block anpassen](/de/quick-start-guide/adjust-bogos-blocks.md)].


---

# 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-frequently-bought-together.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.
