Rubik Variant Images Guides

How to show a different video per variant on Shopify

June 24, 2026
a product card where a color swatch reveals a play button video thumbnail

To show a different video per variant on Shopify, you assign the video to that variant as variant media and then filter the product gallery so only the selected variant’s media plays. Shopify already lets a video belong to a variant. What it does not do well is hide the other videos when a shopper picks a color or model. So the demo clip for the black version sits right next to the demo clip for the white version, and both load on the same page.

Here is the part most guides skip. A Shopify variant “image” is not really an image. It is media. And media covers three things: photos, videos, and interactive 3D models. The product gallery treats all of them the same way, which is exactly why a per-variant video is harder than it should be.

Picture a store selling one headphone in four colors, each with a 360 spin video. Or a furniture shop with a short assembly clip per finish. The video exists. It is attached to the right variant. But the native gallery still shows all four clips to everyone, and the shopper has to guess which one matches the swatch they clicked. That is the gap this post fixes.

In this post

What counts as variant media on Shopify

Variant media on Shopify is any media type you can attach to a single variant: an image, a video, or a 3D model. Most merchants only ever attach photos, so they assume the variant slot is image-only. It is not. The same field that holds a color photo can hold a product video or an interactive 3D model, and Shopify will tie it to the variant you choose.

Three media types, one gallery. Here is what each one is good for:

  • Images. The default. Front, back, detail shots, lifestyle photos. One variant can carry several.
  • Videos. Hosted by Shopify or embedded from YouTube/Vimeo. Great for a 360 spin, a fit demo, an assembly walkthrough, or a “how it moves” clip.
  • 3D models. A GLB/USDZ file the shopper can rotate and zoom, sometimes view in AR. Useful for furniture, jewelry, and anything where shape sells.

When you upload media in the Shopify admin, you can associate it with a specific variant. So in theory the black headphone gets the black spin video, and the white headphone gets the white one. The association is real. The problem is what the storefront does with it. We dig into that next.

Rubik Variant Images filtering product page media so only the selected variant shows

Why the native gallery cannot show one video per variant

The native gallery shows every piece of product media at once, no matter which variant is selected. Variant association controls which media jumps to the front when a shopper clicks a swatch. It does not hide the rest. So all your videos, every color’s clip, stay in the gallery the whole time.

Think about what that means for a video-heavy product. Four colors, four 360 videos. A shopper picks red. The red video might scroll into view, but the black, white, and blue videos are still sitting in the same carousel. The shopper swipes past three clips that have nothing to do with the variant they want. On mobile, where the gallery is a thumbnail strip, it is even messier.

And videos are heavier than photos. Every clip that loads is bandwidth the shopper did not ask for. Why should someone looking at the red headphone download the white headphone’s demo? It makes no sense, but that is the default behavior, and Shopify gives you no native toggle to change it.

Some themes try to half-solve this by reordering media so the variant’s first image leads. But reordering is not filtering. The off-variant videos are still there, still loaded, still swipeable. If you want the page to show only the red variant’s video and nothing else, you need media filtering, which lives at the app layer.

How Rubik Variant Images filters video per variant

Rubik Variant Images filters the product gallery so only the selected variant’s media shows, and that filtering covers all three media types: images, videos, and 3D models. Click the red swatch and the gallery collapses to red’s media only, including red’s video. Click white and it swaps to white’s. The off-variant clips are hidden, not just pushed down the strip.

This matters because plenty of variant-image apps stop at photos. We built RVI to treat media as media. A video attached to a variant is filtered the same way a photo is. So is a 3D model. If you sell a watch with a spin video on the steel version and a rotatable 3D model on the gold version, both behave correctly when the shopper switches. One product, the right clip for the right variant, every time.

A few things worth knowing about how the filtering behaves:

  • It works with Shopify’s native variant selector and with custom theme selectors. You do not have to rebuild your product page.
  • It runs across multiple options. Color plus size plus material? Each combination can have its own media set, video included.
  • The swatches are part of the same app. You can render image swatches, color swatches, or pill buttons on the product page, and mix types across options.
  • Rendering happens in a Shadow DOM, so the app’s styling stays isolated from your theme and does not fight your CSS.

If your store splits colors into separate products instead of variants (common for SEO, since each color gets its own URL), the product-page filtering still applies per product. To also show swatches across those separate products on collection pages, you would pair RVI with Rubik Combined Listings for grouped product swatches. RVI handles the product page, RCL handles the collection page. Different jobs.

Assigning a video to a variant with gallery boundaries

You assign a video to a variant the same way you assign an image: through gallery boundaries, where each variant’s first media acts as a separator and the media after it belongs to that variant until the next boundary. RVI reads your Shopify gallery order to figure out which media, video included, goes with which variant. No filename juggling required.

