Styles

A style is a reusable look for an option: a display type plus its size, shape, colours and details. Options point at styles, so editing one style updates every option that uses it.

How styles work

Instead of designing every option separately, you keep a small library of styles and assign them. Color and Pattern can share the same round swatch style while Size uses a button style.

Editing a style changes it everywhere

When a style is in use, its editor shows Used by N options. Saving changes how it looks everywhere it is used.

To change the look of one option only, duplicate the style first and assign the copy to that option. See Create your own style.

Product page and product card styles

The library has two tabs, Product page and Product cards. Every style belongs to one of them, and the pickers on the Options page only offer styles from the matching tab.

Tab	Display types available
Product page	All twelve: Color swatch, Variant image, Buttons, Button pill, Image swatch, Swatch in pill, Dropdown with swatches, Dropdown, Polaroid, Button (no border), Button with price, Theme default.
Product cards	The seven that fit in a product grid: Color swatch, Image swatch, Variant image, Swatch in pill, Buttons, Button pill, Button (no border).

Built-in styles and your styles

Kind	What you can do
Built-in	One per display type, ready to use. You can change its size, shape, colours and details, but not its name or display type, and it can't be deleted.
Custom (Your styles)	Copies you make with Duplicate or Create style. Fully editable, and deletable once no option uses them.

Reading the library

The numbers at the top count Styles, styles In use and Custom styles on the current tab.
Each card shows a live preview, a Built-in or Custom badge, and Used by N options or Not used by any option.
Customize opens the editor. The … menu offers Duplicate and, for custom styles, Delete.

Delete a style

1
Make sure nothing uses it
A style can only be deleted when no option uses it. In Options, give those options a different style and save.
2
Delete it
In Styles, open the style's … menu, click Delete and confirm. This can't be undone.

If the style is still in use, the app tells you how many options depend on it instead of deleting it.

In this section

Create your own styleDuplicate a built-in style or start fresh.Size, shape and layoutOverall size, six shapes, long rows.Tooltips and pricesValue names on hover and prices per value.Advanced stylingBorders, hover effects, colours and more.

Need help?

Open the app and click Chat with us on the Dashboard for free setup assistance, or contact us with your store address and what you are stuck on.