Colors

Every color setting in the widget, grouped as the app groups them.

Settings > Settings > Design > Color. Store-wide, applying to every option set.

Before setting these individually, try Match your theme style. For a supported theme, it sets most of them for you.

The Color group in Design settings, grouped as the app groups it.

General

Setting	Colors
App background	The widget's own background. Usually left matching your page background
Label text	Option labels
Required character	The marker on required options. Traditionally red — make sure it is visible against your background
Help text	Help text under and around options
Total text	The add-on total's label
Total text money	The amount itself. Often a green or your brand color

Inputs

Covers text fields, number fields, switches, and range sliders.

Setting	Colors
Input text	What the customer types
Input border	The field's outline
Input background	Inside the field
Switch background	A switch when off
Switch active background	A switch when on
Range slider thumb	The slider handle
Range slider background	The unfilled track
Range slider active background	The filled part of the track

Choices

Covers dropdowns, checkboxes, and radio buttons.

Setting	Colors
Dropdown text	Text in a dropdown
Dropdown border	Its outline
Dropdown background	Inside it
Dropdown selected	The highlight on the chosen entry
Checkbox & Radio text	Their labels at rest
Checkbox & Radio text hover	On hover
Checkbox & Radio text active	When selected
Checkbox & Radio hover	The control on hover
Checkbox & Radio active	The control when selected

Swatches

Covers buttons, color swatches, and image swatches.

Setting	Colors
Button text / hover / active	Button labels in each state
Button background / hover / active	Button fills in each state
Swatch border	A swatch at rest
Swatch border hover	On hover
Swatch border active	When selected

Swatch border active is the most important color in this group because it shows the customer which swatch is selected. Make it clearly different from the resting state. A subtle difference is easy to miss, especially on a phone.

Tabs

For the Tabs option type.

Setting	Colors
Tab title	Inactive tab titles
Tab title active	The open tab's title
Tab title hover	On hover
Tab content	The text inside a panel
Tab border	The lines around and between tabs

Group

For Section headings.

Setting	Colors
Group label	The section heading text
Group icon	The section's prefix icon
Group chevron	The open and close arrow on a collapsible section

Matching your theme's colors

1

Try Match theme style first

On a supported theme, it sets most of these colors at once. See Match your theme style.

2

Copy exact values from your theme's settings

Open your theme's own color settings and copy the values, rather than selecting colors that look similar.

3

Set the three states for anything interactive

Buttons and swatches have rest, hover, and active states. Leaving one at its default is the most common reason a widget still looks out of place.

4

Check contrast

Check label text against the app background, and the required marker against every background it appears on.

5

Check a real product page and a phone

Use View in Store. The builder preview does not use your theme's styling.

Notes

• These settings are store-wide. There is no per-option-set color scheme. To style one option set differently, use an HTML class and custom CSS.

• These settings work alongside Match theme style, so you can turn on the switch and then adjust individual colors.

• These colors apply to the storefront widget. The builder preview uses the app's own styling.