Create your own style
Create your own style when the built-in ones are close but not quite right, or when you want two looks of the same display type, for example small and large colour swatches.
Suitable for
Matching swatches to your brand, giving one option a different size than another, or preparing a look for a style rule.
Create a style
- 1
Open Styles and choose the tab
Go to Styles and pick Product page or Product cards, depending on where the style will be used. A style stays on the tab it was created on.
- 2
Start from a copy or from scratch
To start from a built-in look, open its … menu and click Duplicate; the copy opens in the editor. To start fresh, click Create style at the top of the page.
Duplicate in a style's menu - 3
Name it and choose the display style
Give the style a Name you'll recognise when assigning it. Only you see it; it can be up to 40 characters and must be unique.
The current display style shows with a sample. Click Change style to pick another. The window groups the types as Popular, More swatches, Dropdowns, More buttons and Other, each with a preview.
The Change style window - 4
Set the size and look
Pick an Overall size, a Shape and what happens when there are many values. See Size, shape and layout.
- 5
Set tooltips and prices
In Labels, choose whether value names show on hover and, on product page styles, whether each value shows a price. See Tooltips and prices.
- 6
Fine-tune in Advanced (optional)
Borders, hover effects, colours, text and spacing. See Advanced styling.
- 7
Save
Click Save in the save bar.
Preview with your own products
The preview beside the editor uses one of your real products, not a mock-up. Click Change product (or Preview with a product) to pick another one. When the product has several options, choose which one to show under Option to preview.
Tip
Preview on a product with long value names or many colours to see how the style copes before rolling it out.
Assign the style to options
- 1
Open Options
Go to Options.
- 2
Pick your style
Choose it in the Product page or Collection page picker on each option that should use it. Your styles are listed alongside the built-in ones.
- 3
Save
Click Save.
Troubleshooting
- A preset with this name already exists: pick a different name.
- Your style isn't in the Collection page picker: it was created on the Product page tab. Create or duplicate one on the Product cards tab.
- A setting you expected is missing: some settings only appear for the display types that use them, for example Shape only for swatch types.
- The name and display type fields are missing: you are editing a built-in style. Duplicate it to rename it or change its type.
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.