search
Watch TutorialsVisit Website

paletteCustomize Widget Color

This guide explains how to customize the colors of your BOGOS offer widgets to match your store's branding.

Customizing BOGOS widget colors includes 3 essential steps:

  1. Navigate to the color customization field.

  2. Customize the widget color by choosing from the picker, or entering a hex code directly (e.g., #000000 for black).

  3. Customize accent color (for Checkout & Thank you page Upsell only)

  4. Click Save.

hashtag
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.

hashtag
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).

  1. Preview your changes in real-time using the preview widget on the right side of the screen.

  2. 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.

hashtag
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.

PreviousLaunch Your First OfferNextEnable BOGOS

Last updated