OxifyOxify
Design

Variant swatches

Replace variant dropdowns with color or image swatches.

By default, customers pick a variant from a dropdown. Swatches turn that into clickable color circles or product images.

Turn swatches on

Open your bundle and stay on the Bundle Settings tab.

Find the Swatch Settings card and switch it on.

Choose the Option to display as swatches — for example Color.

Choose a Swatch Type.

Click Save.

Swatch types

TypeShows as
Color swatchCircles or squares of color, all visible at once.
Image swatchSmall product images, all visible at once.
Color swatch dropdownColors inside a dropdown. Good for many variants.
Image swatch dropdownImages inside a dropdown.

Map each variant

The Variant Value / Swatch table lists every value of the option you chose.

For a color swatch, click the circle next to a variant value and pick its color.

For an image swatch, click Upload and add the image for that value.

Repeat for every value. Anything left unmapped falls back to the default.

Size and shape

Under Settings:

  • Swatch size — 10–100px. The default is 25px.
  • Swatch Shape — Circle, Rounded square, or Square.

Square swatches suit image swatches; circles read better for plain colors.

Two variant pickers on the page?

If your theme's own picker is now redundant, turn on Hide theme variant picker in Advanced Settings. See Variant settings.

On this page