Variant swatches
Replace variant dropdowns with color or image swatches.
By default, customers pick a variant from a plain dropdown inside each tier. Swatches turn that into clickable color circles or product images.
Swatches appear in the variant rows inside a tier, so they only show when Let customers choose different variants for each item is on in Advanced Settings and the product has options such as Color or Size. See Variant settings.
Turn swatches on
Open your bundle and stay on the Bundle Settings tab.
Find the Swatch Settings card and switch it on with the toggle in the card's header.
Under Swatches, choose the Option to display as swatches — for example Color. The list is built from the option names on your products.
Choose a Swatch Type.
Click Save.
Swatch types
| Type | Shows as |
|---|---|
| Default dropdown | A plain dropdown. The default — no swatches. |
| Color swatch dropdown | Your colors, shown inside a dropdown. Good for many variants. |
| Image swatch dropdown | Your uploaded images, shown inside a dropdown. |
| Product image dropdown | The product's own variant images, inside a dropdown. Nothing to set up per value. |
| Color swatch | A row of clickable color swatches, all visible at once. |
| Image swatch | A row of clickable swatches that use your uploaded images. |
| Product image swatch | A row of clickable swatches that use the product's own variant images. Nothing to set up per value. |
Leaving it on Default dropdown means the swatch settings have no visible effect — pick one of the other six to actually see swatches.
Map each variant
For the two color types and the two image types, a Variant Value / Swatch table lists every value of the option you chose. The product image types read the variant images straight from the product, so they have no table.
For a color swatch, click the color box next to a variant value and pick its color.
For an image swatch, click Choose Image next to a variant value, add a JPG or PNG in the upload window, and click Done.
Repeat for every value. Any value you leave unmapped shows as a blank white swatch.
Size and shape
Under Settings (shown for every type except Default dropdown):
- 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.
Show the selected name
Tick Show selected option name (above the table) to add a line such as Color: Red above each option. With button-style swatches the line includes the selected value. With dropdowns it shows only the option name, such as Size:, because the dropdown already shows the value.
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.