> 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-bundle-product-page.md).
# Bundle-Produktseite anpassen
Diese Anleitung erklärt, wie Sie das Erscheinungsbild und den Inhalt Ihrer Bundle-Produktseite in der BOGOS-App anpassen können.
**Zum Anpassen gibt es 4 Schritte:**
1. Richten Sie die [Vorschau- und Layout-Optionen](#preview-and-layout-options) ein.
2. Wählen Sie aus, was Sie anpassen möchten: [By Offer Customize](#by-offer-customize), [Global Customize](#global-customize) oder [Widget on Child Product Page](#widget-on-child-product-page).
3. Passen Sie alle verfügbaren Einstellungen für den ausgewählten Bereich an.
4. Sehen Sie sich Ihre Änderungen in der Vorschau an und klicken Sie dann auf Speichern.
## Vorschau & Layout-Optionen
Bevor Sie etwas anpassen, wählen Sie bitte die Vorschau-Einstellungen, die am besten zu Ihrem Store-Setup passen. Das hilft Ihnen, die Anzeige genauer anzupassen.
* **Vorschau-Option**: Wechseln Sie zwischen Desktop und Mobile, um zu prüfen, wie die Seite auf jedem Gerät aussieht.
* **Layout**: Wählen Sie aus, welches Layout Sie anpassen.
1. Das Produktbild erscheint neben dem Bundle-Inhalt (Standard-Layout).
2. Die Bundle-Produktseite wird als eigenständiger Abschnitt in Ihrem Theme hinzugefügt (weitere Details finden Sie unter \[[BOGOS-Blöcke anpassen](/de/quick-start-guide/adjust-bogos-blocks.md)]).
* **Spaltenverhältnis**: Wählen Sie das Breitenverhältnis zwischen dem Produktbild und dem Bundle-Inhaltsbereich, um es besser an Ihr Store-Layout anzupassen.
## By Offer Customize
Mit By Offer Customize passen Sie das Design nur für eine bestimmte Bundle-Produktseite an. Änderungen, die hier vorgenommen werden, **wirken sich auf KEINE anderen Bundle-Produktseiten aus**.
**So greifen Sie auf diese Einstellung zu:**
1. Öffnen Sie die BOGOS-App > Alle Angebote > Öffnen Sie das Setup der gewünschten Bundle-Produktseite.
2. Klicken Sie auf eine beliebige **Anpassen**-Schaltfläche > Stellen Sie sicher, dass **By offer customize** ausgewählt ist.
### a) Das Paket anpassen (Pack Select Field)
Füllen Sie Folgendes aus oder passen Sie es an:
* **Paketauswahl-Beschriftung**: Der Text, der über dem Paketgrößen-Bereich angezeigt wird, um Kunden weitere Details mitzuteilen.
* **Beschriftungsstil**: Wählen Sie aus, welcher Teil der Paket-Beschriftung hervorgehoben wird:
* **Menge hervorheben**: Die Anzahl der für das Paket benötigten Artikel wird fett dargestellt.
* **Rabatt hervorheben**: Der Rabattwert wird fett dargestellt.
* **Textausrichtung**: Richten Sie den Pakettext links, zentriert oder rechts aus.
* **Bildausrichtung**: Wählen Sie, ob das Paketbild vertikal oder horizontal zum Text angezeigt wird.
* **Anzahl der Pakete pro Zeile**: Legen Sie fest, wie viele Pakete pro Zeile angezeigt werden:
* **Volle Breite**: Gilt, wenn die Bundle-Produktseite als eigenständiger Block/Abschnitt in Ihrem Theme hinzugefügt wird (weitere Details finden Sie unter \[BOGOS-Blöcke anpassen]).
* **Kompakt**: Gilt, wenn der Bundle-Inhalt neben dem Produktbild angezeigt wird (Standard-Layout).
* **Mobil**: Gilt für die mobile Anzeige.
Klicken Sie auf **Speichern**, wenn Sie fertig sind.
### b) Den Abschnitt anpassen
Der Abschnitt hat zwei Anpassungsbereiche, die jeweils unterschiedliche Einstellungen steuern: 1. Produktauswahlfeld oder 2. Nach Schritt.
#### ***b.1. Produktauswahlfeld***
Hier können Kunden den gesamten Produktauswahlbereich anpassen.
Wählen Sie **Produktauswahlfelder** aus und füllen Sie Folgendes aus oder passen Sie es an:
* **Layout**: Wählen Sie, wie Schritte angezeigt werden:
* **Akkordeon**: Zeigt Schritte vertikal als aufklappbare Abschnitte an. Kunden können mehrere Schritte gleichzeitig öffnen, um Produkte anzuzeigen und auszuwählen.
* **Tabs**: Zeigt Schritte horizontal als Tabs an. Kunden wechseln zwischen Tabs, um Produkte anzuzeigen und auszuwählen.
* **Schrittmengen-Anzeige**: Wählen Sie aus, wie die Anzahl der ausgewählten Artikel in der Kopfzeile jedes Schritts angezeigt wird.
{% hint style="info" %}
Fügen Sie Artikel in der Vorschau hinzu, um zu prüfen, wie es aussieht.
{% endhint %}
* **Artikel-hinzufügen-Schaltfläche**: Passen Sie die Schaltfläche an, mit der Kunden Produkte zum Bundle hinzufügen.
* **Schaltflächenstil**: Wählen Sie zwischen Symbol & Text, Nur Text oder Nur Symbol.
* **Schaltflächenbeschriftung**: Geben Sie den Text ein, der auf der Artikel-hinzufügen-Schaltfläche angezeigt wird.
* **Symbol auswählen**: Wählen Sie ein Symbol aus, das auf der Schaltfläche angezeigt werden soll.
#### ***b.2. Nach Schritt***
Hier können Kunden die Anzeige jedes Schritts separat anpassen.
Klicken Sie auf **einen Schrittnamen** (zum Beispiel „Wählen Sie Ihren Schuh“) und füllen Sie Folgendes aus oder passen Sie es an:
* **Produktkarten-Layout**: Wählen Sie aus, wie jede Produktkarte angezeigt wird:
* **Horizontal**: Am besten geeignet, wenn Kunden Optionen schnell überblicken müssen.
* **Vertikal**: Am besten geeignet für visuelle Produkte, bei denen Bilder Kunden bei der Auswahl helfen.
* **Nur Name**: Am besten geeignet, wenn Produktbilder nicht wichtig sind, oder wenn Sie eine einfache, textfokussierte Auswahlliste möchten.
* **Produktkarten-Stil**:
* Minimalistische Karte: Zeigt Produkte ohne Hintergrund an.
* Karte mit Hintergrund: Zeigt Produkte innerhalb einer Karte mit Hintergrund für eine stärkere visuelle Abgrenzung an.
* **Anzahl der Produkte pro Zeile**: Legen Sie fest, wie viele Produkte pro Zeile angezeigt werden für:
* **Volle Breite**: Gilt, wenn die Bundle-Produktseite als eigenständiger Block/Abschnitt in Ihrem Theme hinzugefügt wird (weitere Details finden Sie unter \[BOGOS-Blöcke anpassen]).
* **Kompakt**: Gilt, wenn der Bundle-Inhalt neben dem Produktbild angezeigt wird (Standard-Layout).
* **Mobil**: Gilt für die mobile Anzeige.
Klicken Sie auf **Speichern**, wenn Sie fertig sind.
## Global Customize
Mit Global Customize passen Sie die Gesamtanzeige für ALLE Bundle-Produktseiten in Ihrem Store an.
### Zugriff auf diese Einstellung
Sie können einen der beiden folgenden Wege nutzen:
* Navigieren Sie zu **Alle Angebote** > Öffnen Sie das Setup einer beliebigen Bundle-Produktseite > Gehen Sie zum Panel „Das Bundle anzeigen“ auf der rechten Seite > Öffnen Sie das Dropdown „Die Seite anpassen“ > klicken Sie auf Global customize.
* Navigieren Sie zu **Anpassen** > Bundles > Bundle-Produktseite > wählen Sie den Tab Global customize.
### Inhalt
**Gesamtpreis-Text**: Geben Sie die Beschriftung ein, die in der Gesamtpreiszeile der Bundle-Seite angezeigt wird.
**Bundle-hinzufügen-Schaltfläche**:
* Schaltflächenbeschriftung: Geben Sie den Text ein, der auf der Schaltfläche „In den Warenkorb legen“ angezeigt wird.
* Countdown auf Schaltfläche anzeigen: Aktivieren Sie diese Option, um eine Live-Countdown-Nachricht auf der Schaltfläche anzuzeigen, während Kunden Artikel hinzufügen (z. B.: 2 Artikel hinzugefügt, noch 1 fehlt)
{% hint style="info" %}
Verwenden Sie {{amount\_added}}, um die Anzahl der von Kunden hinzugefügten Artikel anzuzeigen.
Verwenden Sie {{amount\_left}}, um die Anzahl der noch benötigten Artikel anzuzeigen, um den passenden Paketrabatt freizuschalten.
{% endhint %}
**Produkt-Schnellansicht-Modal**: Wenn Kunden auf einen Produkttitel klicken, öffnet sich ein Schnellansicht-Popup mit Produktdetails.
* Zum-Produkt-Text: Geben Sie die Beschriftung für den Link ein, der Kunden zur vollständigen Produktseite führt.
### Farbe
BOGOS ermöglicht es Ihnen, die Farben aller Elemente mit einer der 4 folgenden Methoden anzupassen:
* Wählen Sie ein **vorgefertigtes Farbschema** aus dem Dropdown.
* **Passen Sie manuell** jedes Farbfeld für alle verfügbaren Farben an.
* Verwenden Sie den [KI-Theme-Detektor](#ai-theme-detector), um automatisch eine vollständige Widget-Farbpalette basierend auf dem Branding Ihres Stores zu erstellen.
* **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 Onlineshop und erkennt die primäre, sekundäre und Textfarbe Ihrer Marke und erstellt dann automatisch eine vollständige Widget-Farbpalette.
{% hint style="warning" %}
Ihr Store 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 **Stift-Symbol**.
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.
3. Klicken Sie auf **Anwenden für Vorschau**, um die Farben auf die Widget-Vorschau anzuwenden.
## Widget auf der Produktseite des Kindprodukts
Das Widget erscheint auf den Produktseiten von Artikeln, die in einem Bundle enthalten sind. Es informiert Kunden darüber, dass der Artikel Teil eines Bundle-Angebots ist, und leitet Kunden schnell zur Bundle-Produktseite weiter.
### Zugriff auf diese Einstellung
Sie können einen der beiden folgenden Wege nutzen:
* Navigieren Sie zu **Alle Angebote** > Öffnen Sie das Setup einer beliebigen Bundle-Produktseite > Gehen Sie zum Panel „Das Bundle anzeigen“ auf der rechten Seite > Öffnen Sie das Dropdown „Widget on child product page“ > Aktivieren Sie „Add widget on child product's page“ > Klicken Sie auf Widget customize.
* Navigieren Sie zu **Anpassen** > Bundles > Bundle-Produktseite > Wählen Sie den Tab Widget on child product page.
### Allgemein
* **Widget-Stil**: Wählen Sie aus 3 verfügbaren Layout-Optionen.
* **Produkte pro Zeile**: Legen Sie fest, wie viele Produkte pro Zeile auf Desktop und Mobile angezeigt werden.
### Inhalt
* **Rabatt-Beschriftung anzeigen**: Zeigen Sie alle Paketgrößen zusammen mit den Rabatten im Widget an.
* **Produkt- und Variantenname anzeigen**: Zeigen Sie die Produktnamen und ausgewählten Variantennamen an, die im Bundle enthalten sind.
* **Beschriftung**: Legen Sie die Überschrift fest, die über dem Widget angezeigt wird. Verwenden Sie {{number}}, um anzuzeigen, wie viele Bundle-Produktseiten dieses Produkt enthalten.
* **Weiterleitungsschaltfläche-Beschriftung**: Legen Sie den Text für den Link fest, der Kunden zur Bundle-Produktseite führt.
### Farbe
BOGOS ermöglicht es Ihnen, die Farben aller Elemente mit einer der 4 folgenden Methoden anzupassen:
* Wählen Sie ein **vorgefertigtes Farbschema** aus dem Dropdown.
* **Passen Sie manuell** jedes Farbfeld für alle verfügbaren Farben an.
* Verwenden Sie den [KI-Theme-Detektor](#ai-theme-detector-1), um automatisch eine vollständige Widget-Farbpalette basierend auf dem Branding Ihres Stores zu erstellen.
* **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 Onlineshop und erkennt die primäre, sekundäre und Textfarbe Ihrer Marke und erstellt dann automatisch eine vollständige Widget-Farbpalette.
{% hint style="warning" %}
Ihr Store 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 **Stift-Symbol**.
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.
3. Klicken Sie auf **Anwenden für Vorschau**, um die Farben auf die Widget-Vorschau anzuwenden.
## Brauchen Sie Hilfe?
Wenn Sie Unterstützung benötigen, wenden Sie sich gerne über den Live-Chat innerhalb der BOGOS-App an unser Kundensupport-Team.
---
# 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-bundle-product-page.md?ask=&goal=
```
`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.