Swatches Styling

Style every visual detail of Swatch options — Swatch (Single) and Swatch (Multi) — using per-type templates. Both share the same "Swatches" templates.

Overview

Read Types Settings first if you haven't created a template before. This page covers every setting available once you're editing a Swatches template, grouped the same way they appear in the editor's left navigation.

Two element layers are styled separately:

• Swatch — the visual circle/square itself (color or image)
• Item — the whole clickable container around a swatch (swatch + label + price)

Layout

Controls the swatch grid as a whole.

Setting	What it controls	Default	Options / Range
Direction	Whether swatches flow in a row or a column	Horizontal	Horizontal, Vertical
Alignment	How swatches align within their row/column	Stretch	Stretch, Left, Center, Right
Item Spacing	Gap between swatches	12px	0–40px
Items Per Row	Fixed column count, or automatic wrapping	Auto	Auto, 2, 3, 4, 5, 6

Stretch alignment

Stretch makes each row fill the full width of its container — this is what makes the swatch and label alignment fields below actually have a visible effect. With Left/Center/Right, items shrink to their content size instead.

Swatch (Media Element)

Shape & Size:

Setting	What it controls	Default	Range
Swatch Size	Width and height of the swatch	48px	24–120px
Swatch Margin (per side)	Space around the swatch	0px	0–20px
Swatch Shadow	Drop shadow on the swatch itself	No Shadow	No Shadow, Subtle, Medium, Strong

Image Settings (for image swatches):

Setting	What it controls	Default	Options
Image Position	Where the image is anchored if it's cropped	Center	Center, Top, Bottom

Multi-Color Settings (for swatches showing more than one color):

Setting	What it controls	Default	Options / Range
Multi-Color Layout	How multiple colors are arranged within one swatch	Vertical	Vertical, Horizontal, Diagonal, Quadrant
Multi-Color Divider	Color of the line separating each color	Transparent	—
Multi-Color Divider Thickness	Thickness of that line	1px	0–8px

Border & States:

Setting	What it controls	Default	Range
Swatch Border Radius	Corner rounding — 50% makes it a circle, 0% a square	50%	0–50%
Swatch Border Width	Border thickness	1px	0–6px

Per state (Idle / Hover / Selected):

Setting	What it controls	Default	Range
Opacity	Swatch opacity in that state	100%	0–100%
Border Color (Idle, Hover)	Border color in that state	Light gray	—
Auto Color from Swatch (Idle, Hover)	Derives the border color from the swatch's own color instead of a fixed color	Off	—
Auto Color Shade (if Auto Color on)	How much lighter/darker than the swatch color	-20 (idle), -10 (hover)	-100 to 100
Hover Scale (Hover only)	How much the swatch grows on hover	100%	100–120%

Selected state additionally has a Selection Style picker that changes which fields appear:

Selection Style	What it controls	Extra fields
Ring (default)	A ring drawn outside the swatch	Ring Width (1–5px), Ring Offset (1–6px), Ring Color
Border	A thicker border on the swatch itself	Selection Width (1–8px), Selection Color
Shadow	A soft glow around the swatch	Shadow Spread (2–12px), Shadow Color
None	No selection indicator at all	—

Ring, Border, and Shadow styles also get the Auto Color from Swatch toggle (with a shade slider) to derive the selection color from the swatch itself.

Label

Display Mode:

Setting	What it controls	Default	Options
Label Mode	When/whether the value name shows	On Hover	On Hover (tooltip), Always Show, Hide Labels

The remaining Label subsections only apply when Label Mode is Always Show (except Tooltip Appearance, which only applies to On Hover).

Label Position (Always Show only):

Setting	What it controls	Default	Options
Label Position	Where the label sits relative to the swatch	Below	Below, Above, Right, Left

Typography (Always Show only):

Setting	What it controls	Default	Options / Range
Font Size	Size of the label text	13px	8–30px
Font Weight	Weight of the label text	400	300, 400, 500, 600, 700
Text Transform	Case transformation	None	None, Uppercase, Capitalize

Label States (Always Show only) — per state (Idle / Hover / Selected):

Setting	What it controls	Default
Text Color	Label text color in that state	Dark gray
Background	Label background color in that state	Transparent
Auto Color from Swatch (if desired)	Derives the label background from the swatch color	Off (shade default 80)

Set Background before Label Area

Label Area's padding, radius, and margin below only become visible once a state has a non-transparent Background color.

Label Area (Always Show only):

Setting	What it controls	Default	Range
Label Area Padding (per side)	Inner padding around the label text	4px all sides	0–24px
Label Area Radius (per corner)	Corner rounding of the label's background	0px	0–16px
Label Margin (per side)	Space between the swatch and the label	0px	0–24px

