EComposer is one of the fastest-growing Shopify page builders. Merchants use it to design fully custom product pages with a drag-and-drop editor, reusable sections, and built-in integrations. It gives you creative control over every part of the layout. But that creative control creates a real problem for apps that need to inject content into the product page.
Shopify EComposer combined listings is a common frustration because most combined listings apps fail on EComposer pages. They scan the DOM for standard theme elements, find nothing they recognize, and render nothing. Rubik Combined Listings solves this. It detects EComposer layouts, locates the product section inside them, and injects grouped swatches in the correct position.
In this post
- The page builder problem
- How Rubik detects EComposer
- Setup steps
- Product page and collection page swatches
- All 7 supported page builders
- FAQ
- Related reading
The page builder problem with combined listings
Shopify themes follow a predictable structure. The product page has a main section with a title element, a price block, a variant picker, and an add-to-cart form. Combined listings apps rely on this. They scan the DOM for known landmarks, find the variant picker or product title, and inject swatch elements nearby.
EComposer replaces that entire structure. When you build a product page in EComposer, the output is a custom DOM tree with its own class names, nested containers, and a layout hierarchy that looks nothing like a standard Shopify theme template. A combined listings app that expects .product-form or a variant picker in a specific position will not find it. Swatches either appear in the wrong place, duplicate themselves, or never render.
This is not a shortcoming of EComposer. It is what happens when any page builder rebuilds the product template from scratch. The builder gives you design freedom, but swatch apps lose their anchor points. Most of them were never built to handle custom layouts.
How Rubik detects EComposer
Rubik Combined Listings ships with dedicated code for EComposer (theme ID: 88880005). When a product page loads, Rubik checks whether EComposer sections are present. If they are, it switches to its EComposer injection mode instead of relying on standard theme selectors.
Here is what happens under the hood:
- Page builder detection. Rubik scans the DOM for EComposer-specific containers, data attributes, and layout wrappers. It identifies the page as an EComposer build before attempting any injection.
- Product section discovery. Inside the EComposer layout, Rubik locates the product information area. It finds the product title, price element, or add-to-cart button to determine where swatches belong.
- 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 EComposer.
- Shadow DOM rendering. Swatches render inside a Shadow DOM container. This creates a hard boundary between EComposer CSS and swatch CSS. Fonts, colors, spacing, and hover effects stay consistent regardless of what custom styles EComposer applies to the page.
Shadow DOM is especially important for EComposer pages. EComposer often applies global CSS resets and custom font stacks that would otherwise bleed into injected components. With Shadow DOM isolation, swatches render exactly as configured in the Rubik dashboard.
Setup steps
You do not need to configure anything EComposer-specific. Rubik handles detection automatically.
- Install Rubik Combined Listings from the Shopify App Store.
- Activate the app embed in your Shopify theme settings. This is a single toggle. The app auto-detects EComposer pages.
- Create a product group. Add the separate products you want to connect (for example, the same jacket in 4 colors).
- Click Magic Fill to auto-assign option values and swatch colors from product titles and images.
- Save and visit your EComposer product page. Swatches are there.
The entire process takes less than five minutes. For a detailed walkthrough, see the full setup guide.
Product page and collection page swatches
Rubik works on both product pages and collection pages when you use EComposer.
Product page swatches. These appear on the individual product page, usually near the product title or add-to-cart area. Customers see all grouped products as clickable swatches. Clicking one navigates to that product’s page with its own images, price, and SEO metadata. Each product in the group keeps its own URL. This is better for search rankings than cramming everything into a single product with dozens of variants. Read more about grouping products as variants.
Collection page swatches. When customers browse a collection page, each product card shows small swatches. Hovering or clicking a swatch previews that option. This works whether you built your collection page in EComposer or use the default theme collection template. Rubik injects swatches into whatever renders the collection grid. For styling options, see customize combined listing swatches.
Both types render in Shadow DOM, so EComposer styling stays separate from swatch styling. No CSS conflicts.
All 7 supported page builders
EComposer is one of seven page builders that Rubik Combined Listings supports. If you switch builders later, your groups and swatch settings carry over.
| Page builder | Rubik theme ID | Product page swatches | Collection page swatches | Shadow DOM |
|---|---|---|---|---|
| Beae | 88880006 | Yes | Yes | Yes |
| EComposer | 88880005 | Yes | Yes | Yes |
| Foxify | 88880007 | Yes | Yes | Yes |
| GemPages | 88880002 | Yes | Yes | Yes |
| Instant | 88880004 | Yes | Yes | Yes |
| PageFly | 88880003 | Yes | Yes | Yes |
| Replo | 88880001 | Yes | Yes | Yes |
On top of page builders, Rubik supports 350+ standard Shopify themes. If you switch from EComposer to a regular theme or to another page builder, your product groups transfer without any reconfiguration. See the full compatibility list at rubikswatch.com/docs.
Watch it in action
Frequently asked questions
Does Rubik Combined Listings work with EComposer?
Yes. Rubik includes dedicated code for EComposer (theme ID: 88880005). It detects EComposer product pages automatically, finds the product section inside the custom layout, and injects swatches in the correct position. No code changes needed in your EComposer templates.
Will EComposer custom CSS break the swatches?
No. Rubik renders swatches inside a Shadow DOM container. This creates a hard boundary between EComposer CSS and swatch CSS. Whatever custom styling you apply in EComposer stays isolated from the swatch component. Colors, fonts, spacing, and borders on the swatches remain exactly as you configured them.
What swatch types work on EComposer pages?
All four types: color (solid or dual-color), image, button, and dropdown. You can mix types within a single group. Configure them in the Rubik dashboard. See swatch customization options for details on sizing, shapes, borders, and hover behavior.
What if I switch from EComposer 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.
Related reading
- Combined listings setup guide
- Combined listings on GemPages
- Combined listings on PageFly
- Group products as variants
- Customize combined listing swatches
- Combined listings FAQ
- EComposer variant images (Rubik Variant Images)
- EComposer variant images (CraftShift)
- Swatch apps and store speed performance (CraftShift)
