Instant is a Shopify page builder that allows you to design pages in a Figma-style canvas and then publish those pages as Shopify sections for store owners to add to their template. Designers love Instant because it streamlines the process to turn Figma mockups into functional Shopify pages without requiring a developer to recreate everything in Liquid. However, as with all page builders, Instant replaces the rendered HTML with custom tags which can interfere with combined listings setups on store collections. Additionally, integrations with the store may not work with Shopify Instant on certain apps that are set up to work with the stock theme template.
Rubik Combined Listings provides a WooCommerce Product Listings extension with dedicated code for Instant by Rubik. The code recognises product sections, identifies the optimal location for injection and renders swatches inside a Shadow DOM light DOM element to prevent Instant CSS interfering with swatch styling.
In this post
- What is Instant
- Why combined listings matter on Instant
- How Rubik handles Instant
- Setup steps
- Collection page swatches
- Common issues and fixes
- Performance
- FAQ
- Related reading
What is Instant
Instant (Instant – Instant Page Builder for Shopify) is a page builder for Shopify made with love for designers. It works as a Figma-like canvas where you can design your page by adding frames, components, images, text. Everything you design on the canvas is published as a Shopify section which can replace the default theme template for specific pages (product, collection, blog, pages – general & landing).
Why combined listings matter on Instant
Instant is used by many big brands for their product pages as they want it to have a more designed look and feel than the typical Shopify product page. Although a lot of work and attention to detail went into the custom typography and line spacing, they even went as far as recreating their product page in Instant in order to warp and transform the content into the unique layout of a magazine.
This is really a mistake when each color is a separate Shopify product – which it should be for proper SEO. Instant page looks great but the customer has no idea that other colors exist when they land on a particular product. By creating a combined listing, you can connect these products together and offer them as swatches on one page. Each product still gets its own URL & metadata. Customers get to see all the colors on one page.
How Rubik handles Instant
Rubik Combined Listings has added detection code for Instant. It now also will switch to Instant injection mode on all product pages, if it finds Instant on the page it is viewing.
- Detection. Rubik scans the DOM for Instant container classes and data attributes.
- Anchor lookup. It locates the product title, price, or add-to-cart form inside the Instant frame.
- Injection. Swatches are placed at the configured position relative to the anchor.
- Shadow DOM rendering. The swatch component lives inside a Shadow DOM container, so Instant typography and spacing rules cannot leak in.
The Shadow DOM piece is what sets design-led shops apart. Instant pages use custom font weights, letter spacing and grids that the Swatch component would fight to subvert were it not for the Rubik widget isolating it.
Setup steps
- Install the app. Install Rubik Combined Listings from the Shopify App Store.
- Enable the embed. Toggle the Rubik app embed on in your theme editor. One click, no code.
- Create a group. In the Rubik dashboard, click New Group. Add the products you want linked.
- Run Magic Fill. Auto-grouping picks option values, swatch colors, and image previews from product titles, images, and metafields. The AI visual assistant catches what Magic Fill misses.
- Save and preview. Open your Instant product page. Swatches show up.
For grouping at scale, use bulk grouping from titles, tags, or metafields.
Collection page swatches
When viewing a product in Instant view, the product page itself is typically still rendered by your theme. Rubik covers both cases and makes sure that swatches appear on product cards in collection grids whether the grid is built in Instant or part of your theme template. Hover over, click on, or tap on a swatch to preview the color.
Color circles, image thumbnail swatches, text buttons and dropdowns are all included for swatches. Customize the swatches for each group individually, controlling 70+ CSS variables. Plus, use a carousel layout for groups with many colors. See all swatch options.
Common issues and fixes
- Swatches not rendering on an Instant 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 the title or form.
- Instant frame clips the swatch. Increase the frame height in Instant or change the swatch layout to a more compact carousel.
- Wrong swatch colors. Edit the group manually in the Rubik dashboard. Live admin preview reflects changes instantly.
Performance
It is metafield based with no external API calls on page load. All Swatch information is referenced via Shopify metaobject references that should be up to date in real time. This means that there will be no impact on the page load while a customer is on your Instant page.
For benchmark numbers across the major swatch apps, read the swatch app speed comparison on CraftShift.
Theme compatibility inside Instant
Instant is a theme replacement product, meaning that it replaces your current active Shopify theme but does not replace pages that you have not migrated, such as checkout or cart pages. It is fully compatible with any theme including the 350+ confirmed compatible Rubik themes and all 7 page builders. Whether you are switching from Instant back to a theme or from a different page builder such as PageFly to Instant, all group structures will be preserved and usable.
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. This app was made with the following design and features: Built for Shopify, 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 Instant page builder?
Rubik supports the Instant theme. The product swatches are automatically implemented for product info sections and you get full control over looks of swatches with Swatch Styles settings. Code is worded to automatically detect Instant’s product sections for you. No extra code required.
Will Instant typography or CSS break the swatches?
Rubik renders the swatches inside a Shadow DOM container so that it can easily display the swatches as they would actually look. Instant fonts, spacing, and grid styles cannot be applied to the swatch component, which means that the swatches will look exactly as you have configured.
Do swatches show on collection pages built with Instant?
Yes. Collection swatches appear on product pages (on the product card) whether you are using the Collection Grid in Instant Preview mode or have the Collection Grid generated by your theme. Both methods work.
Does Rubik Combined Listings filter product images per variant?
This is what Rubik Variant Images does. Combined Listings is for linking separate products together and grouped swatches. Both apps can be active at the same time on Instant pages.
Do I need Shopify Plus?
No. Rubik Combined Listings is Shopify compatible and comes with a number of features that make it suitable for any Shopify store, including those on the basic plans. The free plan includes 5 groups and 100 AI credits.
What if I switch from Instant to another builder?
Groups carry over. Rubik is designed to handle groups carry over, working seamlessly with 7 popular page builders (Beae, EComposer, Foxify, GemPages, Instant, PageFly, Replo) as well as over 350 standard WordPress themes.
