Appearance overview

Browse the swatch styles available to your store and fine-tune how each one looks.

Options decides which style each product option uses.

Appearance decides what the chosen style looks like — shape, size, spacing, borders, hover effects, sold-out treatment, and more.

Each style card previews the style with your own swatches, and shows In use when an option already uses it.

How the page is organised

The Appearance setting is set up for Product page / Collection page individually.

The two tabs at the top separate the two surfaces. A style's settings are stored separately for each, so the same Color or custom image swatch can be 35 px chips on the product page and 20 px dots on collection pages.

There are no surface tabs inside a style's editor. Pick Product page or Collection page on this list first, then open the style.

Category chips

All, Swatches, Buttons and Dropdowns filter the list. Each chip shows how many styles it holds.

Style cards

Each card shows a live preview built from your own settings, a one-line description, and:

• In use — a badge on styles at least one of your options is currently using.

• Customize — opens that style's settings.

• Remove — moves the style out of the list and into Explore more… below. Not available for a style that's In use, or for the three core styles.

Below the main grid, Explore more product page styles (or …collection page styles) holds the styles you aren't using. Click Add on one to bring it into the list.

Adding or removing a style here only changes this list. What shoppers see is still decided by the style you pick per option on the Options page.

Locked styles show Unlock and a note pointing at the pricing page — see Plans and pricing.

Where to go next

• Customize a swatch style — how the editor works and what the shared setting groups do.

• Swatch styles reference — what each of the twelve styles offers.

• Out-of-stock styles

• Sale badge and in-stock message