Design settings

The five groups on the Design section, and where each one is explained in depth.

Settings > Settings > Design contains every setting that controls how the widget looks. All of them are store-wide.

The individual settings are documented under Storefront display and design. This page lists the groups and links to each one.

The five groups

Group	Contains	Explained in
Theme style	Match theme style, plus a link to the supported themes list	Match your theme style
Color	Around forty color settings in six sub-groups: General, Inputs, Choices, Swatches, Tabs, Group	Colors
Border	Size and radius for Input, Dropdown, and Swatch	Borders and typography
Typography	Four text styles, each with font, variant, and size	Borders and typography
Additional	Custom CSS for the widget	Custom CSS

The order to set them in

1

Turn on Match theme style

If your theme is supported, this sets most of the appearance at once. See Match your theme style.

2

Adjust the remaining colors

Copy the values from your theme's own settings rather than selecting similar colors. Set all three states, rest, hover, and active, on anything interactive.

3

Match the border radius

This is the setting that most often makes the widget look separate from the page.

4

Match the fonts

Use your theme's fonts rather than similar ones.

5

Add custom CSS for anything left

See Custom CSS.

6

Check a real product page and a phone

Use View in Store. The builder preview always uses the app's own styling, so it does not reflect your theme.

The builder's preview panel does not reflect these settings. It is a functional preview rather than a visual one, so check the design on a real product page.

Notes

• These settings are store-wide. There is no per-option-set design.

• Match theme style and the manual settings work together, so you can turn on the setting and then adjust individual values.

• The Personalizer's own colors and fonts are set per layer, separately from these. See Text layers and Fonts.

• Custom fonts have to be uploaded in General before you can select them here. See Custom fonts.