Skip to main content
Storefront widget & display

How to let customers pick a variant per item (swatches)

By default, every item in a bundle offer shares one variant. Turn on the per-offer variant selector and each customer can choose a size, color, or other option for each item right inside the widget, shown as a dropdown, color swatch, pill, or variant image.

Enable "Show variant selector per offer"

This setting lives in the Variant selector card of the bundle editor. A badge next to the title shows whether it is currently Enabled or Disabled.

  1. Open the bundle you want to edit and find the Variant selector section.
  2. Turn on Show variant selector per offer.

When it is on, customers pick a variant for each item using a selector inside the offer. When it is off, customers use the default variant selector provided by Shopify and every item in the bundle shares the same variant.

What the toggle controls

This toggle governs the main product only. Cross-sell and gift products always show their own picker, because Shopify has no built-in picker for them. So even with the toggle off, an offer's add-on items can still expose a variant choice; the toggle only changes whether the main product gets Bundlex's per-item selector.

Set the display type for each option

Once the toggle is on, Bundlex loads the variant options found on the products this bundle applies to and lists them in a table with three columns: Option, Display type, and Preset. Each row is one option (for example Size or Color).

In the Display type column, choose how that option appears on the product page:

  • Default dropdown - a standard select menu.
  • Color swatch - small color chips. Lets you assign a color to each value (see below).
  • Pill / Button - tappable pills or buttons, optionally with the variant image.
  • Variant image - shows each value as its product image.

You can mix types across options, for example a color swatch for Color and a dropdown for Size on the same product. Click the view (eye) icon next to an option name to show a product that has that option in the preview panel.

Pick a shared preset

The Preset column sets the visual style for a display type. Presets are shared per type: all options that use the same display type share one preset, so changing the preset for one option updates every other option of that type. Color swatch, Pill / Button, and Variant image each have their own set of presets; the dropdown type has no preset.

Choose Custom in the preset menu to open the Swatches style section, where you can fine-tune the styling beyond the built-in presets.

Assign colors for color swatches

When an option uses the Color swatch display type, each of its values gets a color field with a color picker. You can:

  • Set each color manually with the picker or by typing a hex value.
  • Click Auto-detect colors to fill in colors automatically from the value names (for example "Navy" or "Forest green"). Auto-detect only fills values that are still empty and is unavailable once every color is set.

Show the variant image

Turn on Show variant image (available once the selector is enabled) to display the selected variant's image next to the variant selector. This works for any selector type, not just the variant image display type.

Hide the theme variant picker

With the selector enabled you also get Hide theme variant picker. This hides your theme's default variant selector so only Bundlex's picker is visible. The theme's selector is hidden with CSS rather than removed, which keeps the main product image in sync when the variant changes.

If the main product image does not update when a variant is selected, you may need to adjust the Variants block selector in the Bundlex app embed settings so it matches your theme. Reach out to support if you need help with this.

Reload options after editing variants

If you add, rename, or remove variants on your products after setting this up, click Reload options at the top of the variant options table to pull in the latest options. Bundlex confirms with a "Variants updated" message when something changed, or "Reloaded, no changes" when the option set is already current.

If no options appear

The variant options table only shows once Bundlex knows which products the bundle covers. If you see a prompt to select products or collections, set that up in the Show widget on section first. If you instead see "No variant options found for the selected products," the selected products have no variant options to configure.

Was this article helpful?

Your feedback helps us improve our docs.

Thanks - we'll keep improving this article.

Want to chat with our team? Still have a question?

Still need help?

Our team is one click away. Send us a message and we'll get back to you.

We use a few cookies to keep this site working, measure how it is used, and power our chat widget when you open it. See our cookie policy.