Styling overview

The Styling page lets you control how each display type looks on your storefront, with a live preview and no coding required.

How styling works

• Styling is set per display type: Swatch, Swatch card, Pill swatch, Button, and Dropdown. Each type has its own settings.

• Each type is styled separately for the Product page and the Collection page (two tabs), so you can use a larger swatch on the product page and a compact one on collection listings.

• A live preview shows your changes instantly. Click Save to apply them to your store.

Styling applies globally to every product using that display type. To change how a single option is displayed (for example, switch from Swatch to Button), use Configure Variants instead.

Where to find it

1

Open Styling

In the app, go to the Styling page.

2

Pick a display type

Choose the display type you want to customize: Swatch / Swatch card / Pill swatch / Button / Dropdown.

3

Choose the page

Switch between the Product Page and Collection Page tabs to style each surface independently.

4

Adjust and save

Change the settings, watch the live preview, then click Save.

Good to know

• Swatch card and Pill swatch are styled for the product page only (they are not available on collection pages).

• For the full list of every setting and what it does, see Styling settings reference.