How to transform dropdown selectors into product swatches for Infinite Options bundles v2

This guide explains how to display color swatches instead of dropdown menus for your Infinite Options bundles. It also includes an optional enhancement that allows product thumbnails to update dynamically as customers make their selections.

After completing this setup, your bundle options will appear as clickable swatches for a more visual shopping experience. The swatches can display either custom images (using metaobjects) or solid colors (via CSS), and the product thumbnail can automatically update based on the option selected.

How to set it up

Step 1: Add the Snippet File

Follow these steps to add the required snippet to your theme:

1. In your Shopify admin, go to Online Store > Themes.
2. Click Actions > Edit code on your active theme.

3. In the left sidebar, locate the Snippets folder.
4. Click Add a new snippet.
5. Name the snippet sb-io-swatches (Shopify will automatically add the .liquid   extension).

6. Copy the full contents of the sb-io-swatches.liquid  file (available for download here) and paste it into the newly created snippet.
7. Click Save.

Once saved, you’re ready to proceed to the next step of the setup.

Step 2: Render the snippet

To display the swatches on your product page, you’ll need to add one line of code inside your product form.

1. Locate your product form file

In Online Store > Themes > Edit code, find the file that contains your product form. Common locations include:

• snippets/buy-buttons.liquid  
• snippets/product-form.liquid  
• sections/product-template.liquid  
• sections/main-product.liquid  

2. Find the product form

Look for the opening product form tag. It will look similar to this:

{%- form 'product',   product,   id: product_form_id,   class: 'form',   ... -%}

3. Add the render line

Directly below the opening form tag, add the following line:

{% render 'sb-io-swatches', product: product %}

Your form should now look like this:

{%- form 'product',   product,   id: product_form_id,   class: 'form',   ... -%}  {% render 'sb-io-swatches', product: product %}

4. Save the file

Click Save once the code has been added.

Step 3: Choose your swatch style

The custom snippet includes built-in color support for 100+ common color names. If your option values use standard color names such as “Red”, “Blue”, “Mocha”, “Coral”, or “Navy”, the snippet will automatically match them to the correct HTML color. No additional setup is required for these standard names.

You only need to configure custom swatches if:

• Your option name is not a standard color (for example, “Sugar Rush” or “Ocean Breeze”)
• You want to use a specific shade that differs from the default
• You prefer to display an image instead of a solid color

If you need custom swatches, you can choose one of the following methods:

Option A: Image swatches (using metaobjects)

Choose this option if you want each swatch to display a custom image, such as a texture, pattern, or product photo.

1. In your Shopify admin, go to Settings > Metaobjects.
2. Click Add definition.

3. Name the definition product-swatches.

• Add the following fields:

• name (Single line text) — This should match your option name exactly (for example, “Mocha”).
• image (File > Image) — Upload the image you want to use as the swatch.

4. Save, then go to Content > Metaobjects > product-swatches
5. Add an entry for each color option with its swatch image

Option B: Custom color swatches (using CSS)

Choose this option if you want to use solid colors only. No metaobjects are required.

1. In your Shopify admin, go to Online Store > Themes > Edit theme.
2. Click Theme Settings (gear icon in the bottom-left corner).
3. Locate and open the Custom CSS section.

1. Add a CSS rule for each of your bundle option values.

For example, if your bundle options are called “Red”, “Mocha”, “Coral”, and “Dusty Rose”, you can add:

.sb-io__swatch[data-option-value="Red"] { background-color: #FF0000 !important; } .sb-io__swatch[data-option-value="Mocha"] { background-color: #8B4513 !important; } .sb-io__swatch[data-option-value="Coral"] { background-color: #FF7F50 !important; } .sb-io__swatch[data-option-value="Dusty Rose"] { background-color: #DCAE96 !important; }

Important: The data-option-value   must match your bundle option value exactly, including capitalization (case-sensitive).

You can also mix and match methods. The snippet checks for metaobject images first and, if none are found, falls back to CSS-defined colors. This allows you to use image swatches for some options and solid colors for others.

About product thumbnails

The small product image displayed next to each option group is automatically generated. It pulls the featured image from each child product included in your bundle. When a customer selects a swatch, the thumbnail updates dynamically to reflect that product’s image.

No additional configuration is required. Just ensure that each child product has a featured image uploaded in Shopify.

Troubleshooting

Swatches not appearing: Make sure the snippet is added in the correct file and rendered inside the product form. Also, confirm that the product is set up as an Infinite Options bundle.

Add to Cart not working: The snippet must be placed inside the <form>   tags. You can verify this by checking for hidden input fields in your browser’s developer tools.

Swatch displaying as text instead of color: Confirm that your CSS data-option-value   matches the bundle option value exactly, including capitalization. Use your browser’s Inspect Element tool to check the actual value being rendered.

Product thumbnail not showing: Ensure that the child product has a featured image uploaded. Also, verify that the product is published and accessible on your storefront.

Need help?

If you need assistance with setup or customization, please contact our support team at hello@simplebundles.io, and we’ll be happy to help 💛