> 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/quick-start-guide/customize-widget-color.md).

# Widget-Farbe anpassen

Das Anpassen der BOGOS-Widget-Farben umfasst 3 wesentliche Schritte:

1. [Navigieren Sie zum Feld für die Farbanpassung.](#navigate-to-color-customization)
2. [Passen Sie die Widget-Farbe an](#customize-widget-colors), indem Sie sie aus der Farbauswahl wählen oder direkt einen Hex-Code eingeben (z. B. #000000 für Schwarz).
3. [Passen Sie die Akzentfarbe an](#customize-accent-color-on-checkout-and-thank-you-page-upsell) (nur für Upselling an der Kasse & auf der Dankeseite)
4. Klicken Sie auf Speichern.

## Zur Farbanpassung navigieren

So greifen Sie auf die Einstellungen zur Farbanpassung zu:

1. Navigieren Sie im BOGOS-Adminbereich zur Seite Anpassen.
2. Klicken Sie auf die Funktion, die Sie anpassen möchten.
3. Suchen Sie den Bereich Farbe.

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

## Widget-Farbe anpassen

Sie können alle Farbelemente des Widgets anpassen, einschließlich Hintergrund, Preis, Schaltflächen, Text, Abzeichen und anderer visueller Komponenten.

So ändern Sie ein Farbelement:

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

1. Suchen Sie das Farbfeld, das Sie anpassen möchten.
2. Passen Sie die Farbe auf eine der folgenden Arten an:

* Klicken Sie auf das Farbfeld, um die Farbauswahl zu öffnen > Wählen Sie Ihre bevorzugte Farbe, indem Sie auf das Farbspektrum klicken oder den Farbtonregler anpassen.
* Oder geben Sie direkt einen Hex-Code in das Textfeld ein (z. B. #000000 für Schwarz).

3. Sehen Sie sich Ihre Änderungen in Echtzeit mit dem Vorschau-Widget auf der rechten Seite des Bildschirms an.
4. Klicken Sie oben auf der Seite auf Speichern.

Hinweis:

* Einige Funktionen bieten Farbvorlagen, um Ihnen die schnelle Einrichtung zu erleichtern.
* Kontaktieren Sie gerne unser Support-Team, wenn Sie Hilfe bei der Anpassung der Farbe an Ihr Branding benötigen.

## Akzentfarbe beim Upselling an der Kasse & auf der Dankeseite anpassen

Im Allgemeinen steuern Akzentfarben bestimmte Elemente wie Hervorhebungen, Links und Call-to-Action-Komponenten auf Ihrer Checkout-Seite.

Für das Checkout-Upselling und das Upselling auf der Dankeseite von BOGOS können Sie diese Akzentfarbe auf Preise anwenden, sodass sie mit Ihrem Checkout-Theme synchron bleiben und ein einheitlicheres Erscheinungsbild ergeben.

<figure><img src="/files/0z5GdGvzVGmKWmhwZFeJ" alt=""><figcaption></figcaption></figure>

So passen Sie die Akzentfarbe an:

1. Klicken Sie auf den Link „Legen Sie hier die Akzentfarbe Ihres Shops fest“, um zu Ihrem Theme-Editor weitergeleitet zu werden.
2. Suchen Sie das Feld Akzentfarbe.
3. Passen Sie die Farbe an, indem Sie auf das Farbfeld klicken, um die Farbauswahl zu verwenden, oder geben Sie einen Hex-Code ein (z. B. #000000).
4. Klicken Sie auf Speichern.

Hinweis: Das Ändern Ihrer Akzentfarbe aktualisiert alle Checkout-Komponenten, die sie verwenden, einschließlich des Preises in den BOGOS-Upselling-Widgets.

<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/quick-start-guide/customize-widget-color.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.