Style variant swatches

Variant swatch appearance is set on the Appearance page, under the Variant swatches tab. Open it from Appearance, or click Customize appearance on the Variant swatches page.

Each of the three styles has its own card, so a Color option styled as circles and a Size option styled as pills can look exactly how you want independently. A live preview updates as you change settings.

General

Settings that apply across all variant swatches:

Gap between swatches - spacing between each swatch.
Hide out-of-stock swatches for products with one option - drop sold-out swatches on single-option products.
Move out-of-stock swatches to the end - sort unavailable swatches last.
Hide single value swatches - hide an option that only has one value, since there’s nothing to choose.

Button swatches

For options styled as Pill / Button:

Shape - square, rounded, or pill.
Font size, Vertical padding, Horizontal padding, and Minimum width - size and proportions of each button.
Out of stock style - show normally, strike through, or cross out.
Hide current value in label - don’t repeat the selected value in the option label.

Color or image swatches

For options styled as Color or image:

Shape - circle, square, or rounded.
Size, and Use custom height for rectangular swatches.
Image fit - contain or cover, for swatches that use an image.
Out of stock style - show normally or cross out.
Hide current value in label.

Variant image swatches

For options styled as Variant image:

Use same settings as color or image swatches - on by default, so variant-image swatches inherit the card above. Turn it off to set their Shape, Size, Image fit, and Out of stock style separately.
Hide current value in label.