Choosing how variant options display
Bundlex Bundles lets you choose how each variant option appears in the widget, so the selector matches your product and your theme. You set this per option, so color can look different from size.
Find the display controls
- Open the bundle and go to Add-ons > Variant selector.
- Turn on the selector and find the Variant options table.
- Choose a Display type and Preset for each option, then check the preview.
- Save and test a targeted product page with the bundle active.
Options come from the products the bundle targets. If a newly added option is missing, use Reload options. Options with the same display type share one preset, so changing the preset for one also updates the others of that type.
Display types
For each variant option you can choose one of:
- Dropdown: a compact menu, good for long lists like size.
- Color swatch: color samples, with colors auto-detected where possible and shape controlled by the preset.
- Pill / Button: tappable buttons for each value.
- Variant image: each value shown as its own image.
Sold-out options
By default, sold-out values can remain visible with unavailable styling. Selecting an unavailable combination shows a message and prevents adding it. If you would rather hide unavailable values, tick Hide unavailable variants under Advanced > Offers and stock. To hide whole products and offers once they sell out, tick Hide sold-out products and offers in the same card: sold-out add-ons, upsells and gifts disappear, an offer whose bundle product or main product is sold out is hidden, and the widget stays off the page when no offer is left.
This affects the offer's own variant selector and the selectors on fixed cross-sells. Free gifts, upsells, and add-ons already hide sold-out variants, so the setting makes no difference there. For more on why a variant shows as unavailable in the first place, see variant shows as unavailable.
Showing the color name on hover
A color swatch shows the color, not its name, which is a problem when "Sand" and "Stone" look nearly identical. Tick Show color name on hover in the Color swatch style settings and hovering a swatch pops up a small labelled tooltip with the value name.
It appears instantly and is styled to match the widget, rather than the slow grey box the browser shows by default. Customers moving through the swatches with a keyboard get it too.
It's deliberately skipped on phones and tablets. With no hover to speak of, the tooltip would flash over the swatch the customer just tapped and cover the thing they were looking at. This only applies to color swatches; pills already show their names, and variant images show theirs when you tick Show label below image in the Image swatch style settings.
Styling and labels
You can adjust the size, shape, and colors of swatches and pills using the style presets. To hide the option labels, tick Hide variant labels under Style > Widget style > Variant label. Per-item row numbers appear on their own when an offer has more than one item row; they have no switch of their own. There is also an option to hide your theme's own variant picker so only the Bundlex Bundles selector shows.
For how the variant selector behaves when customers pick a variant for each item, see letting customers pick a variant per item.
Was this article helpful?
Your feedback helps us improve our docs.