How styles work

Styles control how option widgets look — swatches, buttons, tabs, dropdowns, tiles, and cards — per storefront surface.

A style is a saved look for an option widget: which template it uses (swatch, button, tab…) plus all its visual settings (size, shape, borders, colors, hover effects…). Groups reference styles, so one style can dress many groups — edit it once and every group using it updates.

You don't have to design anything. Pick a ready-made style that fits your brand and you're done — the style editor is there only when you want to fine-tune further.

One style can dress many groups — edit it once, every group updates.

Two surfaces

Styles are managed per surface, matching the two tabs on the Styles page:

Surface (tab)	Where it renders
Product page	The option widget on product detail pages.
Collection page	The compact widget on product cards in collections, search, and featured sections. This is the same surface labeled On product card when you pick a style per option in the group editor.

Quick view reuses the Product page style — it isn't a third tab or a separate style to configure.

Each option in a group picks one style per surface — or Hidden to skip a surface entirely (see Appearance in the group editor).

Default styles

On install, two ready-to-use button styles are created (one per surface), so new groups render immediately. New options are prefilled with them.

The Styles page

Your saved styles, plus more to explore below.

• Your styles — the styles you've saved, with Customize, Rename, Duplicate, Delete, and an In use badge when a group references the style.

• Explore more styles — ready-made presets to add with one click; Browse all opens the full catalog. See Style library.

In this section

• Style library — the 9 templates and their preset catalog. Start here.

• Customize a style — optional fine-tuning: every control in the style editor.