Style library

Every style is built on one of 9 templates. Presets in the Explore gallery are pre-configured looks — add one and it becomes an editable style of your own.

Templates

Every template is a starting point you can customize.

Template	Kind	Look
Swatch	swatch	Round/square color or image chips with hover tooltip. The classic color swatch.
Button	button	Boxed or borderless text buttons.
Button with price	button	Two-row buttons showing the value name and the linked product’s price.
Chip	chip	Pill chips — solid or frosted-glass — with a leading color dot and a selected check.
Tab	tab	Underline tabs or an iOS-style segmented control.
Tile	tile	Image tiles with a name overlay and a check badge when selected.
Dropdown	dropdown	A select menu; rows can show text, a color dot, or a thumbnail.
Card	card	A vertical stack of selectable radio cards.
Card with image	card	Variant-image tiles with name and price.

Surface availability

All templates are available on the Product page surface. The Collection page surface ships presets for the compact templates: swatch, chip, tile, dropdown, and button. (Cards render in tighter space, so the large card/tab templates are product-page oriented.)

Presets (“Explore more styles”)

The gallery is filterable by kind — Swatches, Buttons, Cards, Tabs, Dropdowns — and split by surface tab. Examples of shipped presets:

• Product page: Color & image swatch, Button, Button without border, Button with price, Dropdown, Underline tabs, Image tiles, Selectable option cards, Color chips with checkmark, Minimal ring + tooltip, segmented and underline tab variants…
• Collection page: Mini swatch, Chip with dot, Mini tile, Square swatch, Compact dropdown, Text button…

Filter by surface and search to find the right template fast.

Click Add on a preset to copy it into Your styles, then customize it freely — presets are starting points, not locked designs.

Managing your styles

• Customize — opens the style editor.
• Rename / Duplicate / Delete — from the card’s menu. Duplicating is the safe way to experiment with a style that’s already In use.

A style marked In use is referenced by at least one group, so it can’t be deleted. Edits to it apply to all of those groups on your storefront instead.

Was this helpful?

Report an issue