# Customize Widget Color

Customizing BOGOS widget colors includes 3 essential steps:

1. [Navigate to the color customization field.](#navigate-to-color-customization)
2. [Customize the widget color](#customize-widget-colors) by choosing from the picker, or entering a hex code directly (e.g., #000000 for black).
3. [Customize accent color](#customize-accent-color-on-checkout-and-thank-you-page-upsell) (for Checkout & Thank you page Upsell only)
4. Click Save.

## Navigate to Color Customization

To access the color customization settings:

1. From BOGOS Admin, navigate to Customize page.
2. Click on any feature you want to customize.
3. Locate the Color section.

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

## Customize Widget Color

You can customize all color elements on the widget, including background, price, buttons, text, badges, and other visual components.

To change any color element:

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

1. Locate the color field you want to adjust.
2. Customize the color either by:&#x20;

* Click the color box to open the color picker > Select your preferred color by clicking on the color spectrum or adjusting the hue slider.
* Or, enter a hex code directly in the text field (e.g., #000000 for black).

3. Preview your changes in real-time using the preview widget on the right side of the screen.
4. Click Save at the top of the page.

Note:&#x20;

* Some features offer color templates to help you quickly set up.
* Feel free to contact our support team if you need help customizing the color to match your branding.

## Customize Accent Color on Checkout & Thank you page Upsell

In general, accent colors control specific elements like highlights, links, and call-to-action components across your checkout page.

For BOGOS’s Checkout Upsell and Thank You Page Upsell, you can apply that accent color to prices, keeping them in sync with your checkout theme for a more consistent look.

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

To customize the accent color:

1. Click the link on “Setting your store accent color here” to be redirected to your theme editor.
2. Locate the Accent color field.
3. Adjust the color by clicking the color box to use the color picker, or enter a hex code (e.g., #000000).
4. Click Save.

Note: Changing your accent color will update all checkout components that use it, including the price in BOGOS upsell widgets.

<br>


---

# Agent Instructions: 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:

```
GET https://bogos-guideline.gitbook.io/user-guide/quick-start-guide/customize-widget-color.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.