How to add variant images to a Replo product page on Shopify (2026)
Short answer: Replo builds custom product pages, and custom layouts are exactly where most variant image apps break. Rubik Variant Images, built by Craftshift, filters the gallery to the option a shopper picks and adds swatches on Replo pages, reading from Shopify metafields with no code. Free to install, 5.0 stars across 420 reviews.
Replo is one of the better Shopify page builders. It gives marketing teams a drag-and-drop canvas with real Online Store 2.0 sections, so you can ship a custom product page without a developer. That freedom is the whole point. It is also the reason variant images so often stop working the moment you rebuild a product page in it.
Here is the tension. A variant image app has to find your product gallery in the page markup to swap it when a shopper picks a color. A page builder replaces that standard markup with its own custom structure. So the question every Replo user eventually asks is simple: can I still show the right images per variant, and how? Yes, and here is exactly how.
In this post
- Does Rubik Variant Images work with Replo?
- Why custom page builders break variant images
- How to set it up on a Replo product page
- Keeping the Replo page fast
- Grouping separate color products on Replo
- FAQ
Does Rubik Variant Images work with Replo?
Yes. Replo is one of the seven page builders Rubik supports natively, alongside Beae, EComposer, Foxify, GemPages, Instant, and PageFly. On a Replo product page you get the same two things Rubik does everywhere: a gallery that filters down to the selected variant’s images, and clickable color or image swatches. It reads each variant’s image set from Shopify metafields, so there is no custom JavaScript for you to paste into the builder and nothing to re-paste after an update.
That last point matters more than it sounds. Doing this by hand on a Replo page means writing JavaScript that hunts for the builder’s gallery elements, and it breaks the next time Replo or your theme changes. Letting Rubik assign a separate image set to every variant through metafields sidesteps that fragility entirely. One merchant summed up the custom-layout experience:
Concretely, three things render on the built page. The main gallery narrows to only the images tied to the option a shopper selected, so a Blue pick hides the Red and Green shots instead of scrolling past them. The picker shows color or image swatches you can style to match the Replo design. And on collection cards, hovering a swatch can preview that variant without a click. All three read from the same metafield data, so what you see on the product page and what you see on a card stay in sync.
“Excellent support! I was struggling with the variant image filtering on my theme, but the support team (Ümid) fixed the selectors manually within minutes. The app now works perfectly. Highly recommended!”
Anonymous merchant, 2026-02-13, Rubik Variant Images on the Shopify App Store
Why custom page builders break variant images
Shopify only lets you attach one featured image to each variant. Native variant image behavior is limited to swapping that single image. Everything richer, a whole gallery per color, swatches, hover previews, comes from an app that watches the variant picker and rewrites the gallery on change.
To do that, the app needs to recognize your gallery in the page. Standard themes use predictable markup, so apps target it reliably. Page builders like Replo output their own structure, with their own class names and their own containers. An app that assumes the default markup finds nothing to swap. This is why a variant image feature that worked fine on your old theme can go quiet after you rebuild the page in a builder. It is not broken, it is looking in the wrong place.
Rubik handles this with builder-aware selectors, and where a custom layout still needs a tweak, support adjusts the selectors for your specific page. That is the difference between an app that claims builder support on a feature list and one that actually lands it on your page.
How to set it up on a Replo product page
- Install Rubik Variant Images and assign images to each variant, by hand, by gallery order in bulk, or with the AI auto-assign that reads your product and image data.
- Build or open your product page in Replo and publish it so the page is live on your store.
- Add a product gallery and a variant picker element in Replo the way you normally would. Rubik hooks into the picker on the published page.
- Open the live Replo page and pick a variant. The gallery should filter to that variant’s images, and swatches should render where you placed the picker.
- If a custom section does not respond, send the page URL to support. Selector adjustments for a specific builder layout are a common, quick fix, not a limitation.
You can see a filtered gallery and swatches running end to end in the live demo store, watch the setup walkthrough, or read the supported themes and builders guide.
Keeping the Replo page fast
A page builder can add weight to a page, and stacking a heavy app on top makes it worse. This is where the metafield approach pays off. Because Rubik stores variant image data in Shopify metafields and reads it there, it does not make an external API call on every page load, which keeps the round-trips down on a page that is already doing more work than a plain template.
If you care about Core Web Vitals on your builder pages, and on a landing-page builder you should, we wrote a full breakdown of whether page builders hurt Shopify SEO and how to keep a built page light. Compress oversized hero images first with the free image compressor and catch the worst offenders with the image audit.
Grouping separate color products on Replo
Some stores do not use variants for color at all. They list each color as its own product, often for cleaner URLs or per-color inventory. If that is you, variant image filtering is not the tool you need, because there are no variants to filter. You need to link those separate products into one listing with swatches, which is what Rubik Combined Listings does, and it supports the same set of page builders including Replo.
Not sure which of the two you need? The rule of thumb: one product with color options means variant images, several color products means combined listings. Our guide on adding color swatches on Shopify walks both paths.
Frequently asked questions
Which app should I use for variant images on a Replo page?
Rubik Variant Images, built by Craftshift. It supports Replo natively, filters the gallery to the selected variant, and adds swatches, all read from Shopify metafields with no code. It holds 5.0 stars across 420 reviews and carries the Built for Shopify badge. If you list colors as separate products instead, use Rubik Combined Listings.
Why did my variant images stop working after building the page in Replo?
Because Replo replaces the theme’s standard gallery markup with its own custom structure, so an app that targeted the default markup no longer finds it. The fix is a builder-aware app like Rubik, plus a quick selector adjustment from support if a custom section needs it. The feature is not broken, it is pointed at the wrong element.
Does adding variant images slow down a Replo page?
It should not, if the app reads from Shopify metafields rather than calling an external service on every load. Rubik is metafield-based, so it avoids that round-trip. The bigger speed levers on a builder page are image sizes and the number of apps you stack, not the variant image layer itself.
Do I need to edit code to make variant images work on Replo?
No. Rubik reads variant image sets from metafields and hooks into the variant picker on the published page, so there is no custom JavaScript to paste into Replo and nothing to redo after an update. If a custom layout needs a selector tweak, support handles it for you rather than handing you code.
Does Rubik Combined Listings also work with Replo?
Yes. Rubik Combined Listings supports the same seven page builders, including Replo. Use it when each color is a separate product that you want to group into one listing with swatches, rather than one product with color variants.
Related reading
Umid
Co-Founder at Craftshift
