How to Configure Product Variants in the Bundle Builder

In this article:

• Where to find these settings

• Choosing a selector type

  • Dropdown

  • Swatches

• Swatch configuration

  • Option type

  • Option layout

• Visual settings: size and shape

• End-to-end example

• FAQ

Where to find these settings 

Go to Content tab → Variant selector section inside the Bundle Builder.

Choosing a selector type 

This controls the overall interaction pattern customers use to choose a variant (size, color, material, etc.) on each product card in the bundle.

Dropdown

Default: Dropdown is the default selector type.

Customers click a field to open a list of available variants and select one. No additional configuration required.

When to use: Use dropdown when products have many variants, when variant names are long, or when the distinction between options is best communicated in text (e.g., "Lavender & Chamomile" vs. "Eucalyptus Mint"). Also the safest fallback if you haven't configured swatches yet.

Swatches 

Default: Off — swatches are not active until you select this option and complete the setup.

Customers select variants by clicking a visual element — a color circle, an image thumbnail, or a text label button — instead of a dropdown menu.

When to use: Use swatches when the visual difference between variants is part of the buying decision (colors, prints, materials, shades). Swatches reduce clicks and make variant selection faster, especially on mobile. Not ideal for products with many variants (6+) where a dropdown is more scannable, or when variant names are too long to fit a label.

To activate: select Swatches as your selector type, then click Set up swatches to configure the appearance.

Swatch configuration 

This section appears in the swatches setup modal after you click Set up swatches.

Option type

Specifies which product attribute you're configuring the swatch for — for example, Color, Size, or Title.

Set this to match the variant option name as it appears in your Shopify product. If your product has multiple option types (e.g., Color and Size), you configure each one separately.

Option layout 

Defines how the swatches for this option type are displayed. Options:

Default dropdown — a standard list, identical to the top-level dropdown selector. Use this as a fallback if you want swatches on one option type but a plain dropdown on another.

Color swatch — solid color circles or squares. Use this for color variants. You'll need to ensure variant colors are mapped correctly in your product setup.

Image swatch — small product image thumbnails. Use this for print, pattern, or material variants where a photo communicates the difference better than a color. Requires product images to be set per variant in Shopify.

Color dropdown / Image dropdown — a dropdown menu that includes a color or image preview alongside the variant name. Use these when you have many variants and want the scanability of a dropdown with a visual cue. Good middle ground for products with 6+ color or image variants.

Label swatch — clickable text buttons. Use this for size options (S, M, L, XL) or any short text option where you want a button-style selector instead of a dropdown.

Visual settings: size and shape 

These settings control the appearance of swatches on product cards.

Swatch size

Drag the slider to increase or decrease how large the swatches appear on the product card.

When to adjust: Increase size if swatches are hard to tap on mobile. Decrease if the product card feels cluttered, especially when a product has many variants displayed at once.

Swatch shape

Choose from three shapes:

• Circle — standard for color swatches; conventional and widely recognized.

• Square — works well for image swatches or when you want a grid-like visual.

• Rounded — a softer square; suits brands with rounded design aesthetics.

When to adjust: Match the swatch shape to your store's overall design language. Shape doesn't affect function, only appearance.

End-to-end example: apparel bundle with two variant types

Scenario: You sell a "Mix & Match" activewear bundle. Each product has two variant options: Color and Size. You want color shown as clickable swatches and size shown as label buttons.

Settings to configure:

1. Selector type: Swatches

2. Click Set up swatches

3. Option type: Color → Option layout: Color swatch → Shape: Circle → Size: medium

4. Option type: Size → Option layout: Label swatch

5. Save

Result: On each product card, customers see color circles to pick their color, and S/M/L/XL text buttons to pick their size — without opening any dropdowns. Both options are visible and tappable in one view.