How can I select product variants using swatches in Webflow and display the corresponding image for each variant?

To select product variants using swatches in Webflow and display the matching image for each variant, you’ll need to use Webflow Ecommerce, custom CMS structure, and a bit of custom JavaScript for interactivity.

1. Set Up Variant Data in Webflow CMS or Ecommerce

• If you're using Webflow Ecommerce, create Product Options such as "Color" or "Size" with defined values (e.g., Red, Blue).
• For each variant combination, upload a unique image in the product panel that represents that variant.
• If you're using a CMS workaround, create a separate CMS Collection for variant swatches and link them to the main product via a reference field. Each swatch item should contain:
• Option label (e.g., "Red")
• Swatch image or color
• Display image (the image you’ll swap)

2. Add Swatch Buttons to the Product Page

• Use a Collection List (from the variant swatch CMS collection) to list out all the swatches for a product.
• For each swatch:
• Display either an icon, color chip, or thumbnail.
• Add a unique custom attribute such as data-variant="Red" on each swatch button for targeting later.
• Optionally include another attribute like data-image="image-url" if not using Webflow Ecommerce.

3. Display and Set Up the Main Product Image

• Use an Image element to display the main product image.
• Give it a unique ID or custom attribute, like id="main-product-image", so it can be targeted with JavaScript later.

4. Add Custom JavaScript for Swatch Interactivity

• Use Webflow’s Custom Code area (either in the Page Settings or an Embed element) to add JavaScript that listens for swatch clicks and swaps the image.

• Example logic:

• On click of a swatch, get the data-image or data-variant attribute.

• Find the matching image for that variant.

• Change the src of the main product image.

  (Note: Avoid inserting raw <script> tags in your question text. Only describe the logic as done here.)

5. Optional: Update Price and Other Details

• If each variant has its own price, SKU, or inventory, you may need to:
• Use Webflow Ecommerce's built-in variant controls, or
• Use more advanced custom code to dynamically update these fields.

Summary

To show product images per variant using swatches in Webflow, set up product options or a CMS structure for variants, use swatch buttons with identifiable attributes, and add custom JavaScript to change the main image on swatch click. This approach gives full control over visual variant selection, even beyond built-in Webflow Ecommerce features.