GemPages is one of the most popular Shopify page builders. Merchants use it to create custom product pages with drag-and-drop layouts, unique sections, and branded designs that go far beyond what a standard theme template offers. But that flexibility creates a problem for apps that need to inject content into the product page.
Shopify GemPages combined listings is a common search because most combined listings apps fail on GemPages pages. They look for the default product template structure, can’t find it, and show nothing. Rubik Combined Listings solves this. It detects GemPages pages, finds the product section inside the custom layout, and injects swatches in the correct position.
In this post
- The page builder problem
- How Rubik handles GemPages
- Setup steps
- Product page vs collection page swatches
- All 7 supported page builders
- Pricing
- Frequently asked questions
- Related reading
The page builder problem with combined listings
Shopify themes follow a predictable structure. Product pages use a product template with known section types and CSS classes. Combined listings apps rely on this. They scan the DOM for the product title, price area, or variant picker, then inject swatch elements nearby.
GemPages replaces that entire structure. When you build a product page in GemPages, the output is a custom DOM tree with different class names, different nesting, and sometimes no variant picker at all. Most combined listings apps scan the page, find nothing familiar, and give up. Swatches never appear.
This is not a bug in those apps. They were built for standard Shopify themes. Page builders like GemPages produce markup that is too different from what those apps expect.
How Rubik handles GemPages
Rubik Combined Listings includes dedicated code for GemPages (theme ID: 88880002). Here is what happens when a customer visits a GemPages product page:
- Page builder detection. Rubik checks whether the current page was built with GemPages. It identifies the GemPages container elements and layout structure.
- Product section discovery. Inside the GemPages layout, Rubik locates the product information area. It finds the product title, price, or add-to-cart button to determine where swatches should go.
- Swatch injection. Rubik places the swatch component in the correct position relative to the product details. The position adapts to whatever layout you built in GemPages.
- Shadow DOM rendering. Swatches render inside a Shadow DOM container. This means GemPages CSS rules cannot accidentally break swatch styling. Fonts, colors, spacing, and hover effects stay consistent regardless of what custom CSS GemPages applies to the page.
The result: your GemPages product page keeps its custom design, and swatches appear exactly where they should. Customers click a swatch, navigate to that product’s page, and see its own photos and details.
Setup steps
- Install the app. Install Rubik Combined Listings from the Shopify App Store.
- Activate the app embed. Go to your Shopify theme editor and enable the Rubik Combined Listings embed. This is a single toggle. The app auto-detects GemPages pages.
- Create a product group. In the Rubik dashboard, create a new group. Add the products you want to connect (for example, the same shoe in 5 colors).
- Configure swatches. Pick a swatch type: color, image, button, or dropdown. Use Magic Fill to auto-detect option values and colors from product titles and images.
- Save and preview. Open your GemPages product page. Swatches appear on the product page and on collection page product cards.
If you have many products to group, use bulk grouping to create all groups at once from product titles, tags, or metafields.
Full walkthrough: Setup guide | Documentation
Product page vs collection page swatches
Rubik works on both product pages and collection pages built with GemPages.
Product page swatches. These appear on the individual product page, usually near the product title or variant picker. Customers see all grouped products as swatches. Clicking one takes them to that product’s page. Each product keeps its own URL, images, and SEO metadata. Read more about how combined listings work.
Collection page swatches (product cards). When customers browse a collection page, each product card shows small swatches. Hovering or clicking a swatch previews that color. This works whether you built your collection page in GemPages or use the default theme collection template. For swatch styling options, see customize combined listing swatches.
Both types render in Shadow DOM, so GemPages styling stays separate from swatch styling. No CSS conflicts.
All 7 supported page builders
GemPages is not the only page builder Rubik supports. The app includes dedicated code for 7 Shopify page builders:
| Page builder | Theme ID in Rubik | Product page swatches | Collection page swatches |
|---|---|---|---|
| Beae | 88880006 | Yes | Yes |
| EComposer | 88880001 | Yes | Yes |
| Foxify | 88880005 | Yes | Yes |
| GemPages | 88880002 | Yes | Yes |
| Instant | 88880007 | Yes | Yes |
| PageFly | 88880003 | Yes | Yes |
| Replo | 88880004 | Yes | Yes |
On top of page builders, Rubik supports 350+ Shopify themes. If you switch from GemPages to a regular theme (or the other way around), your groups carry over. No need to recreate anything. See the full list at rubikswatch.com/docs.
Pricing
| Plan | Price | Product groups |
|---|---|---|
| Free | $0/month | Up to 5 |
| Starter | $10/month | Up to 100 |
| Advanced | $30/month | Up to 500 |
| Premium | $50/month | Up to 5,000 |
All plans include GemPages support, all swatch types, and Shadow DOM rendering. Start free, upgrade when you need more groups.
See it in action
Frequently asked questions
Does Rubik Combined Listings work with GemPages?
Yes. Rubik includes dedicated code for GemPages (theme ID: 88880002). It detects GemPages product pages, finds the product section inside the custom layout, and injects swatches automatically. No code changes needed in your GemPages templates.
Will GemPages custom CSS break the swatches?
No. Rubik renders swatches inside a Shadow DOM container. This creates a boundary between GemPages CSS and swatch CSS. Whatever custom styling you apply in GemPages stays isolated from the swatch component.
What swatch types work on GemPages pages?
All four types: color (solid or dual-color), image, button, and dropdown. You can also mix types within a group. Configure them in the Rubik dashboard. See swatch customization options.
Do I need Shopify Plus?
No. Rubik Combined Listings works on every Shopify plan. The free plan includes 5 product groups, which is enough to test on your GemPages store. Learn more about grouping products as variants.
What if I switch from GemPages to another page builder?
Your product groups and swatch settings carry over. Rubik supports 7 page builders (Beae, EComposer, Foxify, GemPages, Instant, PageFly, Replo) plus 350+ standard Shopify themes. Switch anytime without recreating groups. Check the full FAQ for more details.
