Fuel Themes builds seven Shopify themes that span fashion, food, outdoor gear, and general retail. Reformation, Pinnacle, Vision, Distinctive, Habitat, North, Ascension. Seven themes covering seven different verticals, and all seven work with Rubik Combined Listings through the standard app embed toggle. No code edits. No Plus plan. No theme-specific hacks.
But “it works” is not particularly useful advice, is it? What you actually want to know is which swatch style looks right on Reformation’s minimal cards versus Pinnacle’s feature-rich product grid, how to handle the compact card layouts in North, and whether AI Magic Fill picks up the right hex values on dark-background themes like Vision. That is what this guide covers.
We have verified Rubik Combined Listings on every Fuel Themes product across their full preset range (over 25 preset variations combined). The collection page swatch display guide covers general principles, but this post is specific to Fuel Themes stores.
In this guide
- Reformation
- Pinnacle
- Vision
- Distinctive
- Habitat
- North
- Ascension
- Comparison table
- Setup walkthrough
- FAQ
Reformation
Reformation is the fashion-focused Fuel theme. Clean lines, serif typography, and product cards that let the product photography speak. If you sell apparel with separate products per color (one listing for “Wool Coat Navy,” another for “Wool Coat Sand”), Reformation’s collection grid turns into a wall of near-identical cards. That is the exact problem combined listings solve.
Recommended preset: Minimal Circle. Reformation’s restrained design wants swatches that whisper, not shout. Thin borders, 24px diameter, brand-matched active state color. The AI Visual Assistant can help here: type “make swatches match my brand accent color” and it adjusts the CSS variables for you.
One detail worth knowing: Reformation’s “Quick view” modal does show RCL grouped product swatches if the product belongs to a group. Shoppers can switch colors without leaving the collection page at all.
Pinnacle
Pinnacle is the feature-dense Fuel theme. Product comparison grids, advanced mega menus, and cards that support badges, review counts, and multi-column layouts. If Reformation is a gallery, Pinnacle is a catalog. Why does that matter for swatches? Because Pinnacle cards already have a lot going on, and you need to be deliberate about swatch sizing.
Recommended preset: Compact Circle at 20px with 3px gap. Pinnacle’s cards are already tall, so keeping swatches compact prevents additional card height that could break the grid alignment. The 104 CSS variables RCL exposes let you fine-tune the exact pixel gap if the preset does not land perfectly.
Pinnacle stores often have 200+ product families. Use bulk grouping by title pattern to create all your groups in one pass instead of building them manually.
Vision
Vision supports dark mode presets. And dark mode is where most swatch apps fall apart because default border colors disappear into the background. We see this in support constantly. Someone switches to a dark preset, and their swatches vanish.
On Vision’s dark presets, use the Filled Circle preset and set the active border to white (#FFFFFF) or a bright accent. The swatch fill color comes from the product group’s color assignment (or AI Magic Fill auto-detection), and the bright border provides the contrast needed on dark backgrounds.
Vision also does a nice job with video backgrounds on the home page. RCL swatches on featured collection sections render cleanly over these video sections because the swatch container has its own opaque background inside the Shadow DOM.
Distinctive
Distinctive targets stores with a strong brand identity. Bold color schemes, custom accent colors throughout, and product cards with rounded corners. The rounded card aesthetic pairs naturally with rounded swatch shapes.
Recommended preset: Filled Circle or Rounded Square. Match the swatch corner radius to the card corner radius for a cohesive look. If Distinctive uses 8px border-radius on cards, set the swatch corner radius to 4-6px in the visual editor.
Habitat
Habitat is built for outdoor and lifestyle brands. Earthy tones, nature photography, and a layout that supports both 2-column and 4-column collection grids. Habitat stores often group by material or colorway: “Trail Pack” in Canvas, Nylon, and Waxed Cotton.
For material-based grouping, skip color swatches entirely and use Pill Button with text labels. “Canvas,” “Nylon,” “Waxed Cotton” as text pills communicate more than abstract color circles when the distinction is material, not color. RCL’s dropdown swatch type also works well for Habitat stores with 10+ material variants in a single group.
North
North is the compact, speed-optimized Fuel theme. Product cards are intentionally small, and the collection grid prioritizes density. North stores want shoppers to scan 20+ products per scroll, which means card height is precious.
Recommended preset: Compact Circle at minimum size (18px). On North, even 24px swatches start to feel large relative to the card. Keep the overflow set to “+N” so groups with many options do not push the card too tall. And honestly? North’s density-first approach is one of the strongest arguments for combined listings. Without grouping, a store with 5 colors per style at 200 styles shows 1,000 nearly identical cards. With RCL, it shows 200 cards with swatch rows. Night and day for browsing.
Ascension
Ascension is the newest Fuel theme and the most flexible. Modular sections, drag-and-drop layouts, and a product card that adapts to section context. Ascension’s flexibility means RCL swatches need to adapt too, which is why the per-context settings (product card desktop, product card mobile, product page desktop, product page mobile) are particularly useful here.
Recommended preset: Start with Outlined Circle and adjust per section. If your home page featured collection uses a 2-column layout but your main collection page uses 4 columns, you might want different swatch sizes. RCL’s desktop product card settings apply everywhere product cards render, so size them for the tightest layout (your 4-column grid) and they will look fine in the wider 2-column view too.
Comparison table
| Theme | Presets | Best RCL preset | Card density | Vertical focus |
|---|---|---|---|---|
| Reformation | 4 | Minimal Circle | Medium | Fashion |
| Pinnacle | 4 | Compact Circle | High | Large catalogs |
| Vision | 3 | Filled Circle | Medium | Tech, dark mode brands |
| Distinctive | 3 | Rounded Square | Medium | Strong brand identity |
| Habitat | 3 | Pill Button | Low-Medium | Outdoor, lifestyle |
| North | 3 | Compact Circle (18px) | High | Density-first retail |
| Ascension | 4 | Outlined Circle | Flexible | Multi-niche |
Setup walkthrough
Same process for all seven Fuel themes. Under fifteen minutes.
- Install Rubik Combined Listings from the Shopify App Store. Free plan gives you 5 groups.
- Toggle the app embed in Online Store, Themes, Customize, App embeds.
- Create groups. Manual, bulk by title pattern, bulk by tags, or AI auto-grouping.
- Set swatch appearance. Pick a preset from the recommendations above, then fine-tune shape, size, border, and spacing.
- Verify. Check your collection page, search results, and home page featured collection. All should show swatches.
If you also need variant image filtering on product pages, add Rubik Variant Images as the companion app. RCL handles the collection layer, RVI handles the product page gallery layer. The two apps share no dependencies, they just work alongside each other.
“Great app and the customer service was insane. They answer quickly and even uploaded a Youtube video just to explain how solve on of our problems. The app is also great, has every functionality you could need.”
Vista, France, February 2026 – Rubik Combined Listings on the Shopify App Store
Pricing
Flat pricing across all Shopify plans. No feature gating, just group count limits:
Free ($0/5 groups), Starter ($10/100 groups), Advanced ($30/500 groups), Premium ($50/5,000 groups). Annual billing saves 17%. Every plan includes AI Magic Fill and AI Visual Assistant credits.
See the live demo store, watch the setup tutorial, or read the getting started docs.
FAQ
Are all 7 Fuel Themes themes supported by RCL? Yes. Reformation, Pinnacle, Vision, Distinctive, Habitat, North, and Ascension all work via the app embed system.
My Vision theme uses dark mode. Why are swatches invisible? The default border color is too close to the dark background. Switch to Filled Circle and set the active border to white or a high-contrast accent in the visual editor.
Can I use text pills instead of color circles? Yes. The Pill Button preset shows text labels like “Canvas” or “Nylon” instead of color swatches. Great for material-based grouping on Habitat or Pinnacle.
Will RCL slow down my Fuel theme? No. RCL is metafield-based, no external API calls. Swatch data loads with the page, not from a third party server.
Do I need Shopify Plus to use combined listings on Fuel themes? No. RCL works on every Shopify plan. Plus is not required.
What if I have 300+ product families to group? Use bulk grouping by title pattern, product tags, or metafields. Read the bulk grouping guide for the full walkthrough.
How does RCL handle out-of-stock products in a group? Archived or draft products are hidden from the swatch row automatically. You can also configure out-of-stock swatches to show as greyed out or hidden entirely. See the out-of-stock handling guide for details.
Comments are closed.