Why Rubik Variant Images stands apart

April 10, 2026
App Guides, Variant Images
9 min read
a Rubik cube icon standing on a podium above competitor app icons

The Rubik Variant Images swatch app does one thing that most alternatives skip entirely: it isolates its CSS inside a shadow DOM so your theme never breaks. That single architecture decision explains why merchants with heavily customized themes keep switching to it after their previous swatch app conflicts with a theme update. I have watched this happen dozens of times over the past year, and the pattern is always the same. A theme update ships, the old swatch app’s styles bleed into the header or the cart drawer, and the merchant scrambles to find something that won’t fight with their design.

But that is only one piece. The full picture involves flat pricing that does not change based on your Shopify plan, AI-powered image assignment, support for images plus videos plus 3D models per variant, and compatibility with 350+ themes and 7 page builders. Let me walk through each of these and explain why they matter more than the feature checklists most app listings throw at you.

If you want the broader comparison across multiple apps, our variant image app comparison covers six real apps side by side. This post goes deeper on Rubik specifically.

In this post

Shadow DOM: why CSS isolation matters

Most swatch apps inject their CSS directly into the page. That works fine until the theme’s stylesheet targets the same class names, or until a theme update adds a new rule that overrides the swatch font size, padding, or border radius. The result? Swatches that looked perfect yesterday now look broken.

Rubik Variant Images renders everything inside a shadow DOM. Think of it as a sealed container. The theme’s CSS cannot reach in, and Rubik’s CSS cannot leak out. Zero conflicts. I saw a merchant running the Prestige theme last March who had switched swatch apps three times in six months because every theme update broke something. After installing Rubik, that cycle stopped. Completely.

This also means you get 100+ CSS variables for customization inside that container, accessible through a visual editor or custom CSS. You can change swatch shapes, sizes, borders, hover effects, and spacing without ever worrying about side effects on your navigation or footer. Why don’t more apps do this? Honestly, it is harder to build. Shadow DOM requires a different rendering approach. Most apps take the easier route and hope for the best.

Flat pricing vs plan-based pricing

Some alternative apps charge you based on which Shopify plan you are on. So if you upgrade from Basic to Shopify to Advanced, your swatch app bill goes up too, even though you are using the exact same features. That pricing model punishes growth.

Rubik uses flat pricing tied to product count: Free for 1 product, $25/month for up to 100, $50/month for up to 1,000, and $75/month for unlimited. Every plan includes AI credits for the auto-assign feature. Your Shopify plan does not matter. A store on Basic pays the same as a store on Plus for the same product count.

Run the numbers with our Shopify Fee Calculator if you want to see how plan-based app pricing stacks up against flat pricing as your store scales. The gap gets ugly fast once you hit the Advanced Shopify plan.

Three ways to assign images (and when to use each)

This is where a lot of confusion lives. Rubik has three distinct assignment methods, and they are not interchangeable.

Manual assign is drag-and-drop in the app UI. You pick images (or videos, or 3D models) and drop them onto each variant. Best for stores with fewer than 50 products, or for products where the gallery order does not follow any pattern. It is precise but slow at scale.

AI auto-assign works one product at a time. It analyzes five data points: product title, variant option values, option name, image filename, and image alt text, plus the image itself through a vision API. It supports both OpenAI and Anthropic backends. This is perfect for products where filenames are messy or where alt text carries useful info. Each assignment uses monthly AI credits included with every plan.

Bulk assign uses image-order grouping. Not filename matching, not AI. It reads the Shopify gallery order and uses each variant’s first media as a group separator. Everything after that separator inherits the same variant assignment until the next boundary. This processes hundreds of products in the background. Sort your gallery correctly, hit bulk assign, walk away. For stores with 500+ products and a clean gallery structure, this is the fastest path by far.

There is also an opt-in mode that routes bulk assignment through the AI matching service instead of gallery order. Same background processing, but smarter matching for messy catalogs.

One thing that annoys me about how other apps describe their assignment features: they blur the line between AI and non-AI bulk processing. Rubik keeps these separate on purpose, so you always know what is happening under the hood. For more on how variant images work in Shopify, see our complete variant images guide.

Images, videos, and 3D models per variant