There are three ways to do it, and the right one depends on catalog size:

  1. Manual assign. Drag and drop media onto each variant in the app. This works for images, videos, and 3D models. Best when you have a handful of products and want exact control over which clip lands where.
  2. Bulk assign (image-order based). RVI uses your Shopify gallery order and the featured-image boundaries to group media across hundreds of products in the background. Order your gallery so each variant’s video sits inside that variant’s block, and bulk assign does the rest. This is order based, not filename based.
  3. AI auto-assign. Per product. It reads the product title, the variant option values, the option name, the image filename, and the alt text, then looks at the image itself, and matches media to variants. One product at a time, useful when your gallery order is messy.

We built bulk assign around gallery order rather than filenames on purpose. Filenames in real catalogs are chaos: half are IMG_2931, half are exported from three different photographers, and almost none follow a pattern you can trust. Gallery order, on the other hand, is something you can actually arrange in one place. So if you want a clean per-variant setup, group each variant’s photos and its video together in the Shopify gallery before you bulk assign. Then the video rides along with the variant automatically.

One practical note. Keep the video inside the variant’s block, not floating at the top of the gallery as a shared intro clip. A shared clip at position one will read as belonging to the first variant, not to everyone. If you genuinely want one general video for the whole product plus per-variant videos, place the general one carefully and check it against the boundaries. Setting up your first product? Our guide to checking your variant image setup on Shopify walks through verifying the assignment before you go live.

“Rubik Variant Images helped me organize my product images without needing to duplicate them for each variant, which is great for page speed. […] If you have products with multiple variants and want full control over which images show for each one, without hurting your page load speed, this app is a great solution. It’s lightweight, easy to use once you understand the logic, and the support is excellent.”

Pack Ship Mail Supplies, July 2025, Rubik Variant Images on the Shopify App Store

Does a video per variant slow the page down?

Filtering does not add external load, because RVI is metafield-based with no external API calls and loads with the page itself. There is no separate server round trip to fetch which media belongs to which variant. The assignment lives in a Shopify metafield, so it is there when the product page renders.

That said, video is heavy, and the win here is real: by hiding off-variant media you stop the page from presenting clips the shopper did not pick. For a four-color product with a clip per color, that is three videos the shopper is not being pushed toward. Less clutter, a cleaner gallery, and a product page that answers “which video is mine?” instantly.

For the heaviest videos, you can also lean on Shopify and YouTube/Vimeo hosting, which handle their own delivery and lazy behavior. RVI sits on top of that and decides what shows. If you want the broader picture on using video and 3D on Shopify product pages, our team wrote a fuller breakdown on Shopify variant videos and 3D models over on Craftshift.

Worth saying plainly: most variant-image guides act like the only thing on a product page is photos. They are wrong. Video sells motion and 3D sells shape, and if your catalog has either, filtering it per variant is not a nice-to-have. It is the difference between a gallery that helps and a gallery that confuses.

Want to see it first? Check the live variant images demo store, watch the tutorial video, or read the getting started guide.

Try Rubik Variant Images free
Try Rubik Combined Listings free

Frequently asked questions

Can I show a different video per variant on Shopify?

Yes. Attach the video to the variant as variant media, then filter the gallery so only the selected variant’s media shows. Shopify supports the association natively, but the native gallery still displays every video at once, so you need media filtering like Rubik Variant Images to hide the off-variant clips and show one video per variant.

Does Rubik Variant Images filter videos, or just images?

It filters all three Shopify media types: images, videos, and 3D models. When a shopper selects a variant, the gallery collapses to that variant’s media only, regardless of type. So a 360 video on one color and a rotatable 3D model on another both swap correctly when the shopper switches variants.

How do I assign a video to a specific variant?

Place the video inside that variant’s block in your Shopify gallery, then assign it. RVI uses gallery order with featured-image boundaries, so each variant’s first media starts a group and the media after it belongs to that variant. You can assign manually by drag and drop, in bulk by gallery order, or with per-product AI auto-assign.

Will a video per variant slow my product page?

The filtering itself adds no external load, since RVI is metafield-based with no external API calls and loads with the page. Hiding off-variant media actually helps, because shoppers are no longer pushed toward heavy clips for colors they did not pick. For the videos themselves, Shopify and YouTube/Vimeo hosting handle delivery.

Can I use 3D models per variant too?

Yes. A Shopify variant “image” is really variant media, and 3D models are one of the three supported types. RVI filters them per variant just like videos and photos. Assign a GLB or USDZ model to a variant, and it shows only when that variant is selected, which is handy for furniture, jewelry, and shape-driven products.

Does this work with my theme?

RVI supports 350+ themes and works with both Shopify’s native variant selector and custom theme selectors. It also covers seven page builders: Beae, EComposer, Foxify, GemPages, Instant, PageFly, and Replo. Styling renders in a Shadow DOM, so it stays isolated from your theme CSS and does not cause conflicts.

Got a product where motion or shape does the selling? Order each variant’s gallery block, drop the video inside it, and let the right clip play for the right swatch.

Co-Founder of Rubik Variant Images & Swatch

Related Posts