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
| Type | Shows as |
|---|---|
| Color swatch | Circles or squares of color, all visible at once. |
| Image swatch | Small product images, all visible at once. |
| Color swatch dropdown | Colors inside a dropdown. Good for many variants. |
| Image swatch dropdown | Images 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.