Variant images and colour swatches on Shopify, answered

Assign each image to the colour it belongs to, and the gallery will drop the rest as soon as a shopper picks a value. Shopify has no native setting for this: its variant image field holds one picture per variant and the gallery always shows every photo on the product. Rubik Variant Images stores the assignment in a product metafield and the theme reads it, so the filtering happens in the theme itself with no request to any server.

Yes, and this is the part Shopify does not do. Native variant images give a variant exactly one picture, which is why a shop with five photos per colour has no way to show four of them. Group as many images as you like behind one option value and the whole group appears when the value is selected, up to Shopify's limit of 250 media on a product.

Assign the images to the option that changes how the product looks, which is almost always colour. With more than one option a variant shows the media its values have in common, so Blue plus Large shows the blue images. You do not have to assign anything to size.

Yes. They are assigned to option values the same way as images and filtered the same way on the product page.

The same mechanism, framed the other way round: once an image belongs to a value, it is hidden for every other value. Nothing is deleted and nothing is hidden in the admin, so your Shopify media list stays as it is.

Turn on hide unassigned images. By default an image you never assigned shows for every variant, which is right for a size chart and wrong for a lifestyle photo of the red one. With the setting on, unassigned images disappear from the product page while remaining available as the collection thumbnail.

Yes, that is exactly what hide unassigned images is for. Collection cards keep using the product's first image while the product page shows only what the selected value owns.

Yes. Sold out and unavailable values can be hidden entirely, or shown with a struck through swatch, separately for the product page and for product cards.

Turn swatches on in the app and pick the option they replace. Three kinds are available and they can be mixed across options: image swatches taken from the variant's own photo or an image you upload, flat colour swatches, and pill buttons for options with no visual such as size. The theme dropdown is replaced, not duplicated.

Yes. The kinds are set per option, so colour can be image or colour swatches while size stays as pill buttons or the theme's own dropdown. This combination comes up constantly in the forums and has no native answer.

This one is usually a theme bug rather than an app problem, and it is worth knowing before you install anything. Shopify's native metaobject swatches read the product from a variable that the card snippet does not always pass through; in several themes the card template refers to the product where it needs the card product, so the swatch data is simply not there to render. If you would rather not patch theme code, card swatches from the app draw from the metafield instead and do not depend on that variable.

Yes. The swatch library holds one image or one colour per option value across every product, so Navy set once applies everywhere that value appears rather than product by product.

They are drawn inside a shadow root, which means your theme's CSS cannot reach into them and theirs cannot leak out. Shape, size, spacing, borders and the selected state are set in a visual editor, and there is a custom CSS field for the rest.

Yes, on the product card, across collection pages, search results and home page listings. Clicking a swatch swaps the card image, and it can also update the card price and the add to cart link so the shopper lands on the variant they chose.

It can. Updating the card price and the add to cart link are separate settings, because some shops want the card to stay on the product's base price.

Not with this app. Splitting one product into several cards, or merging several products into one, is a different job and a different app. This one works on the variants of a single product.

Yes, and on the whole Dawn family: Sense, Refresh, Craft, Spotlight, Rise, Trade, Ride, Studio, Origin, Taste, Crave, Publisher and Colorblock all share one integration, so a fix on one applies to all of them.

Yes. Horizon and its family, Pitch, Atelier, Fabric, Dwell, Heritage, Ritual, Savor, Tinker and Vessel, share an integration in the same way.

More than 350, including Prestige, Impulse, Impact and Focal alongside the Dawn and Horizon families, plus eight page builders. The full list with each theme's store id is published and refreshed from the app once a day.

Many unlisted themes work anyway, because the app also reads Shopify's native variant selector. When they do not, send support the theme and they will map its selector and its gallery. A custom selector can also be pointed at by hand.

No. Enable the app embed on the new theme in the theme editor and check a product page. The assignments live on the products, not in the theme.

The app embed is almost certainly off. Open Online Store, Themes, Customize on the live theme, then App embeds, switch Rubik Variant Images on and save. The app's dashboard has a status card that tells you whether the embed is on, so you can check without going into the editor.

Three things cause this, in order of likelihood: the app embed is off, the product was opened in the app but never actually configured and saved, or the images were assigned to an option the theme's selector does not use, for example size when the selector shows colour.

The storefront reads a metafield that Shopify caches for a short time. Reload the product page after a minute, and check it with the theme editor closed, because a preview session can serve an older copy.

The app sets each variant's featured image to the first image of its value. Drag the image you want into first position, or turn off the setting that overwrites variant featured images in the advanced settings.

Ad feeds read Shopify's own variant featured image, not the theme, so they follow whatever is set on the variant in your admin. If a feed shows the wrong colour, fix the order of the images assigned to that value and let the app rewrite the featured images, or set them by hand in Shopify with the overwrite setting off.

An app that also rewrites variant images or the variant picker can conflict. Tell support which app it is and they will work out a setup where the two coexist, or which of the two should own the picker.

Shopify allows 250 media on a product, and that is the ceiling here too. There is no per variant limit imposed by the app.

The assignment lives in a Shopify metafield and the theme app extension reads it from the page itself. No request goes to our servers while a shopper browses, so a slow or unreachable app server cannot hold up a product page.

No. It installs as a theme app extension, and switching it off leaves the theme exactly as it was.

The assignments are stored on your products as metafields. The app stops rendering, and the gallery goes back to showing everything the way Shopify does by default.

The free plan covers one product with no time limit. Paid plans are 25, 50 and 75 dollars a month for 100, 1,000 and unlimited products. Plans differ only in how many products you can configure and how many images the automatic matcher may look at each month; every feature is on every plan.