Variant images on EComposer product pages

You built a custom product page in EComposer. It looks great. Then you install a variant image app and nothing works. The gallery does not filter. The swatches do not appear. Your Shopify EComposer variant images are stuck showing every photo for every color, no matter what the customer selects.

This happens because page builders replace your theme’s default product section with their own HTML structure. Most variant image apps only understand the default theme structure. They cannot find the gallery or variant selector inside EComposer’s custom layout. Rubik Variant Images is different. It has dedicated detection modules for EComposer and six other page builders, so gallery filtering and swatches work on custom pages without any code editing.

In this post

Why page builders break variant image apps
How Rubik detects EComposer pages
Setup steps (under 5 minutes)
All 7 supported page builders
What if your page builder is not listed?
Frequently asked questions
Related reading

Why page builders break Shopify EComposer variant images

Every Shopify theme has a product section. This section contains a product gallery (the images), a variant selector (the dropdowns or buttons), and the Add to Cart button. Variant image apps hook into this structure. They find the gallery container, watch for variant changes, and swap the visible images when the customer picks a different option.

Page builders like EComposer throw all of this out. When you create a custom product page in EComposer, the builder generates its own HTML. The gallery is inside EComposer’s proprietary wrapper elements. The variant selector uses EComposer’s own component markup. The class names, data attributes, and DOM hierarchy are completely different from what the theme would normally produce.

A variant image app that looks for .product-gallery or [data-product-media] finds nothing. The elements exist, but they are nested inside EComposer’s containers with different selectors. So the app silently fails. No error message. The gallery just shows all images for every variant, as if the app is not installed.

How Rubik detects EComposer pages

Rubik Variant Images does not rely on theme-specific selectors alone. It includes a dedicated detection module for each supported page builder. For EComposer, this module is registered internally as theme ID 88880005. When Rubik loads on a product page, it checks whether EComposer’s section wrapper is present in the DOM. If it finds EComposer’s markup, it switches to the EComposer detection path instead of the default theme path.

Inside that detection path, Rubik knows exactly where EComposer places the product gallery and variant selector. It hooks into EComposer’s variant change events and takes over the gallery filtering. When a customer picks “Blue,” Rubik hides every image that is not assigned to the Blue variant and rearranges the remaining images in the gallery. This works for slider galleries, grid galleries, and thumbnail-based layouts inside EComposer.

Rubik also injects its own shadow DOM swatches on EComposer pages. Shadow DOM means the swatches live inside an encapsulated DOM tree. Your theme CSS and EComposer styles cannot accidentally override the swatch colors, sizing, or spacing. The swatches render correctly every time, regardless of what custom CSS you have added to the page.

None of this requires code editing. You do not need to add custom selectors, paste Liquid snippets, or modify EComposer section settings. Rubik handles the detection automatically. For a deeper walkthrough, see the setup guide on the Rubik Variant Images site.

Setup steps (under 5 minutes)

Getting variant images working on your EComposer product pages takes four steps. No code. No theme editing.

Install Rubik Variant Images from the Shopify App Store. The free plan covers 1 product so you can test before committing.
Enable the app embed in your theme settings. Go to Online Store > Themes > Customize, then toggle on the Rubik Variant Images embed block. This is what loads Rubik’s script on your storefront.
Assign images to variants in the Rubik dashboard. Open any product, drag images to the matching variant values. You can also use AI auto-assign to detect colors from image content, or bulk assign for hundreds of products at once.
Preview your EComposer product page. Select different variants and confirm the gallery filters correctly. The swatches should appear and the images should swap instantly.

That is it. Rubik detects the EComposer layout automatically. No custom selectors to configure. If something looks off, check the Rubik documentation or reach out to their support team.

All 7 supported page builders

EComposer is not the only page builder Rubik supports. Here are all seven, each with its own dedicated detection module.

Page builder	Detection	Gallery filtering	Swatches
Beae	Automatic	Yes	Yes
EComposer	Automatic	Yes	Yes
Foxify	Automatic	Yes	Yes
GemPages	Automatic	Yes	Yes
Instant	Automatic	Yes	Yes
PageFly	Automatic	Yes	Yes
Replo	Automatic	Yes	Yes

If you are using GemPages or PageFly, we have dedicated guides for those too: variant images on GemPages and variant images on PageFly.

What if your page builder is not listed?

If you are using a page builder that is not in the table above, Rubik may still work. Many page builders output standard Shopify product section markup under the hood, and Rubik’s default theme detection handles those cases. Install the free plan and test on one product.

If it does not work out of the box, contact Rubik’s support team. They have added new page builder modules based on merchant requests before. The seven builders listed above all started as individual support requests that became official detection modules.

Rubik Variant Images pricing

Rubik is rated 5.0 with 343+ reviews and carries the Built for Shopify badge. Here is the pricing breakdown.

Plan	Price	Products
Free	$0/month	1 product
Starter	$25/month	100 products
Advanced	$50/month	1,000 products
Premium	$75/month	Unlimited

The free plan is enough to test on one EComposer product page and confirm everything works before upgrading. See the live demo store to preview variant filtering and swatches in action.

Try Rubik Variant Images free

Video walkthrough

This video covers the general Rubik setup process, including how to assign images and enable the app embed.

Frequently asked questions

Does Rubik Variant Images work with EComposer?

Yes. Rubik has a dedicated EComposer detection module (theme ID 88880005) that automatically recognizes EComposer product section layouts. Gallery filtering and swatches work without any code editing or custom configuration.

Do I need to edit any code in EComposer or my theme?

No. Install Rubik, enable the app embed in your theme settings, and assign images in the Rubik dashboard. The app detects EComposer automatically. No Liquid editing, no custom CSS, no pasting code snippets into EComposer sections.

Can I show multiple images per variant on EComposer pages?

Yes. Rubik lets you assign 2, 5, 10, or more images to each variant value. When a customer selects a variant, the gallery shows only the assigned images and hides everything else. This works the same on EComposer pages as it does on standard theme pages. Read our full guide on showing multiple images per variant on Shopify.

Will my theme CSS break the swatches on EComposer pages?

No. Rubik renders swatches inside a shadow DOM container. This isolates the swatch styles from your theme CSS and any custom styles added through EComposer. The swatches look consistent regardless of your theme or page builder configuration. Learn more about swatch performance in our swatch apps and store speed guide.

What about other page builders besides EComposer?

Rubik supports seven page builders: Beae, EComposer, Foxify, GemPages, Instant, PageFly, and Replo. Each has its own detection module. If your page builder is not on the list, contact Rubik support. They have added new builder modules based on merchant requests.