Most variant image apps handle images. Some handle videos. Very few handle 3D models. Rubik supports all three media types per variant. So if you sell furniture and you have a 3D model for each color, the correct model shows when the customer selects that color. Same for video. A merchant selling handmade ceramics can show a turntable video for each glaze variant.

Shopify allows up to 250 media items per product. That is a Shopify platform limit, not a Rubik limit. If you are running a store with products that have 8+ colors and 10+ images per color, check our multiple images per variant guide to plan your gallery structure before you start assigning.

350+ themes and 7 page builders

Rubik Variant Images works with 350+ Shopify themes. Dawn, Horizon, Prestige, Impulse, Impact, Focal, and every other major third-party theme in the store. It also supports 7 page builders: Beae, EComposer, Foxify, GemPages, Instant, PageFly, and Replo.

Why does this matter? Because the number one support ticket for swatch apps is “it doesn’t work on my theme.” If your swatch app only supports a handful of popular themes, you are gambling every time you switch themes or add a page builder. You can verify your theme before installing with the Theme Compatibility Checker.

One builder that is not on the list: Shogun. If you use Shogun, Rubik will not work with it. Transparency matters more than inflated compatibility claims.

Metafield-based speed

Rubik loads variant-to-image assignments from Shopify metafields. No external API calls. The data arrives with the page itself, not in a separate network request after the page finishes loading. For stores that obsess over Core Web Vitals (and you should), this is the architecture you want.

Some alternative apps fetch assignment data from their own servers after the page loads. That means an extra network hop, which adds latency and can hurt your Largest Contentful Paint score. Run your product pages through our SEO Checker to see how your current setup performs. If your swatch app is adding external requests, you will spot it in the waterfall.

Swatch types and customization

Three swatch types: image swatches, color swatches, and pill buttons. You can mix them across options on the same product. Color option gets color swatches, Size option gets pill buttons. Or image swatches for everything. Your call.

Swatch shapes include circle, square, rounded square, pill, and button. Each shape can be styled further with the 100+ CSS variables. The visual editor handles most customization without code, but if you want pixel-level control, the CSS variable approach gives you that without touching the theme files. For a deeper look at swatch design, check out our color swatches complete guide.

Rubik also fires a custom JavaScript event (rubik-swatch-clicked) with four properties when a swatch is clicked: option name, option value, option value ID, and the element itself. If you need to wire up custom behavior (like updating a price display or triggering an analytics event), you can listen for that event and build on top of it.

Pairing with Combined Listings

Rubik Variant Images handles the product page. It does not show swatches on collection pages, and it does not link separate products together. That is the job of Rubik Combined Listings, a separate app.

The two work together well. Combined Listings groups separate products (say, each color as its own product) and shows swatches on collection pages. Variant Images then filters the product page gallery when a customer clicks into a specific variant. Each color gets its own URL, its own title, and its own images. The SEO benefit alone makes this worth considering if you have a large color catalog. No Shopify Plus required.

For stores that want collection page swatches without separate products, that is still Combined Listings territory. Rubik Variant Images stays in its lane: product page media filtering and swatches. Period.

FAQ

Does Rubik Variant Images work on collection pages?

No. Rubik Variant Images is product-page only. For collection page swatches, you need Rubik Combined Listings.

What is the difference between AI auto-assign and bulk assign?

AI auto-assign analyzes one product at a time using a vision API and five data points. Bulk assign uses gallery image order to group images by variant across hundreds of products in the background. They solve different problems.

Does the price change if I upgrade my Shopify plan?

No. Rubik uses flat pricing based on product count. Your Shopify plan has no effect on what you pay.

Can I use Rubik with a page builder like GemPages or PageFly?

Yes. Rubik supports Beae, EComposer, Foxify, GemPages, Instant, PageFly, and Replo. Shogun is not supported.

Does it support videos and 3D models?

Yes. You can assign images, videos, and 3D models to each variant. All three media types are filtered when a variant is selected.

How many images can I assign per product?

Shopify allows up to 250 media items per product. That is a platform limit, not a Rubik limit.

Ready to stop fighting CSS conflicts and start showing the right media per variant? Install Rubik Variant Images and try the free plan on one product.

Co-Founder at Craftshift

You may also like