> 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-cart-discount.md).

# Warenkorbrabatt anpassen

Dieser Leitfaden erklärt, wie Sie das **Warenkorbrabatt-Widget** und die **Glückwunschnachricht** in BOGOS anpassen – so informieren Sie Kunden über verfügbare Rabatte und feiern, wenn sie einen Deal freischalten.

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

**Die Anpassung dieser Elemente mit BOGOS umfasst 5 Schritte:**

{% stepper %}
{% step %}
Öffnen Sie im BOGOS-Admin Anpassen > Rabatt > Warenkorbrabatt.
{% endstep %}

{% step %}
[Passen Sie das Produktseiten-Widget an.](#customize-product-page-widget)
{% endstep %}

{% step %}
[Passen Sie die Glückwunschnachricht an.](#customize-congrats-message)
{% endstep %}

{% step %}
Klicken Sie auf Speichern.
{% endstep %}

{% step %}
[Passen Sie die Position des Widgets in Ihrem Shop an.](#adjust-widget-position-on-your-store)
{% endstep %}
{% endstepper %}

## 1. Produktseiten-Widget anpassen

Das Produktseiten-Widget erscheint in Ihrem Shop, um Kunden die verfügbaren Rabatte zu zeigen und sie zu motivieren, mehr in den Warenkorb zu legen.

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

### a) Allgemein

1. **Widget-Stil**: Wählen Sie ein Layout aus den 3 verfügbaren Optionen.

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

2. **Rabattstufen-Stil**: Wählen Sie, wie Stufen aufgelistet werden – Checkliste oder Aufzählungspunkte.

{% hint style="info" %}
Bei der Option „Aufzählungspunkte“ können Sie aus verfügbaren Symbolen wählen oder das BOGOS-Support-Team kontaktieren, um Ihr eigenes hochzuladen.
{% endhint %}

3. **Stufen in Tabelle unterteilen**: Aktivieren Sie dies, um Stufen in einem Tabellenformat für ein übersichtlicheres, leichter zu überblickendes Layout anzuzeigen.
4. **Widget-Randradius** (für Widget-Stil 2 & 3): Ziehen Sie den Schieberegler, um die Eckenrundung des Widgets anzupassen.

### b) Farbe

BOGOS ermöglicht Ihnen, die Farben aller Elemente mit einer der folgenden 4 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

BOGOS KI scannt Ihren Onlineshop und erkennt die Primär-, Sekundär- 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 BOGOS KI:

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

![](/files/8HMgW0p6Hvadbsq4mpf0)

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

![](/files/wr4WVSAsv8yHcB3JKixf)

3. Klicken Sie auf **Anwenden**, um die Farben in der Widget-Vorschau anzuwenden.

## 2. Glückwunschnachricht anpassen

Die Glückwunschnachricht erscheint, wenn ein Kunde eine Rabattstufe freischaltet, und hält ihn bei der Stange, indem sie bestätigt, dass er den Deal erfolgreich eingelöst hat.

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

### a) Allgemein

1. **Nachricht erscheint nach (Sekunden)**: Legen Sie die Verzögerung fest, bevor die Nachricht erscheint, nachdem ein Kunde sich qualifiziert hat.
2. **Nachrichtenposition**: Wählen Sie, wo die Nachricht auf dem Bildschirm erscheint, aus 6 verfügbaren Positionen.
3. **Randradius**: Ziehen Sie den Schieberegler, um die Eckenrundung der Nachricht anzupassen.

### b) Inhalt

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

1. **Titel**: Geben Sie die Überschrift ein, die in der Glückwunschnachricht angezeigt wird.
2. **Beschreibung**: Fügen Sie Details zu dem Rabatt hinzu, den der Kunde gerade freigeschaltet hat.

{% hint style="warning" %}
Bitte behalten Sie **{{discount\_amount}}** in der Beschreibung bei, um den Rabatt dynamisch synchron mit Ihrer Einrichtung anzuzeigen. Falls versehentlich gelöscht, klicken Sie auf **Variable hinzufügen**, um sie wiederherzustellen.
{% endhint %}

### c) Farbe

BOGOS ermöglicht Ihnen, die Farben aller Elemente mit einer der folgenden 4 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

BOGOS KI scannt Ihren Onlineshop und erkennt die Primär-, Sekundär- 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 BOGOS KI:

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

![](/files/8HMgW0p6Hvadbsq4mpf0)

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

![](/files/wr4WVSAsv8yHcB3JKixf)

3. Klicken Sie auf **Anwenden**, um die Farben in der Widget-Vorschau anzuwenden.

## 3. Widget-Position in Ihrem Shop anpassen

Standardmäßig **erscheint das Warenkorbrabatt-Widget automatisch auf allen relevanten Produktseiten.**

**Wenn Sie jedoch:**

* kein Widget auf Ihrer Produktseite sehen
* es auf Ihren Produktseiten neu positionieren möchten
* es zu anderen Shop-Seiten hinzufügen möchten (wie der Startseite, Sammlungsseite oder Warenkorbseite)

**Befolgen Sie bitte diese Schritte:**

1. Gehen Sie zu Shopify-Admin > Onlineshop.
2. Öffnen Sie den Theme-Editor.
3. Navigieren Sie zu der Seite, auf der Sie das Widget anpassen möchten.
4. Fügen Sie den BOGOS: Cart Discount-Block an die gewünschte Position hinzu oder ziehen Sie ihn dorthin.

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

*Weitere Details finden Sie in unserer Anleitung \[*[*BOGOS-Blöcke anpassen*](https://bogos-guideline.gitbook.io/user-guide/user-guide/customize/customize-bogos-blocks)*].*

## Brauchen Sie Hilfe?

Wenn Sie Unterstützung benötigen, wenden Sie sich gerne über den **Live-Chat** innerhalb unserer 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-cart-discount.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.