Tooltip Appearance (On Hover only):

Setting	What it controls	Default	Range
Tooltip Position	Where the tooltip appears relative to the swatch	Bottom	Top, Bottom
Font Size	Tooltip text size	13px	10–18px
Max Width	Maximum tooltip width	300px	100–400px
Background	Tooltip background color	Near-black	—
Text Color	Tooltip text color	White	—
Border Radius (per corner)	Corner rounding	6px	0–16px
Padding (per side)	Inner padding	8px top/bottom, 12px left/right	0–24px
Shadow	Drop shadow style	Soft	None, Soft, Medium

Item Container

The whole clickable wrapper around a swatch (and its label/price).

Structure:

Setting	What it controls	Default	Range
Item Padding (per side)	Padding inside the item wrapper	0px	0–32px
Item Border Radius (per corner)	Corner rounding of the wrapper	0px	0–999px
Item Min Width (Always Show label only)	Minimum width of the item	0px (auto)	0–200px
Item Inner Gap (Always Show label only)	Gap between the swatch and the label inside the item	8px	0–20px

Border & States:

Setting	What it controls	Default	Range
Item Border Width	Border thickness of the item wrapper	0px	0–6px

Per state (Idle / Hover / Selected):

Setting	What it controls	Default
Background	Item background color in that state	Transparent
Auto Color from Swatch	Derives the item background from the swatch color	Off (shade default 80)
Border Color	Item border color in that state	Transparent
Auto Color from Swatch	Derives the item border color from the swatch color	Off (shade default -20)
Shadow	Drop shadow on the item	None (None, Soft, Medium)

Quantity Input

Only relevant for swatch values that have a price and quantity input enabled.

Style:

Setting	What it controls	Default	Options
Quantity Input Style	Overall visual style of the quantity stepper	Floating Pill	Floating Pill, Classic Stepper, Connected Stepper, Vertical Arrows, Corner Badge

Appearance (which fields apply depends on the style chosen):

Setting	What it controls	Default	Applies to
Text Color	Quantity number color	Dark gray	All styles
Background	Surface color behind the stepper	White	Floating Pill, Connected Stepper, Vertical Arrows
Border Color	Outline color	Light gray	All styles
Accent Color	Color of the +/- affordance or badge fill	Black	Classic Stepper, Corner Badge
Badge Text Color	Color of the number on the badge fill	White	Corner Badge only
Button Style	Solid or outlined +/- buttons	Solid	Classic Stepper only
Underline	Adds an underline beneath the count	Off	Classic Stepper only
Font Size	Size of the quantity number	14px (10–20px)	All styles
Font Weight	Weight of the quantity number	500	All styles

Disabled State

Applied to swatch values that are out of stock or otherwise unavailable.

Setting	What it controls	Default	Options / Range
Disabled Opacity	Opacity of a disabled swatch	40%	0–100%
Overlay Style	Visual treatment layered on top of a disabled swatch	None	None, Diagonal, Cross, Fade
Overlay Color (Diagonal/Cross only)	Color of that overlay	Gray	—
Click Behavior	What happens if a customer clicks a disabled swatch	Prevent	Prevent, Allow with Warning

Animation

Setting	What it controls	Default	Options
Hover Transition	Micro-interaction when hovering a swatch	None	None, Scale Up, Lift, Glow
Animation Target (if not None)	Whether the whole item or just the swatch animates	Container	Container, Swatch
Transition Duration (if not None)	Speed of the animation	300ms	150ms, 300ms, 500ms

Responsive

Setting	What it controls	Default	Range
Mobile Swatch Size	Overrides swatch size on small screens	Uses desktop size	16–80px
Mobile Items Per Row	Overrides column count on small screens	Auto	Auto, 2, 3, 4, 5

Advanced

Setting	What it controls	Default	Range
Focus Outline Color	Keyboard-focus outline color, for accessibility	Blue	—
Focus Outline Width	Thickness of that outline	2px	1–4px

How to Style Swatches

1. Open the Style Settings modal (see Customization Overview)
2. Click Types → Swatches
3. Create a new template or click an existing one to edit it
4. Use the left navigation to jump between Layout, Swatch, Label, Item Container, Quantity Input, Disabled State, Animation, Responsive, and Advanced
5. Watch the Live Preview update as you change settings
6. Click Save in the contextual save bar

Related

• Swatch (Single) and Swatch (Multi) — how to add and configure swatch options
• Types Settings — how templates work and how to assign one to an option
• Accordion Styling
• Tabs Styling
• File Upload Styling