How can I select product variants using swatches in Webflow and display the corresponding image for each variant?
TL;DR
- Set up a Products Collection with variant options and images.
- Use a Collection List to display variant swatches dynamically.
- Assign custom attributes (
data-variant,data-image) to swatches. - Add an image element that updates dynamically.
- Use JavaScript to change the image when a swatch is clicked.
- Publish and test to verify swatch interactions update the variant image correctly.
To select product variants using swatches in Webflow and dynamically display the corresponding variant image, follow these steps:
1. Structure Your Product Collection
- Make sure your Products Collection in Webflow includes variant options (e.g., Color, Size) and an image field for each variant.
- If Webflow's CMS doesn't support multiple variant images directly, you may need to use multi-reference fields or custom attributes.
2. Build the Product Template Page
- In the Product Template Page, add a Collection List that dynamically pulls in all variants of the product.
- Create a swatch wrapper (a div) inside the Collection List and bind it to the variant options (e.g., Color Name).
3. Design the Swatch Buttons
- Use a button or div block inside the variant Collection List to act as a swatch.
- Set it to display the corresponding color (for color variants) or variant name using Webflow’s CMS fields.
4. Add Custom Attributes for Variant Selection
- Assign a custom attribute to each swatch button that matches the variant's name or unique identifier (e.g.,
data-variant="Red").
5. Display the Variant Image Dynamically
- Add an image element above or near the swatch section. Set this image to default to the first available product image.
- For each swatch, update the image using custom JavaScript.
6. Apply JavaScript to Change the Image on Swatch Click
- Add an Embed block inside your Product Template page and insert the following JavaScript in the
<body>section:
```javascript
document.querySelectorAll('.swatch').forEach(swatch => {
swatch.addEventListener('click', function() {
let variantImage = this.getAttribute('data-image');
document.querySelector('.variant-image').src = variantImage;
});
});
```
- Ensure that each swatch has a
data-imageattribute containing the corresponding variant image URL.
7. Publish and Test
- Publish your project and test swatch selections to confirm that clicking a swatch updates the variant image correctly.
Summary
To enable swatch-based variant selection in Webflow, you need to:
- Structure your CMS correctly with product variants and images.
- Use Collection Lists to display swatches dynamically.
- Assign custom attributes to swatches for interaction.
- Use JavaScript to change the variant image on swatch selection.
Since Webflow’s default e-commerce setup has limitations with variant images, custom attributes and JavaScript are necessary to build this functionality.