Rubik Combined Listings is a Shopify app that takes separate products and connects them with visual swatches. Color circles, image thumbnails, text buttons, or dropdowns. Customers click a swatch and land on that product’s page with its own photos, price, and URL. No merging products. No restructuring your catalog. Each product stays independent while looking like a unified variant selector to shoppers.
This post covers every feature the app offers, how each one works, and when to use it.
Four Swatch Types
Color swatches display solid color circles (or two-tone splits) pulled from hex values you set manually or let the AI pick from product images. Best for products defined by color: clothing, phone cases, accessories, home decor.
Image swatches show a product image or a custom thumbnail as the swatch. Card-style layout with optional product name and price below the image. Ideal when color alone can’t represent the difference: fabrics, wood grains, printed patterns, stone textures. You can assign a custom swatch image per product that’s different from the featured image, useful for showing material close-ups or texture details. Video tutorial for custom images.
Button swatches are text-based with an optional image inside. Best for non-visual options: device models (iPhone 15 / iPhone 16), pack sizes (50ml / 100ml), material names where text communicates the difference better than any image could.
Dropdown menus render a native select element. Compact. Out-of-stock products automatically get “(Sold out)” appended. Use this when you have 20+ options and don’t want swatches taking up half the page.
All four types are available for both product pages and product cards on collection pages. You pick the type per group, so a “Color” group can use color swatches while a “Material” group on the same product uses image swatches.
Collection Page Swatches
Each product in a group keeps its own card in the collection grid. Swatches appear below the product card image, showing customers that other colors or options exist without clicking through.
Hover preview. When a customer hovers over a swatch on a collection page, the product card image swaps to show that product’s image instantly. No page load, no delay.
Click to switch. With this setting enabled, clicking a swatch on a product card updates the card’s image, link, title, price, and add-to-cart button without navigating away from the collection. The entire card transforms to represent the selected product. This can also be configured to update just the image or include the title and price as well.
Both behaviors are optional and controlled from Settings. You can run hover preview without click-to-switch, or both together.
Product Page Swatches
Swatches appear on the product page in the position where a variant selector would normally sit. Each swatch links to its respective product’s page. When clicked, the customer navigates to a full product page with that product’s own image gallery, description, price, and variants.
Since each color or option is its own Shopify product, customers see only the images relevant to the selected option. No image galleries cluttered with 40 photos from 8 different colors. Click “Navy” and you see Navy’s 5 photos. Click “Burgundy” and you see Burgundy’s 5 photos.
Swatches also appear on featured product sections and quick view modals, with independent visibility controls for each area.
AI Magic Fill
Creating a product group requires filling in an option value and picking colors for each product. For a group with 12 products, that’s 12 labels and 12 color pickers. Magic Fill does this automatically.
Click the Magic Fill button inside a product group and the AI analyzes product titles and images. It generates option value labels (like “Navy Blue”, “Forest Green”, “Heather Gray”) and assigns matching primary and secondary hex colors for each product. A 12-product group that would take 5 minutes to fill manually takes about 10 seconds with Magic Fill.
Every plan includes monthly AI credits, starting with 100 on the free plan.
AI Visual Settings Assistant
The visual settings editor has 70+ options. That’s powerful but can feel overwhelming if you just want your swatches to “look right.” The AI assistant sits inside the visual settings editor and lets you describe what you want in plain language.
Tell it “make the swatches smaller with rounded corners” or “I want circle swatches with a thick black border when active” and it adjusts the relevant settings. You see changes in real time in the preview. If you don’t like the result, tell it to try something different. It’s a conversation, not a one-shot prompt.
Visual Customization
Over 70 CSS variables control every aspect of swatch appearance. The visual settings editor groups them into logical sections:
Size and shape. Width, height, border radius (square, rounded, circle). Independent sizing for desktop and mobile so you can use larger touch targets on phones.
Border and active state. Border width, color, and style for default, hover, and active states. The active swatch (current product) gets its own distinct styling.
Typography. Font family, font size, text color, and alignment for swatch labels and prices.
Spacing and layout. Gap between swatches, padding inside swatches, layout direction (horizontal, vertical, grid). Carousel mode for groups with many products.
Style presets. 20+ pre-designed swatch layouts you can apply with one click and then customize further. Separate presets for product pages and product cards.
All settings are configured independently for four contexts: product page desktop, product page mobile, product card desktop, and product card mobile. What works on a large screen rarely works on a small one, so you have full control over each.
For advanced styling, the app supports custom CSS with access to all internal CSS variables. Swatches render inside Shadow DOM, isolating their styles from your theme’s CSS.
Built on Shopify Metaobjects
Product group data is stored using Shopify metaobjects. Each swatch holds a direct reference to its Shopify product. Because metaobjects pull product information natively, product details like price, availability, title, and images stay current on your storefront without any manual syncing or background jobs.
When you update a product’s price in Shopify, the swatch reflects it immediately. When you mark a product as sold out, the swatch updates instantly. There is no sync delay and nothing to trigger manually.
Out-of-Stock, Draft, and Archived Product Handling
Products in archived or draft status are automatically hidden from swatches. No manual intervention needed.
For out-of-stock products, you choose the behavior in Settings:
Hide completely. Out-of-stock swatches disappear from the row.
Push to end. Sold-out swatches move to the end of the swatch list so available products appear first.
Visual indicators. Per-group visual settings let you reduce opacity on sold-out swatches, add a strikethrough line, and customize the line color. The swatch stays visible but clearly marked as unavailable.
In dropdown mode, unavailable products automatically display “(Sold out)” next to their label.
Multiple Group Membership
A single product can belong to multiple groups simultaneously. A jacket can be in a “Color” group (color swatches) and a “Material” group (image swatches) at the same time. Both swatch rows appear on the product page, each operating independently.
Display order settings control which group appears first on the storefront.
Categories and Subgroups
Within a single product group, you can organize swatches into categories. A “Color” group with 20 products can be split into “Neutral Tones” and “Bold Colors” with category headers displayed above each section on the storefront.
Categories are managed in the product group editor. Enable category headers in visual settings to display the labels. Video tutorial for categories.
Bulk Group Creation
Setting up groups one at a time works for small catalogs. For stores with hundreds or thousands of products, the bulk grouping feature automates the process.
Choose a grouping method: title patterns (products sharing a base title get grouped), product tags, or metafields. The system analyzes your catalog, shows you the detected groups, and creates them all at once. A store with 500 products and consistent naming can set up 100+ groups in a single operation.
Translations and Multi-Language Support
Option names (“Color”), swatch labels (“Navy Blue”), and category headers (“Warm Tones”) can all be translated into any language configured in your Shopify store. Manage translations globally from the Translations page or per group from the group editor.
Currency formatting follows your Shopify store’s settings and works with Shopify Markets multi-currency setups.
Theme Compatibility
The app works with all Shopify themes. Dawn, Prestige, Impulse, Impact, Focal, Palo Alto, Symmetry, Stiletto, Broadcast, Release, and hundreds of others. A theme type system tells the app how each theme structures its product pages and collection grids, so swatches inject in the right spot.
For themes where automatic injection doesn’t place swatches exactly where you want them, app blocks give you drag-and-drop control. Go to the theme editor, find the Rubik Combined Listings block, and place it wherever you want on product pages or collection templates.
The app loads a single JavaScript file and a single CSS file, both async. Swatches render in Shadow DOM so they can’t conflict with your theme’s styles. Performance impact is minimal.
SEO: Every Product Keeps Its Own URL
Each product in a group stays a fully independent Shopify product. It keeps its own URL, meta title, meta description, product images, and Google Shopping feed entry. Search engines index each product page individually.
For stores where customers search by color (“navy linen blazer”, “red leather bag”), this means each color can rank on its own terms. Combined listings give you the visual connection between products that customers expect, without sacrificing the SEO advantage of separate pages.
Analytics Integration
A custom JavaScript event (rubik-combined-listings:swatch-click) fires every time a customer clicks a swatch. The event payload includes the clicked product, the source product, and the group. You can listen for it and forward data to Google Analytics, Facebook Pixel, or any other tracking tool.
Implementation details: Swatch click event documentation.
Try It
Demo store: combinedlistings.rubikdemo.com — browse collections, hover swatches, click through on desktop and mobile.
Video tutorial: Watch on YouTube
Install: Rubik Combined Listings (free plan available)
FAQ: Frequently Asked Questions
Docs: Documentation · Visual Settings Guide · Custom CSS Reference · Bulk Grouping Guide
More from CraftShift: How to Group Separate Products With Swatches · The Complete Guide · Best Combined Listings Apps Compared
