Styling settings reference

A complete reference of every styling setting, grouped by purpose. Not every setting applies to every display type, the Applies to column shows where each one is available.

Size & layout

Setting	What it does	Applies to
Width / Height	Size of each swatch or card (in px)	Swatch, Swatch card
Swatch size	Size of the small thumbnail inside a pill	Pill swatch
Padding (left-right / top-bottom)	Inner spacing of the element	Pill swatch, Button, Dropdown
Spacing	Gap between options	Swatch, Swatch card, Pill swatch, Button
Alignment	Left, Center, or Right alignment of the option row	Swatch, Swatch card, Pill swatch, Button

Border & states

Borders can be styled differently for the default, hover, and selected (active) states.

Setting	What it does	Applies to
Border radius	Roundness of corners (50 = full circle for swatches)	All types
Border width	Thickness of the border	All types
Border color	Default border color	All types
Hover border color	Border color on mouse hover	All types
Active border color	Border color of the selected option	Swatch, Swatch card, Pill swatch, Button

Text & price

Setting	What it does	Applies to
Font size	Size of the option text	Swatch card, Pill swatch, Button, Dropdown
Font weight	Regular, Semi-bold, or Bold	Swatch card, Pill swatch
Text align	Alignment of the label text	Swatch card, Pill swatch
Text color / Hover / Active	Label color in each state	Swatch card, Pill swatch, Button, Dropdown
Background color / Hover / Active	Element background in each state	Swatch card, Pill swatch, Button, Dropdown
Show price	Show the variant price next to the option	Swatch card, Pill swatch
Price font size / Price color	Style of the price text	Swatch card, Pill swatch
Media color	Tint of the small media thumbnail	Pill swatch

Hide extra swatches

Keep long option lists tidy by limiting how many swatches show at once.

Setting	What it does	Applies to
Hide extra	Turn the limit on or off	Swatch, Swatch card, Pill swatch, Button
Hide extra by	Count (show a limited number) or Carousel (scroll through)	Swatch, Swatch card, Pill swatch, Button
Show limit values	How many options to show before hiding the rest	Swatch, Swatch card, Pill swatch, Button
Count extra event	When the "+N" badge is clicked: Show all or Redirect to product page	Swatch, Swatch card, Pill swatch, Button
Count extra font size / text color	Style of the "+N" badge	Swatch, Swatch card, Pill swatch, Button

Collection page only

These settings appear on the Collection Page tab.

Setting	What it does	Applies to
Show option name	Show the option name (e.g. "Color") above the swatches	Swatch, Button, Dropdown
Option name font weight	Weight of the option name text	Swatch, Button, Dropdown
Selected value font weight	Weight of the selected value text	Swatch, Button, Dropdown
Change image on hover	Update the product image when hovering an option	Swatch, Button, Dropdown

Change image on hover has its own guide, see How to change image on hovering.