> For the complete documentation index, see [llms.txt](https://bogos-guideline.gitbook.io/user-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bogos-guideline.gitbook.io/user-guide/quick-start-guide/customize-widget-color.md).
# 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.
## 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:
1. Locate the color field you want to adjust.
2. Customize the color either by:
* 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:
* 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.
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.
---
# 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://bogos-guideline.gitbook.io/user-guide/quick-start-guide/customize-widget-color.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.