Select a Shopify variant by clicking its image

Select Shopify variant by clicking product image

A customer lands on your product page. They see four sneaker photos in the gallery: red, blue, black, white. They click the red sneaker photo. Nothing happens. The gallery zooms in on the image, but the variant selector still shows “Blue.” They have to scroll down, find the Color dropdown, and manually switch to Red. This is the default Shopify experience, and it frustrates customers daily.

Merchants want to let customers select a Shopify variant by clicking its image in the gallery. It seems like it should be simple. It is not. Shopify’s data model makes this surprisingly hard to implement. But there is a reliable way to get the same result, and it actually delivers a better experience than the gallery-click approach ever could.

In this post

The problem: gallery clicks do not change variants
Why Shopify does not do this natively
The code approach (Liquid and JavaScript)
The better approach: variant image swatches
How it works: click swatch, variant selected, gallery filtered
Image swatches vs color circle swatches
Setup steps with Rubik Variant Images
Frequently asked questions
Related reading

The problem: gallery clicks do not change variants

This is the number one most-asked question in Shopify Community forums. Search “click image select variant” and you will find 20+ threads going back years, all asking the same thing. Merchants upload product photos for each color. Customers see them all in the gallery. They click a thumbnail expecting the variant to switch. It does not.

Shopify’s gallery is a media viewer. Clicking a thumbnail enlarges the image. That is all it does. When a customer selects a variant from the dropdown, the gallery scrolls to that variant’s featured image. But the reverse does not work. Clicking the image does not select the variant. And all images from every variant remain visible.

Why Shopify does not do this natively

The limitation is structural. In Shopify’s data model, each variant can have exactly one featured image. That image is stored as a property of the variant object. But the product gallery contains all product images, and most of those images are not directly linked to any variant.

Consider a product with 4 colors and 5 photos per color. That is 20 images in the gallery. Shopify knows that image #3 is the featured image for “Red / Medium.” But it does not know that images #1, #2, #4, and #5 also show the red version. Those extra images are just product images floating in the gallery with no variant association.

This means Shopify cannot determine which variant a gallery image belongs to unless it is the featured image. And even if you could map every image to a variant, some images show multiple variants (a lifestyle shot with several colors). The mapping is not clean. For a deeper look, see our complete guide to Shopify variant images.

The code approach: Liquid and JavaScript

Some developers try to solve this with custom code. The approach: loop through variants in Liquid, output a data attribute on each gallery thumbnail with the variant ID, then write JavaScript that listens for clicks and triggers a variant change. A simplified version:

// Pseudocode - simplified for illustration
document.querySelectorAll('.product-gallery img').forEach(img => {
  img.addEventListener('click', () => {
    const variantId = img.dataset.variantId;
    if (variantId) {
      const select = document.querySelector('select[name="id"]');
      select.value = variantId;
      select.dispatchEvent(new Event('change'));
    }
  });
});

This works in limited cases but breaks constantly. Here is why.

First, it only works for featured images. Your other 4 photos per color do not have a variant ID, so clicking them does nothing. Second, every theme structures its gallery HTML differently. Selectors that work on Dawn break on Impulse, Prestige, and Warehouse. Third, theme updates change the DOM structure without warning. Fourth, themes that lazy-load images or use JS-rendered galleries require hooking into undocumented theme JavaScript.

If you have a developer on staff and never update your theme, custom code can work. For everyone else, it is a maintenance problem. There is a more reliable path.

The better approach: variant image swatches

The question merchants ask is: “How do I click a gallery image to select a variant?” The answer that actually works is the reverse: click a swatch to select the variant AND filter the gallery to show only that variant’s images.

This is what Rubik Variant Images does. Instead of trying to hack the gallery into a variant selector, it replaces the default variant dropdown with visual swatches. Those swatches can be product image thumbnails. The customer sees a row of small product photos below the variant option name. They click one. Two things happen instantly: the variant is selected, and the gallery filters to show only images assigned to that variant.

This approach works because it does not fight Shopify’s data model. It extends it. Rubik lets you assign multiple images to each variant (not just the one Shopify allows), then uses those assignments to filter the gallery on selection. Read more about assigning multiple images per variant.

How it works: click swatch, variant selected, gallery filtered

A customer lands on a sneaker page with 4 colors. Instead of a dropdown, they see a row of four small product thumbnails. They click the red sneaker thumbnail. Two things happen: the Color option switches to “Red,” and the gallery filters to show only the 5 images assigned to the red variant. The 15 images from other colors disappear.

