Customize a swatch style

How the style editor works, and what the shared setting groups do.

Open the editor

Go to Appearance.
Choose the Product page or Collection page tab — this decides which surface you're editing.
Find the style and click Customize.

The style editor for Color or custom image swatch, with collapsible setting groups on the left and a live Preview on the right

The editor has the settings on the left, grouped into collapsible sections, and a Preview on the right that updates as you change things. Above the preview:

Image / Color — preview the style with image swatches or colour swatches.
Desktop / Mobile — preview at either width.

The hint under the preview — Hover an option to test hover and animation effects — is worth using: hover states are easy to get wrong and easy to check here.

Click Save when you're happy.

Shared setting groups

Most styles share the same vocabulary. Not every style has every group — see the reference.

1, Shape and Layout

Size and position: Shape (Circle, Square, Fit text), Corner radius, Width, Height, Spacing between swatches, and Align content (Left, Center, Right). Button styles use Size (Small, Medium, Large) and Corner (Sharp, Round, Pill) instead.

On the Collection page tab this group also holds Carousel — put the swatches on one scrollable line instead of letting them wrap. It is set per style, and only here; the product-page equivalent is the single Show Carousel checkbox in Settings → Swatch on Product Page.

2, Border

Type (None, Single, Double), Thickness, and a colour for each state: Default color, Hovered color, Selected color.

3, Default style / Hover style / Selected style

Button, pill and dropdown styles use three parallel groups instead of one Border group — the same handful of fields (Text color, Border color, Background color, and sometimes Font weight and Case) repeated for each state. Set all three so a shopper can always tell what's selected.

4, Hover behavior

Shadow — None, One (a glow) or Both (a shadow).
Image zoom in — zoom the swatch image slightly on hover.
Animation — None, Scale up, Scale gentle, Scale down, Float up, Float down, Rotate left, Rotate right.

Animations are not available for swatches in carousel mode.

5, Image

For styles that render an image swatch: Width and Height in pixels, and Background size:

Cover — the image fills the swatch; the edges may be cropped.
Contain — the whole image fits inside the swatch; there may be padding.

Width and Height here are the size the app asks for the image at — not the size of the swatch, which comes from Shape and Layout. Both start at 150 px, while a swatch starts at 35 × 35 px, so by default the app is fetching an image more than four times wider than the chip it ends up in. Bringing the two closer together means a smaller file for every shopper to download:

Swatches rendering at 35 × 35 px → set the image to 35 × 35 px as well.
If it looks blurry at that size, raise it to 50–60 px rather than back to 150.
If you've made the swatch much bigger — say 300 × 300 px for a fabric close-up — raise the image to match, or the 150 px version gets stretched and goes soft.

Because Width and Height are set separately, they also decide the shape of the image area: equal values give a square, a taller Height a portrait, a wider Width a landscape.