Rubik Combined Listings Swatch - Overview

← Back to documentation

Rubik Combined Listings Swatch is a Shopify app that lets you group separate products and display them as visual variants using color swatches, image swatches, buttons, or dropdowns. Each product keeps its own URL, images, and SEO while being visually linked together on product pages and collection pages.

What it does

Instead of merging colors or styles into a single Shopify product with many variants, you keep each one as its own independent listing. Rubik Combined Listings Swatch connects them visually so customers can browse and switch between options directly on the product page or collection page.

• Customers click a color swatch and navigate to that product's dedicated page with its own image gallery
• On collection pages, hovering a swatch updates the product card image in real time
• Each product retains its own URL, meta tags, pricing, inventory, and search ranking
• No code or theme editing required

Swatch types

Three swatch types are available, each suited to different product catalogs:

• Image swatches — card-style swatches showing a product image or color swatch with an optional label and price. Ideal for colors, materials, and patterns.
• Button swatches — text-based buttons with optional image. Suited for sizes, labels, and text-heavy options.
• Dropdown — a native select menu with minimal layout footprint. Best when there are many options or limited space.

Where swatches appear

• Product pages — swatches appear on each product's page, linking to the other products in the group
• Collection pages — swatches appear on product cards with hover-to-preview and click-to-switch behavior
• Quick view modals — swatches work inside theme quick view overlays
• Featured product sections — swatches display in featured product blocks on your homepage or landing pages

Visibility for each area is independently controllable from the Settings page. See use cases for common merchant scenarios and live demos.

Visual customization

Every aspect of swatch appearance is configurable through a visual settings editor with over 70 CSS variables:

• Swatch size, shape (square, rounded, circle), and border style
• Active state indicator (border highlight or color invert)
• Hover effects (lift, shadow, border change)
• Font, text color, spacing, and alignment
• Carousel layout with navigation arrows
• Grid or carousel layout per group
• Tooltips on hover

Settings are configured independently for desktop and mobile, and for product pages and product cards. Style presets let you apply a complete design with one click. See the visual settings guide for the full reference, or custom CSS for advanced styling.

Product groups and categories

Products are organized into groups. Each group has an option name (such as "Color" or "Material") and each product in the group has an option value (such as "Blue" or "Cotton").

• A single product can belong to multiple groups (e.g., both a "Color" group and a "Material" group)
• Swatches within a group can be organized into categories (e.g., "Warm Colors" and "Cool Colors")
• Display order controls which group appears first on the storefront
• Each group can have its own independent visual settings

AI-powered features

• Magic Fill — AI analyzes product titles and images to automatically generate option values and assign primary and secondary colors. Saves time when setting up groups with many products.
• AI visual settings assistant — describe the look you want in plain language and the assistant adjusts swatch styling to match.

Every plan includes monthly AI credits, starting with 100 credits on the free plan.

Bulk group creation

The bulk grouping feature creates multiple product groups at once based on title patterns, product tags, or metafields. The system analyzes your product catalog, detects products that should be grouped together, and creates the groups automatically. Useful for stores with hundreds or thousands of products.

Out-of-stock handling

• Hide out-of-stock swatches entirely or push them to the end of the list
• Sold-out products display with reduced opacity and an optional diagonal strikethrough line
• Dropdowns show a "(Sold out)" label automatically
• Availability syncs in real time — no manual updates needed

Collection page features

• Hover to preview — hovering a swatch on a product card swaps the card image to show that product
• Click to switch — clicking a swatch updates the card's image, title, price, and add-to-cart button without page navigation
• Limit visible swatches — show a set number of swatches with a "+n" overflow indicator that expands on click
• Limit to one row — dynamically fit swatches into a single row based on available card width

Multilingual and multi-currency

Option names, swatch labels, and categories can be translated into any language configured in your Shopify store. Translations can be managed globally or per group. Currency formatting follows your store's settings and works with multi-currency setups.

Theme compatibility

Rubik Combined Listings Swatch works with all Shopify themes, including Dawn, Prestige, Impulse, Impact, Focal, Palo Alto, Symmetry, Stiletto, Broadcast, Release, and 350+ more. See the full supported themes list. A theme type system adapts swatch placement to each theme's HTML structure. App blocks provide precise positioning for themes that support them.

SEO and performance

Each product keeps its own URL, meta tags, image gallery, and search ranking. Products appear individually in Google Shopping feeds. Swatches create internal cross-links between related products. The app loads asynchronously with a single JS and CSS file, uses lazy-loaded images, and renders inside Shadow DOM to prevent CSS conflicts. See SEO benefits for the full breakdown.

Accessibility

Swatches include ARIA labels, keyboard navigation, screen reader support, focus management, and color-independent state indicators. See accessibility for details.

Analytics integration

A custom JavaScript event fires on every swatch click with product ID, title, URL, price, and context. You can forward this data to Google Analytics, Facebook Pixel, or any tracking tool. See swatch click event for implementation details.

Auto-sync

Product group data is stored using Shopify metaobjects with direct product references. Prices, availability, titles, and images update automatically when you change a product in Shopify. No background sync process or delay.

Pricing

Plan	Price	Product groups	AI credits/month
Free	$0	5	100
Starter	$10/month	100	1,000
Advanced	$30/month	500	5,000
Premium	$50/month	5,000	50,000

Annual billing saves 17%. All plans include the full feature set with no feature restrictions — only group count and AI credit limits differ.

Getting started

1. Install Rubik Combined Listings Swatch from the Shopify App Store
2. Activate the app embed on your theme from the Dashboard
3. Create a product group, add products, set option names and values, and save

Swatches appear on your storefront immediately. No code or theme editing required. For a detailed walkthrough with video, see the getting started guide.