Shopify product gallery: show images by variant selection

The Shopify product gallery is the single most important visual element on a product page. When a shopper lands on a PDP, they do not read the title first, and they do not read the description. They look at photos. If those photos do not match the variant they are about to buy, the trust drops and the sale goes with it.

This post is about the gap between how the Shopify product gallery works out of the box and how shoppers actually expect it to behave. We will cover the default behavior, why filtering matters for UX, the two technical approaches available, and how bound-based filtering with featured images beats both of them for real-world catalogs.

If you have already read our Shopify variant images complete guide, this is the deeper dive on the gallery-level implementation. Less strategy, more mechanics.

How the Shopify product gallery works by default

Every Shopify theme renders the product gallery from a single Liquid loop over product.media. That collection returns all media attached to the product in the order set by the admin. Variants do not have their own nested media arrays. A variant has exactly one pointer: variant.featured_media.

When a shopper clicks a variant, most themes do one of two things. Either they scroll the gallery to the featured media for that variant, or they do nothing at all and the gallery stays where it was. Neither behavior filters the other images. Red, blue, green, and yellow photos remain visible regardless of which option is active.

Dawn, Craft, Impulse, Prestige, Warehouse, and the entire free and paid theme catalog behave this way. It is not a theme bug. It is how Shopify handles variant media natively. The platform simply does not have a built-in concept of “images belonging to a variant” beyond the single featured image.

Why gallery filtering matters for UX

Shoppers process product photos in under two seconds. The Baymard Institute research team has documented this repeatedly: a cluttered gallery forces extra cognitive load at the exact moment the shopper is trying to decide whether this variant is the one they want.

The worst case is a color-varied product shown as a 24-image gallery. A shopper clicks “Olive”. They now have to scan 24 photos, identify which 4 of them are olive, and mentally filter out the other 20. Most shoppers will not do that work. They will either buy something else or leave.

A filtered gallery takes that cognitive load to zero. Click “Olive”, see only the 4 olive photos. The shopper does not have to think. Conversion on the PDP goes up because friction goes down. This is the same logic behind color swatches over dropdowns: remove steps, remove guesswork, remove friction.

Two approaches to filtering the gallery

Show/hide approach

Tag each gallery image with a variant identifier via a data attribute. On variant change, hide elements that do not match. Show the ones that do.

This is the approach most DIY theme customizations take. It works, but it scales badly. You need a tagging system. You need to update tags every time images change. You need to write Liquid snippets per product or use alt text hacks. The maintenance cost is high enough that most merchants abandon it after a few dozen products.

Bound-based filtering approach

Instead of tagging every image, treat the variant featured image as a boundary marker. All images between one featured image and the next belong to the same variant. The admin does not tag anything. They just arrange images in the correct order in the Shopify editor.

This approach is more elegant. It scales to any number of images per variant. It does not require per-image metadata. And it works with the existing Shopify admin workflow. No retraining, no new process for the content team.

Bound detection with featured images

Here is the logic in plain terms. Say a product has 3 variants (Red, Blue, Green) and 9 images. The admin sets image 1 as the Red featured image, image 4 as Blue, and image 7 as Green. In the Shopify gallery they appear in this order:

Red front (featured for Red)
Red back
Red detail
Blue front (featured for Blue)
Blue back
Blue detail
Green front (featured for Green)
Green back
Green detail

The algorithm walks the gallery. When it hits a featured image, it starts a new group. Images 1-3 become the Red group, 4-6 become Blue, 7-9 become Green. When the shopper picks Blue, the gallery shows only images 4-6.

No renaming. No tagging. No per-image metadata. The admin workflow is just “arrange the images in order and set the variant featured images correctly,” which is what most admins already do.

How Rubik Variant Images implements it

Rubik Variant Images uses bound-based detection as its default bulk assignment method. You install the app, run bulk assign on your catalog, and the app walks every product’s gallery looking for featured image boundaries. Within seconds per product, it writes the variant-to-image mapping into metafields attached to the product.

On the storefront, the app reads those metafields at page load. There is no external API call. When the shopper clicks a variant or swatch, the app hides or shows gallery items based on the metafield data. The variant selection fires both through the native Shopify variant picker and through the app’s own custom swatches if you enable them.

Two other assignment methods are available if bulk does not fit your catalog. Manual assignment lets you drag images to variants in the app UI. AI auto-assign (per product only) uses Claude to analyze the product name, variant name, image filename, and alt text, then proposes an assignment for you to review. You pick whichever matches your workflow.

Performance considerations

Gallery filtering is cheap in the browser. Hiding a DOM node is O(1). The expensive part is the data model: where does the variant-to-image mapping live, and how does it get to the client?

Some variant image apps pull that mapping from an external server. Every page view triggers a cross-origin request. Good for the app vendor, bad for Core Web Vitals. The Largest Contentful Paint and Interaction to Next Paint scores both suffer.

Metafield-based apps (including Rubik Variant Images) embed the mapping into the product data Shopify already sends with the page. No extra request, no external API, no third-party DNS resolve. The data arrives with the HTML. Paired with proper image sizing and lazy loading, this keeps PDPs fast even on 30-image galleries.

For a full speed audit of your product pages, run them through our Shopify SEO checker and the wider product page optimization checklist. Gallery filtering is one lever. There are 20 more worth checking.

And if your variant count itself is the bottleneck, see the Shopify variant limit guide for 2026. Once you pass 100 variants, gallery filtering alone will not save you. You need combined listings as well.

FAQ

Does the Shopify product gallery filter by variant by default?

No. The default gallery shows all product media regardless of which variant is selected. At most, the gallery scrolls to the one featured image for the selected variant.

Can I filter the gallery with just theme code?

Yes, with effort. You need to tag images, write JavaScript to listen for variant changes, and maintain the mapping across theme updates. For small catalogs this is fine. For 50+ products it becomes a maintenance burden.

What is bound-based filtering?

It uses variant featured images as markers. All images between one featured image and the next belong to the same variant. This avoids per-image tagging and works with the existing Shopify admin workflow.

Does gallery filtering affect SEO?

Hidden images still exist in the DOM, so Google can still crawl them. The main SEO impact is indirect: a better gallery means a lower bounce rate and higher engagement signals, both of which feed into ranking over time.

Does it work with custom variant pickers?

Yes. Rubik Variant Images supports both native and custom pickers. If your theme uses a page builder like PageFly or GemPages, the swatch event still fires and the gallery responds.

What about video in the gallery?

Video is gallery media in Shopify, so bound detection treats it like any other item. You can assign a video to a variant group just like a photo.

What if I want collection page swatches too?

Collection page swatches are a separate feature handled by Rubik Combined Listings. See the separate variants on collection pages guide for the approach.