This is better than the original “click gallery image to select variant” concept for three reasons. One, the customer sees all color options at once in a visual row, not buried in a scrollable gallery. Two, the gallery gets cleaned up to show only relevant images. Three, it works consistently across all Shopify themes because the app handles theme integration. You can see it working on the Rubik live demo store.

Filtering the gallery is the feature that most merchants do not realize they need until they see it. For more details on how gallery filtering works, see how to show only selected variant images on Shopify.

Image swatches vs color circle swatches

Rubik supports multiple swatch types. The two most relevant here are image swatches and color circle swatches.

Color circle swatches show a small colored circle for each variant. These work well when color names map clearly to solid colors: “Red,” “Navy,” “Black.”

Image swatches show an actual product photo as the swatch. Instead of a red circle, the customer sees a tiny photo of the red sneaker. This is more useful when color names alone are not enough. “Ocean Mist,” “Sunset Blend,” “Marble Grey.” A color circle cannot tell you what those look like. A product thumbnail can.

Image swatches are the closest thing to “clicking a product image to select a variant.” The swatch IS a product image, just presented in the variant selector area. When the customer clicks it, they are clicking a product photo and selecting a variant. For products with patterns, prints, or multi-colored designs, image swatches are the clear winner. For simple solid colors, either type works. See swatches vs dropdowns for a full breakdown, and how to fix color swatch accuracy if your swatch colors do not match your photos.

Image swatches also have a measurable impact on conversions. We cover the numbers in variant image swatches and conversion rates.

Setup steps with Rubik Variant Images

Getting variant image swatches running takes about 15 minutes. Here is what to do.

Step 1: Install the app

Install Rubik Variant Images from the Shopify App Store. It works with all themes through Shopify’s app embed system. No theme code editing required.

Step 2: Assign images to variants

Open a product in the Rubik dashboard. Drag images to the variant they belong to. Assign 5 photos to Red, 5 to Blue, 5 to Black. You can also mark images as “common” so they appear for every variant (size charts, brand logos).

If you have many products, use the bulk assign feature or the AI auto-assign tool. It analyzes your images and matches them to the correct variant based on visual similarity.

Step 3: Enable image swatches

In the app settings, choose “Image” as the swatch type for the Color option. Rubik uses the featured variant image as the swatch thumbnail. You can also upload custom swatch images if you prefer a specific crop or angle.

Step 4: Enable gallery filtering

Turn on gallery filtering in the app settings. When a customer picks Red, only the 5 red images show. Everything else is hidden. This works alongside the swatches automatically.

Check the result on your product page. Click through each swatch and confirm the variant changes and the gallery filters correctly. For detailed documentation, visit the Rubik docs. For a broader view of product page improvements, see the Shopify product page optimization checklist. And if you are evaluating other apps, read our comparison of Shopify variant image apps.

Try Rubik Variant Images free

Try Rubik Combined Listings free

See it in action

This short demo shows Rubik Variant Images working on a live Shopify store. Watch how clicking a swatch selects the variant and filters the gallery simultaneously.

Frequently asked questions

Can I click a Shopify product image to select the variant?

Not with Shopify’s built-in features. The gallery does not trigger variant selection on click. You can achieve the same result with variant image swatches, where the swatch displays a product photo thumbnail and clicking it selects the variant while filtering the gallery.

Does this work with all Shopify themes?

Rubik Variant Images works with all Shopify themes, including Dawn, Impulse, Prestige, Warehouse, and custom themes. The app integrates through Shopify’s app embed system rather than modifying theme code directly. Check the full FAQ for theme-specific details.

What is the difference between image swatches and color swatches?

Color swatches show a small colored circle or square representing the variant’s color. Image swatches show an actual product photo as the swatch. Image swatches work better for patterns, prints, and multi-colored products where a single color circle cannot represent the variant accurately.

Can I group separate products so they behave like variants with image swatches?

Yes. If you have hit Shopify’s variant limits or prefer separate product listings per color, you can use Rubik Combined Listings to group products as variants. The grouped product page shows image swatches for each product, and clicking a swatch loads that product’s images.

Will gallery filtering slow down my product page?

No. Gallery filtering hides and shows images using CSS and lightweight JavaScript. No additional images are loaded. The images are already on the page. Filtering simply controls which ones are visible. If anything, showing fewer images at a time can improve perceived performance on mobile.