Skip to main content
Design & customization

Choosing how variant options display

Bundlex 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.

Display types

For each variant option you can choose one of:

  • Dropdown: a compact menu, good for long lists like size.
  • Color swatch: round color dots, with colors auto-detected where possible.
  • Pill: tappable buttons for each value.
  • Variant image: each value shown as its own image.

Sold-out options

By default, sold-out values stay in the selector and are marked "Unavailable", so customers can see the full range and know what's temporarily out. If you would rather remove them completely, tick Hide unavailable variants in the Advanced tab and they disappear from the dropdowns and swatches instead.

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 and variant images already show their names.

Styling and labels

You can adjust the size, shape, and colors of swatches and pills using the style presets, and show or hide the option labels and the per-item row numbers. There is also an option to hide your theme's own variant picker so only the Bundlex 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.

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.