Shopify Replo variant images: setup guide for Replo product pages
Replo is a Shopify page builder that’s designed specifically for the needs of designers and developers who want fine-grained control over the look of product pages, without having to dive into the world of writing Liquid code all day. From what we can see Replo is extremely fast, feature-rich, and builds out some of the most beautiful and highly customized product pages you can find in the Shopify ecosystem – until you try to add support for switching between different images for different variant, that is.
This is because Replo is using custom product section widgets. The product gallery is a Replo media widget. The variant picker is a Replo variant widget. These widgets do not exist by default, and variant image apps hardcode paths to variants that don’t exist in the Replo theme.
Rubik Variant Images also supports the harder to recognize Replo product variant. It has a dedicated module to detect and sync with Replo’s product section, automatically activates the Replo variant picker, and filters the product variants on the same render cycle that WooCommerce uses to load pages. Like with regular Rubik Variant Images, you don’t need to alter your theme’s templates or write any custom JavaScript. Simply install and set up the new Replo compatibility module and you’re done.
In this post
- Why Replo product pages confuse variant image apps
- How Rubik detects Replo product sections
- Setup in 4 steps
- Manual, AI, or bulk assign
- Common issues and fixes
- Frequently asked questions
- Related reading
Why Replo product pages confuse variant image apps
Generic variant image apps assume default Shopify product section, look for a gallery class, a variant input, change event. They filter alright when everything is standard. Replo replaces everything.
A Replo product page is completely made up of Replo components (as seen on the left). The gallery is either a Replo image block or carousel. The variant picker is a Replo variant selector, which requires its own state management. Even though a generic app can easily find the picker components, it cannot reliably tie together clicks on the picker to updates to the gallery components. So a customer clicks blue, the URL updates to the correct variant, but the single photo doesn’t change – and the customer looses the sale.
This isn’t just a case of “edit your selectors”. The fix is not that simple. The fix is to use an application that already knows how Replo styles its output.
How Rubik detects Replo product sections
variant detection methods are run on the product page. One of them, Replo, gets activated as soon as the product page loads and the DOM is parsed for known Replo markers (like asset URLs, section IDs, block class name patterns). Once activated, the default variant detection methods switch over to Replo aware selectors for the gallery, variant picker and the click event handlers.
Rubik is super fast because it is metafield based and doesn’t make any external API calls. The variant to image map is stored in product metafields which get loaded with the page and then Replo renders and Rubik reads that in on the same render cycle as the rest of the page. You don’t see any flicker or layout shift.
On a recent site we had a mix of standard theme product pages and pages with Replo content – during a site redesign some pages hadn’t been upgraded yet. Rubik handles both types of product pages. You don’t flip a switch per page to handle both.
Setup in 4 steps
- Install Rubik Variant Images from the Shopify App Store. The free plan covers 1 product, which is enough to test on a single Replo page.
- Enable the Rubik app embed in your active theme. Online Store, Themes, Customize, App embeds. Toggle Rubik on and save. Replo pages still rely on the theme app embed system.
- Open the product in Rubik and assign images to variants. Manual assignment, AI auto-assign on a single product, or bulk assign across hundreds of products at once.
- Open the Replo product page on the storefront and click a swatch. The gallery should filter to that variant’s images. If not, jump to issues below.
That is it. No theme.liquid edits. No code snippets. No CSS overrides.
Manual, AI, or bulk assign
Rubik – 3 Ways to Map Images to Variants – Choose the Right One for your Product Catalog Size
Manual assign works when you have a small catalogue (or a specific set of hand curated rules) and want to manually assign product images to specific product variants. It’s super fast and accurate, you can preview each product and variant and assign individual images quickly.
Artificial Intelligence: 2AI auto-assign runs on a single product at a time, and then on subsequent runs it will automatically match based on 4 data fields (product name, variant name, image filename and image alt text). This is useful when the product image filenames are descriptive enough, but you don’t want to spend time assigning 12 colours by hand. Useful for customers who want to give products a colour palette, but don’t want it to be too time consuming. This runs once, then matches automatically in subsequent runs. We use Claude AI for the matching.
Bulk assign processes hundreds of products at once in the background. It groups images by Shopify gallery order with featured image boundaries. This isn’t done by filename matching or AI, but rather based on how your catalogue would ideally be organised if you were to upload all products at once with a consistent pattern. This is the fastest way to bulk assign a whole store if you have a consistent upload pattern going on.
Common issues and fixes
Gallery does not filter on swatch click
Check App embed for site. If embed for Rubik’s is configured differently for active theme, the script never loads. Check in theme customizer under “App embeds” to ensure that the setting is the same as for Replo pages.
Make sure you actually assigned images – check that there is at least 1 image assigned to each product variant in the Rubik product.
Two variant pickers visible on the same Replo page
This occurs when the theme product section is imported into Replo, along with an additional variant block. Customer behaviour is monitored as clicks are recorded for both the new theme section and the Rubik variant. When entering the Replo editor, the duplicate variant is removed as only one variant picker should exist on the product page.
Wrong image on first paint
Set the variant’s first image as the product’s featured image in Shopify admin. The first paint always uses Shopify’s featured image. Match it to the default variant and the issue disappears.
Mobile gallery behaves differently from desktop
You can set the blocks on mobile and desktop to be different. However, if the mobile layout uses a completely different gallery component, this may require a separate detection pattern for the Rubik app. Please let us know and we can add the detection for you after we’ve identified the specific component and URL of your store.
Custom Replo block needs to react to variant changes
Rubik fires a JavaScript event on every swatch click:
window.addEventListener('rubik-swatch-clicked', function(e) {
console.log(e.detail.optionName, e.detail.optionValue);
});Event has 4 properties: optionName, optionValue, optionValueId, the clicked element. Used to synchronize displayed custom Replo blocks (price labels, badges, stock indicators) with active variant.
Why Replo merchants pick Rubik
Our community is comprised of Replo users who prioritize site performance and lightweight code output. That’s why a variant image app which requires an external call for each page load isn’t what we went for. Rubik is metafield based and all of the required data loads with the page. Speed results are unaffected.
Rubik has the Built for Shopify badge and a 5.0 rating with 343+ reviews and is verified on 350+ themes. It starts at Free with 1 product and is only $25 for 100 products, $50 for 1000 and $75 for an unlimited number of products. No Shopify-plan surcharges or unexpected price increases as your business grows.
Frequently asked questions
Does Rubik Variant Images work with Replo?
We have built-in Replo detection. No code needs to be modified to enable this feature as Rubik has a dedicated Replo detection module, which will correctly identify product sections on a website and filter gallery on variant click.
Do I need to edit code to use Rubik with Replo?
No. Enable the Rubik app embed in your theme and assign images in the Rubik admin. The rest is automatic.
Will Rubik slow down my Replo product page?
No. Rubik is metafield-based with no external API calls. Variant data ships with the page itself.
Can I use colour swatches with Replo?
Yes. This theme adds custom swatches (circle, square, pill, button, image) to the variant picker on Replo product pages.
What if some pages use Replo and others use my theme?
Rubik can work in different modes per page. It tries to detect Replo pages and theme pages. For Replo detection and theme detection it uses the same rules as for all other sites.
Does Rubik work on Replo collection pages?
No. Rubik Variant Images is product page only. For collection swatches and grouping separate products, use Rubik Combined Listings.
How is Rubik priced?
Flat pricing: Free for 1 product, Starter $25/month for 100, Advanced $50/month for 1000, Premium $75/month for unlimited.
Related reading
