Rubik Combined Listings on Clean Canvas themes fills a gap that has annoyed Symmetry and Showcase merchants for years. Both themes ship with solid product page layouts, strong typography, and sensible mobile behavior. What they do not ship with is a way to group separate products together and show color swatches on collection cards. That feature requires either Shopify Plus or an app, and we built the app.
Clean Canvas actually documents variant image and swatch support in their help center. They know their merchants want this functionality. But their built-in approach only covers native Shopify variants within a single product. The moment you split colors into separate products (which many stores do for SEO, inventory tracking, or to work around the 100-variant limit), Clean Canvas themes cannot help you. The collection page shows disconnected tiles with no visual relationship between them.
This is exactly what we designed Rubik Combined Listings to solve. Group your separate color products together, and swatches appear on both the collection cards and the product page. No code edits. No Plus requirement. Works on Symmetry (theme ID 568) and Showcase (theme ID 677) through the standard Shopify app embed system.
Table of contents
- Why Clean Canvas merchants need combined listings
- Symmetry theme specifics
- Showcase theme specifics
- Clean Canvas theme comparison table
- Setup on any Clean Canvas theme
- Collection page swatches on Clean Canvas
- Product page swatches for grouped products
- Pairing with Rubik Variant Images
- FAQ
Why Clean Canvas merchants need combined listings
Clean Canvas builds themes for merchants who value clarity over flashiness. Their themes are popular with fashion brands, jewelry stores, and homeware shops that want the product photography to do the talking. The design is intentionally restrained. And that restraint creates a specific problem when your catalog grows.
Consider a jewelry store on Symmetry selling earrings in gold, silver, and rose gold. Each metal is a separate product because the materials have different costs, different SKUs, and different product photos. On the collection page, three separate cards appear for what the customer perceives as one product in three finishes. The Clean Canvas aesthetic that is supposed to feel curated now feels redundant.
Combined listings fix this by grouping those three earring products. Rubik then injects a row of swatches (gold dot, silver dot, rose gold dot) onto each card. The shopper sees one card with three metal options instead of three identical-looking cards. That is the difference between a curated collection and a cluttered one. And for a theme studio called “Clean Canvas,” that difference sort of matters, doesn’t it?
The alternative is Shopify Plus at $2,300/month. Or manually editing Liquid templates and maintaining that code through every theme update. Or just accepting that your collection page looks messy. Rubik Combined Listings starts at $0/month. No Plus required.
Symmetry theme specifics
Symmetry (theme ID 568) is the bigger name in Clean Canvas’s lineup. It has been around for years, gone through multiple major updates, and remains a go-to for fashion and lifestyle stores that want a balanced, grid-based collection layout. The product cards are well-proportioned, the image ratios are configurable, and the overall vibe is “professional catalog.”
RCL works cleanly on Symmetry. The swatch row appears below the card title and price. Shadow DOM rendering keeps our swatch CSS completely isolated from Symmetry’s stylesheet, which matters because Symmetry applies fairly specific card styles that could interfere with raw CSS injections from other apps.
Something we noticed during testing: Symmetry’s “quick shop” overlay respects RCL swatches. When a shopper clicks the quick shop button on a grouped product, the overlay shows product details for that specific product, and the swatch row is visible so they can go to to other grouped products without going back to the collection page. Not every theme handles this well, but Symmetry’s overlay structure is clean enough for it to work.
Symmetry also supports multiple collection layout options (2, 3, or 4 column grids). RCL adapts to all of them. On 4-column layouts, the swatch overflow (“+4 more”) indicator becomes more important because card widths are narrower. We recommend testing your swatch count against the column width you are using and adjusting swatch size if needed. The visual settings panel makes this a two-click adjustment.
Showcase theme specifics
Showcase (theme ID 677) is the other Clean Canvas theme, and it is positioned more toward high-volume stores that need strong merchandising tools. Showcase has more sections, more layout presets, and more built-in features than Symmetry. It is the “we tried to think of everything” theme from Clean Canvas.
For combined listings, Showcase works well because its product card component is predictable and well-structured. The app embed injection targets the card element, and Showcase’s card HTML is standard enough for RCL to identify the correct insertion point without any theme-specific overrides. That is not always the case with heavily customized themes, but Clean Canvas keeps their HTML markup tidy.
Showcase supports tab-based collection navigation, which is slightly unusual. Some merchants use tabs to organize sub-collections within a single page. RCL handles this because the swatches are injected per card instance, not per page. If the same product card appears in two tabs, both instances get swatches.
One small tip for Showcase merchants: if you use Showcase’s “alternate” card layout (wider cards with side-aligned text), bump up the swatch size to medium. The default small size looks a bit lost on wide cards. The 19 built-in presets include a “medium relaxed” option that fits wide cards naturally.
Clean Canvas theme comparison table
| Feature | Symmetry | Showcase |
|---|---|---|
| Theme ID | 568 | 677 |
| Primary audience | Fashion, lifestyle, jewelry | High-volume, merchandising-heavy |
| Card layout | Balanced grid, configurable ratios | Multiple presets, wider cards |
| RCL support | Full | Full |
| Shadow DOM isolation | Yes | Yes |
| Quick shop overlay | Supported with swatches | Supported with swatches |
| Collection grid options | 2, 3, 4 columns | 2, 3, 4 columns + alternate layout |
| Best swatch type | Color circles | Medium color or image swatches |
| Recommended swatch size | Small or medium | Medium |
| Mobile swatch controls | Separate desktop/mobile | Separate desktop/mobile |
Setup on any Clean Canvas theme
Identical process for Symmetry and Showcase. About ten minutes for the first group, much faster after that because you will have the pattern down.
1. Install Rubik Combined Listings
Install from the Shopify App Store. Free plan covers 5 groups. Enough to validate on one product family before scaling up.
2. Enable the app embed
Open your Shopify admin, go to Online Store, Themes, Customize your Clean Canvas theme. Click the App embeds tab in the sidebar. Toggle Rubik Combined Listings on and save. This activates the swatch renderer everywhere your theme outputs product cards.
3. Create product groups
In the RCL admin, go to to Groups and create a new group. Add the products that represent variations of the same item. You have three approaches:
- Manual: Pick products individually from the resource picker. Best for stores with fewer than 50 products.
- Bulk grouping by title pattern: Rubik scans product titles, splits on a separator (like “Earring / Gold” and “Earring / Silver”), and auto-creates groups. Perfect for catalogs where the product naming follows a pattern.
- Bulk grouping by tags or metafields: Use structured tags or shared metafield values to define groups. Read the bulk grouping deep dive for format details.
4. Style the swatches
Open Visual Settings in the RCL admin. Start with a preset (there are 19, split between product page and product card styles) and adjust from there. You can set different configurations for desktop and mobile independently, so swatches that look great on a Symmetry desktop grid still work on a phone screen.
For Clean Canvas themes specifically, circle swatches with a thin border look the most natural. Both Symmetry and Showcase use clean lines and minimal decoration, so your swatch styling should match that restraint. Oversized swatches with thick borders would look out of place.
5. Check your storefront
Open a collection page and confirm swatches appear under grouped cards. Tap a swatch to verify the card image updates. Click through to confirm the linked product loads. Test on mobile. Done.
Collection page swatches on Clean Canvas
The whole point of collection page swatches is reducing friction between “I see a product I like” and “I found my preferred color.” Without swatches, a Clean Canvas collection page forces the shopper to click into each card, check the color, hit back, click the next card, check again. On mobile that is painful. Three taps and a page load just to compare two colors of the same bag.
With RCL, the comparison happens right on the card. Tap “Navy” dot, card image shows the navy version. Tap “Tan” dot, card image shows the tan version. The shopper decides which one to explore further and clicks through only once.
Clean Canvas themes render product images at consistent aspect ratios, which means the swatch-triggered image swap always looks correct. Some themes crop images unpredictably when swapping, but Symmetry and Showcase handle it well because their product card image containers are well-defined in the CSS.
For larger catalogs with many products per group (say, 15 fabric colors), the overflow pill (“+9 more”) keeps the card tidy. Shoppers who want to see all options can click through. Shoppers who just want one of the visible colors can pick it without extra navigation. This pattern works especially well on Symmetry’s 3-column layout.
More detail in the collection page swatch display guide.
Product page swatches for grouped products
When a shopper lands on a product page and that product belongs to a group, RCL shows a swatch row on the product page too. Each swatch represents another product in the group. Click it, and the browser navigates to that product’s URL.
On Symmetry, swatches appear above the native variant selector. On Showcase, the same default position applies. Both are adjustable. The swatch row sits inside the product form area, so it feels like a natural part of the page rather than an injected widget.
This is where the separate products vs variants SEO benefit becomes real. Each color product has its own URL, its own title, its own meta description, and its own product images. Google indexes them individually. But the shopper experience feels connected because swatches let them hop between related products with one click. You get the SEO of separate products and the UX of variants. That is the trade we built RCL to enable.
Pairing with Rubik Variant Images
Here is a question we get constantly: “Do I need both Rubik apps?” Depends on your setup.
Rubik Combined Listings handles cross-product grouping and collection page swatches. It connects separate products together and lets shoppers switch between them. But it does not filter images within a single product page when the shopper selects a variant.
That is what Rubik Variant Images does. Product page only, image filtering only. If your “Blue Earring” product has variants for “Hoop” and “Stud” and each variant has its own set of photos, RVI ensures the gallery shows only the Hoop photos when the shopper selects “Hoop.” Without it, all photos for both Hoop and Stud show at once.
Both apps run on Clean Canvas themes. Both use Shadow DOM. They do not conflict with each other. The typical setup for a jewelry store on Symmetry: RCL groups metals (Gold, Silver, Rose Gold as separate products with swatches), and RVI filters images per style variant within each metal product. The complete swatches guide on Craftshift walks through the full two-app workflow.
“I was struggling with separate product pages for different colors/flavors (e.g., aftershave red, green, blue as individual products for better SEO and unique URLs), but I wanted customers to see swatches and switch between them easily, like real variants – on BOTH the product page and collection pages (under each card). This app does it perfectly: Group products into combined listings, Add customizable color/image swatches, Swatches appear on product pages (click redirects smoothly to the other product’s page), Small swatches show up right under the product cards on collections, search, homepage – super clean and intuitive for shoppers, No extra fees, no add-ons in cart, no performance hit (site still loads fast).”
Ostwint, Romania, March 2026 – Rubik Combined Listings on the Shopify App Store
See the live demo store, watch the setup tutorial, or read the getting started documentation.
FAQ
Does Rubik Combined Listings work with Symmetry? Yes. Symmetry (theme ID 568) by Clean Canvas is fully supported. Install, enable the app embed, and swatches appear on collection and product pages.
Does it work with Showcase? Yes. Showcase (theme ID 677) works identically. Both Clean Canvas themes use Shopify’s standard app embed system.
Do I need to edit Clean Canvas theme code? No. RCL runs entirely through the app embed toggle in the theme customizer. No Liquid file edits needed. Uninstall later with no leftover code.
Clean Canvas already has built-in swatch support. Is RCL different? Yes. Clean Canvas’s built-in swatches apply to native Shopify variants within a single product. RCL connects separate products together and shows swatches across the collection page. These are different features that serve different needs.
Will RCL slow down my Clean Canvas collection pages? No. RCL is metafield-based, no external API calls. Swatch data loads with the page itself.
Do I need Shopify Plus? No. Rubik Combined Listings works on all plans: Basic, Shopify, Advanced, and Plus. Pricing is flat. Free (5 groups), Starter $10/month (100 groups), Advanced $30/month (500 groups), Premium $50/month (5,000 groups). Annual billing saves 17%.
Can I use RCL together with Rubik Variant Images on a Clean Canvas theme? Yes. RCL handles product grouping and collection swatches. RVI handles product page image filtering. They are built to work side by side. No CSS conflicts because both use Shadow DOM.
