How to show variant-specific product images in Webflow

Shopify's native variant image feature only lets you assign a single image per variant. When you need to show multiple images per variant, the default gallery falls short — customers selecting "Red" still see images for Blue, Green, and every other variant.

Storesynk's Image Filtering solves this. It's a built-in Thumbnails feature that automatically filters or reorders images based on the selected variant using image alt texts in Shopify.

Filter vs Reorder

Image Filtering supports two modes:

Filter Mode

Only images whose alt text matches the selected option value are displayed. All other variant images are hidden until a different option is selected.

Reorder Mode

Matching images are moved to the front of the gallery. The remaining images stay visible after them — useful when you want to prioritise relevant images without hiding the rest.

In both modes, the variant's assigned image in Shopify is always included at the front of the gallery.

Prerequisites

• A working Buy Module with a Thumbnails component
• Product images in Shopify with alt texts that include the variant option values (e.g., "Red front view" for the Color option). This is how you assign multiple images per variant — by tagging their alt text with the option value.

Setup

Follow the below steps to configure image filtering on your Thumbnails component.

1. Select your Thumbnails component in the Webflow designer.
2. Open the Storesynk Webflow App panel.
3. Toggle Filter Images on.
4. In the Filter Images By field, select the variant option group to filter by (e.g., Color). You can also connect this field to CMS if you need dynamic option names per product.
5. Choose a Filter Mode:
   • Filter — Only matching images are shown.
   • Reorder — Matching images appear first, followed by the rest.

How it works

When a customer selects a variant option value, Storesynk checks each product image's alt text against the selected value. If the alt text contains the value, the image is considered a match.

For example, if you have a product with Color options Red, Blue, and Green:

1. Set your image alt texts in Shopify to include the color name (e.g., "Red front view", "Red back view", "Blue front view"). This effectively lets you assign multiple images per variant.
2. Set Filter Images By to "Color".
3. When a customer selects "Red", only images with "Red" in the alt text are shown (or shown first in Reorder mode).

Tips

• You can filter by multiple option groups by entering comma-separated values (e.g., "Color, Material").
• Alt text matching is case-insensitive — "red" and "Red" both work.
• The variant's main image assigned in Shopify is always force-included at the front, even if its alt text doesn't match.