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.

https://storage.crisp.chat/users/helpdesk/website/-/a/9/8/f/a98f8957f7b13800/07810769-a1e2-4ae9-bc05-63abce_j5bnyb.png

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

Button without border has no border settings. It uses a hover glow and an active divider instead — see Button without border below.

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.

Button without border

Premium · styled for both the Product page and Collection page

A borderless variant of Button. Because it has no outline, it drops all border and background settings and instead uses a soft hover glow and an active divider to show state.

Setting	What it does
Font size	Size of the option text
Spacing	Gap between options
Alignment	Left, Center, or Right
Text color / weight	Default label color and weight
Hover text color / weight	Label color and weight on hover
Hover glow color	Soft glow shown around the option on hover (replaces the hover border)
Active text color	Label color of the selected option
Active divider color	Color of the divider marking the selected option (replaces the active border)
Hide extra swatches	Same limit / carousel / "+N" options as Button (see above)

Unlike Button, there are no border, border-radius, padding, or background settings here — that's what makes it borderless.

Desktop vs. Mobile

Every setting above can be given a separate value on Mobile. Switch to the Mobile tab on any display type, then tick a field to override it — an unticked field keeps following its Desktop value. See Desktop and Mobile settings for how this works.

Updated on: 25/09/2026

Was this article helpful?

Thank you!