Everything you need to set up the Bundle Variant Picker block — from adding variant selectors to your product bundles to configuring color swatches and dropdown menus so customers can choose the exact options they want.
A variant picker is a control that lets customers select from the different options available on a product — things like size, color, or material. When a customer chooses a different option, the product's image, price, and availability update automatically to match their selection.
In the Boardwalk theme, the Bundle Variant Picker is a compact block designed specifically for the Product Bundle section. It displays each product's options as a dropdown menu, or as clickable color swatches when the option is named "Color" or "Colour." When a customer changes a selection, the bundle card's image, price, and availability update instantly — without the page needing to reload. The block only appears on products that have more than one variant; single-variant products are skipped automatically.
Follow these steps to add variant selection to your product bundle cards in the Boardwalk theme.
In your Shopify admin, go to
Online Store → Themes, find Boardwalk,
and click Customize. Navigate to the page
where your Product Bundle section is located using the
page selector dropdown at the top center of the editor.
In the Theme Editor sidebar, find and expand the Product Bundle section. You should see the individual product blocks listed inside it.
Note: If you haven't added a Product Bundle section yet, click Add section and choose Product Bundle from the list first.
Inside a product block within the bundle, click Add block and select Bundle Variant Picker from the list. The variant picker will appear below the product information on that card.
Click on the Bundle Variant Picker block in the sidebar. If your products have color options and you want them displayed as visual swatches instead of dropdown menus, make sure Show color options as swatches is turned on. You can also choose a swatch size that fits your design.
Note: Color swatches require your
products to have an option named exactly "Color" or
"Colour." You also need to configure swatch colors in
your Shopify admin under
Products → (select product) →
Variants. If no swatch data is set up, the option will fall
back to a dropdown menu.
If your bundle contains multiple products, add a Bundle Variant Picker block inside each product block where you want customers to be able to select options.
Click Save in the Theme Editor. Preview your page to confirm the variant pickers are displaying correctly on each bundle card and that selecting different options updates the product image and price.
These settings are available when you click on the Bundle Variant Picker block in the Theme Editor sidebar.
When turned on, any product option named "Color" or "Colour" will display as clickable color circles instead of a dropdown menu. Swatch colors are pulled from your product's variant swatch data in Shopify. If no swatch data is configured, the block uses a built-in set of common color names (e.g., Black, Navy, Red, Beige) as a fallback.
Controls the diameter of each color swatch circle.
Options: Small, Medium, or
Large. Choose a size that fits comfortably
within your bundle card layout.
Here's a closer look at how the Bundle Variant Picker behaves on your storefront and what your customers will experience.
For most product options — such as size, material, or style — the block renders a compact dropdown menu. Each dropdown lists all the available values for that option. Only options with more than one value are shown; if a product only has one size, for example, that dropdown is hidden.
When Show color options as swatches is enabled and the product has an option named "Color" or "Colour," those values are displayed as round, colored circles instead of a dropdown. Swatches can show a solid color, a swatch image (like a fabric pattern), or a fallback color based on common color names. The currently selected swatch is highlighted with a ring border.
When a customer selects a different option — whether from a dropdown or by clicking a swatch — the bundle card updates instantly. The product image, price, compare-at price, and availability all change to reflect the chosen variant, without the page needing to reload.
When a specific variant combination is sold out or unavailable, the corresponding swatch appears dimmed with a diagonal strikethrough line, giving customers a clear visual indicator that the option can't be selected.
If a product in your bundle only has a single variant (the default variant), the variant picker block is automatically hidden for that product. This keeps the bundle layout clean and avoids showing unnecessary controls.
The Bundle Variant Picker includes several features that work automatically — no apps or custom code needed.
The block automatically identifies options named "Color" or "Colour" and can display them as visual swatches. No manual tagging or configuration is required — the detection is based on the option name.
Color swatches can display a small image (such as a fabric texture or pattern) instead of a flat color. If you've uploaded swatch images in your Shopify product settings, they will appear automatically on the swatches.
If a color option doesn't have swatch data configured in Shopify, the block tries to match the color name to a built-in library of common names. For example, "Navy," "Burgundy," "Olive," "Blush," and many more are recognized and displayed with an appropriate color automatically.
When a customer selects a new option, the parent bundle card immediately updates its image, price, and availability to reflect the chosen variant. All updates happen on the page without a reload.
Unavailable variant swatches are automatically dimmed and marked with a diagonal line, so customers can clearly see which options are out of stock at a glance.
The block automatically hides itself for products that only have a single variant, and hides individual dropdown menus for options that only have one value. This prevents unnecessary controls from cluttering your bundle cards.
All text, borders, and swatch outlines automatically adapt to the color scheme applied to your bundle section, ensuring the variant picker always looks consistent with the rest of your design.