Replo is a powerful Shopify page builder that serious DTC brands and agencies use. A Shopify page builder built on React, shipped with speed in mind. Unlike other Shopify page builders which offer designers and developers generic blocks and widgets as components, Shopify Replo offers a real component model, giving Replo pages a unique look that always stands out from the template crowd because they are custom and no two pages look the same. However, Shopify Replo combined listings setups do not work with most of the swatch apps.
Rubik Combined Listings comes with pre-made code that has been adapted for the Replo theme. It automatically detects sections on Replo products, determines the correct position to insert the code and outputs swatch elements within a Shadow DOM so the output doesn’t interfere with the styling of Replo. No additional configuration is required.
In this post
- What is Replo
- Why combined listings matter for Replo stores
- How Rubik handles Replo
- Setup steps
- Collection page swatches
- Common issues and fixes
- Performance
- FAQ
- Related reading
What is Replo
Replo is a new page builder geared towards DTC brands and the agencies that build for them, using React to generate Shopify pages. The product offers a “real component” model of editing, using reusable blocks, defined design tokens, and conditionally rendered states. And after assembling a page, Replo will generate a Shopify section and custom HTML that overrides the standard Shopify theme template for that type of page.
Why combined listings matter for Replo stores
DTC brands using Replo typically run two types of campaigns – paid and brand-led organic content. And for each color/style (or color/wallet), they want each color/style (or color/wallet) to rank on each color/style (or color/wallet)’s individual product URL. Which means – you need each color to be its own Shopify product, but you also want to display all the colors/swatches on that product page in order to maximize conversion.
I love the future that combined listings bring. Now on a black product page, a customer can see swatches for the 5 other colors of that hoodie and with a click jump to the exact product they choose. Each product still has its own images, its own URL, its own meta tags, tags, etc. No more awkwardly stuffing multiple variants into a single product just to trick out the swatch interface.
How Rubik handles Replo
Rubik Combined Listings plugin has a special detection code written for Replo theme. Rubik uses general container markers to detect when to switch to Replo injection mode, and this detection is performed on every product page.
- Detection. Rubik scans the DOM for Replo-specific containers and data attributes.
- Anchor lookup. It locates the product title, price, or add-to-cart form inside the Replo component tree.
- Injection. Swatches are placed at the configured position relative to the anchor.
- Shadow DOM. The swatch component renders inside an isolated Shadow DOM container so Replo CSS cannot bleed in and break swatch styling.
When building a product page for a Replo, it often includes HTML and/or JavaScript that comes preloaded with design token values, scoped CSS and React-style class names. The Shadow DOM boundary helps keep all of this logic contained on the Replo product while still allowing swatch colors on the Rubik to not conflict with the Replo’s component structure. Two separate worlds on the same page.
Setup steps
- Install the app. Install Rubik Combined Listings from the Shopify App Store.
- Enable the embed. Toggle the Rubik Combined Listings app embed on in your theme editor. One click.
- Create a group. In the Rubik dashboard, click New Group and add the products you want to link as a single grouped listing.
- Run Magic Fill. Auto-grouping picks option values and swatch colors from product titles, images, and metafields. The AI visual assistant flags anything that looks off.
- Save and preview. Open your Replo product page in incognito. Swatches appear in the correct position.
For grouping at scale, use bulk grouping from titles, tags, or metafields.
Collection page swatches
Replo can be used on product pages and landing pages, not collection pages. The collection grid will still come from your theme and Rubik handles both cases. The swatches will appear on product cards regardless of which template is used for the collection.
All four swatch types are included: color circles, image thumbnails, outline text buttons, and dropdowns. Each group has its own visual settings, with 70+ CSS variables to customize, plus a carousel layout option if a group has too many colors. ARIA attributes for accessibility are included. See customization options for all swatches.
Common issues and fixes
- Swatches not appearing on a Replo page. Confirm the app embed is enabled. Confirm the product is in a saved group. Hard refresh.
- Swatch position wrong. Per-group settings let you change the inject position relative to title, price, or add-to-cart form.
- Replo component re-render hides swatches. Rubik re-attaches on DOM mutations. If a custom Replo interaction wipes the container, file a support ticket and the team can adapt detection.
- Wrong colors. Edit the group manually. Live admin preview reflects changes instantly.
Performance
10.Tenant is metafield based. No external API calls. All swatch data is stored in Shopify metafield references that sync on the fly as you edit groups to ensure the most minimal possible impact on page load not even for customers viewing your Replo. Meanwhile, as long as your store and Tenant are both active, import / export will always work directly through the Shopify app.
For DTC brands spending money to drive ad traffic to your site, every kb and every ms on product page matters. See the swatch app speed comparison on CraftShift and see how other apps stack up.
Theme compatibility inside Replo
Replo is built on top of your active and published Shopify theme, and will even allow you to keep custom product pages. This means your theme is still in control of the cart, checkout, account pages and any pages you haven’t rebuild with us yet. Rubik supports 350+ verified Shopify themes including all of the 7 major page builders. But don’t worry, you can always switch themes/builders later, and everything will still work because all of your content is stored in metaobject references which don’t live in theme files.
Pricing
| Plan | Price | Groups | AI credits |
|---|---|---|---|
| Free | $0/mo | 5 | 100 |
| Starter | $10/mo | 100 | 1,000 |
| Advanced | $30/mo | 500 | 5,000 |
| Premium | $50/mo | 5,000 | 50,000 |
17% off on annual billing. Built for Shopify and 5.0 rated.
See the live demo store, watch the tutorial video, or read the getting started guide.
Frequently asked questions
Does Rubik Combined Listings work with Replo?
Rubik has built in support for the Replo product. It automatically detects the different sections for Replo products and the code will automatically insert product swatches into the correct place. No manual coding required.
Will Replo CSS break the swatch styling?
You can see that the swatches are rendered inside Shadow DOM so things like Replo CSS, design tokens and component styles do not get propagated to the swatch component. They look exactly how you would have configured them.
Do collection page swatches work with Replo?
Yes. Collection swatches are shown on product cards in Collection views in the Collection mini toolbox – whether you’re using Collection grid created in Replo or having it rendered by your active theme and it still works.
Does Rubik Combined Listings filter product images per variant on Replo?
This function belongs to Rubik Variant Images, Combined Listings was for linking between separate products and swatches, and both apps can be used together on Replo pages.
Do I need Shopify Plus?
No. Rubik Combined Listings is a Shopify App that comes with every shopify plan. With the free plan, you get 5 product groups and 100 AI credits that should be sufficient to test all the No. Rubik features on your Replo store.
What if I switch from Replo to another builder?
Groups carry over. Rubik supports all 7 page builders (Beae, EComposer, Foxify, GemPages, Instant, PageFly, Replo) and detects optimized settings for 350+ standard themes. It automatically detects on the next page load.
