How to automatically show product images when switching options (Infinite Options bundle type)

If you're using Infinite Options with your bundle products, you can set up your theme so the main product image automatically updates when a customer selects a different option.

By following the steps in this guide, your product page will dynamically swap the main image to match the selected bundle option. This ensures customers see the correct image for each item as they browse through the dropdown selections, rather than only viewing the parent bundle image.

To enable this functionality, you’ll need to download the two required files here. (sb-image-swap-data.liquid    and sb-image-swap.js   ), and upload them to your theme as outlined in the steps below.

How to set this up in your theme

Step 1: Add the liquid snippet

1. In your Shopify Admin, go to Online Store → Themes → Edit code.

2. Open the Snippets folder in the left sidebar, then add or upload the required snippet file.

3. Upload the sb-image-swap-data.liquid   file to the Snippets folder.

Step 2: Render the snippet in your product template

1. While still in Edit code, locate your product template file. This is typically found in:
   • sections>main-product.liquid, or

   • sections>product.liquid

     (The exact file name may vary depending on your theme.)

2. Add this line somewhere inside the product section, before the closing {% endschema %}     or near the top of the section:

{% render 'sb-image-swap-data' %} 

3. Save the changes.

Step 3: Upload the JavaScript file

1. In the theme code editor, open the Assets folder.
2. Right-click inside the folder and select Upload.
3. Upload the sb-image-swap.js   file.

Step 4: Load the script

1. Open layout/theme.liquid in your theme code editor.
2. Add the following line just before the closing </body>     tag:

<script src="{{ 'sb-image-swap.js' | asset_url }}" defer></script> 

2. Save the changes.

Once you’ve completed the steps above, visit any product page that includes an Infinite Options bundle and change the dropdown selections.

The main product image should automatically fade and update to display the image of the selected bundle component.

If you run into any issues or would like us to take a look at your setup, feel free to reach out!