Rubik Combined Listings Swatch - FAQ

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, or buttons.

Instead of merging products into a single listing with many variants, you keep each product as its own listing with its own URL, images, and SEO, while visually linking them together on product pages and collection pages. Customers can browse colors, materials, sizes, or styles without leaving the product page.

Install Rubik Combined Listings Swatch, activate the app embed on your theme, then create a product group. Add the products you want to link, assign an option name (such as "Color" or "Material"), and fill in each product's option value. Save the group and swatches will appear on each product's page, linking them together visually.

Each product keeps its own URL, images, and inventory. No code or theme editing is required.

Shopify's native Combined Listings feature is only available on Shopify Plus, and it merges products under a single parent listing. Rubik Combined Listings Swatch offers several advantages:

• Works on all Shopify plans
• Each product keeps its own independent listing, URL, and SEO value
• Image swatches, color swatches, buttons, and dropdowns, fully customizable
• Carousel layouts and hover previews on collection pages
• AI-powered Magic Fill to auto-generate option values and colors
• AI visual settings assistant to help design and customize swatch appearance
• Automatic hiding of archived, draft, or out-of-stock products from swatches
• Full visual customization with 70+ design settings
• Works on product pages, collection pages, quick views, and featured products

Yes. Products created through print-on-demand services like Printify, Printful, or Gooten can be grouped just like any other Shopify product. Since these services typically create separate product listings for each design or color, Rubik Combined Listings Swatch is an ideal way to link them together with visual swatches while keeping each product's independent fulfillment flow intact.

Yes. The app stores product group data using Shopify metaobjects, with each swatch holding a direct reference to its product. Because metaobjects pull product information natively, details like price, availability, title, and images are always up to date on your storefront without any manual syncing.

When you update a product in Shopify, the changes are reflected in the swatches immediately. There is no background sync process or delay to wait for.

After installing the app from the Shopify App Store, there are two required steps:

1. Activate the app embed: go to the Dashboard and click "Activate" or "Manage embed" in the App embed status section.
2. Create a product group: add the products you want to link, set an option name (like "Color"), fill in option values for each product, and save.

Swatches will immediately appear on your storefront. The app includes a built-in setup guide and video tutorial to walk you through the process. See the getting started guide for a step-by-step walkthrough.

On the Dashboard, you will see an "App embed status" section. Click "Activate" or "Manage embed" to open the theme management modal. From there, enable the app embed on your desired theme. The app embed is required for swatches to display on your storefront.

Theme types ensure that swatches are injected into the correct position for each theme. Every Shopify theme has its own HTML structure, so selecting the correct theme type allows the app to accurately place swatches on product pages, product cards, quick views, and other supported areas.

If swatches do not appear in the expected position, verify that the correct theme type is selected in Dashboard → Manage app embed.

App blocks are an optional way to control where swatches appear in your theme. They are especially useful for product card swatches, as they provide more precise placement and better performance. You can manage app blocks from the Dashboard in Easy mode (quick adjustment) or Advanced mode (per-template control).

If your theme supports app blocks, using them is recommended for the best experience.

The app offers three swatch types:

1. Image swatches: card-style swatches with a product image or color area and optional name and price below, ideal for color or material-based products.
2. Button swatches: text-based buttons with optional image inside, suitable for sizes or labels.
3. Dropdown: a native select menu with minimal layout impact, ideal when there are many options.

You can customize swatch size, shape (square, rounded, circle), border, spacing, active state, hover effects, fonts, colors, and more. Style presets let you apply a complete design with one click.

Yes. Each color variant remains a separate product with its own listing in collections. Rubik Combined Listings Swatch adds swatches to product cards on collection pages. When a customer hovers over a swatch, the product card image updates to show that color. You can also enable click-to-switch behavior so clicking a swatch updates the card's image, title, price, and add-to-cart button without navigating away from the collection page.

Yes. Each swatch links to its respective product page by default. When a customer clicks a color swatch on any product page, they navigate to the linked product's page where they see that product's full image gallery, description, and variants. Each product keeps its own unique URL, which is beneficial for SEO and allows customers to share or bookmark specific colors.

Yes. Since each color is a separate Shopify product, it has its own dedicated image gallery. Customers only see the images for the currently selected color, not every color's photos mixed together. This solves the common problem of product pages cluttered with images from all variants.

When a customer clicks a different color swatch, they navigate to that product's page with only its relevant images, descriptions, and variants.

Yes. Swatches can appear on product pages, product cards in collections, featured product sections, and quick view modals. You can independently control visibility for each area from the Settings page. This lets you, for example, show swatches on product pages and collection cards but disable them on featured product sections.

Yes. You can assign a dedicated custom image to each swatch that is different from the product's featured image. This is useful for showing fabric textures, material close-ups, or pattern details. Custom images are managed through Shopify's native metaobject editor and become available after the product group is saved for the first time. Watch the custom images video tutorial for a step-by-step walkthrough.

Yes. A single product can belong to multiple product groups at the same time. For example, a product can appear in both a "Color" group and a "Material" group, with each rendering as its own swatch row on the storefront. The display order setting controls which group appears first.

Categories let you organize swatches inside a single product group into subgroups. For example, under a "Color" option, you can separate swatches into "Warm Colors" and "Cool Colors." When category headers are enabled in visual settings, swatches are displayed under their respective labels on the storefront.

This is useful for stores with many product variants that benefit from organized, grouped presentation. Watch the categories video tutorial to see how it works.

Magic Fill uses AI to automatically generate option values and assign primary and secondary colors for products inside a group. Instead of manually entering labels like "Navy Blue" and picking hex color codes, you click Magic Fill and the system analyzes product titles and images to populate the fields automatically.

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

Yes. The bulk grouping feature lets you create 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. See bulk group creation for a detailed walkthrough, or watch the video tutorial.

This is especially useful for stores with hundreds or thousands of products that need to be linked by color or style.

Yes. The app supports multilingual stores by allowing you to translate option names, swatch labels, and categories into any language configured in your Shopify store. You can manage translations globally from the Translations page or per group from the edit page. Currency formatting follows your store's settings and works with multi-currency setups.

Out-of-stock behavior is controlled at two levels:

• Global settings: hide out-of-stock swatches entirely or push them to the end of the swatch list.
• Per-group visual settings: customize how sold-out products appear, including reduced opacity, strikethrough line, and custom line color.

In dropdown mode, unavailable products automatically display a "(Sold out)" label. Product availability auto-syncs in real time, so swatches update immediately when inventory changes.

By default, clicking a swatch on a product card navigates to that product's page. With "Click to switch product" enabled in Settings, clicking a swatch instead updates the card's image and link without navigating away. You can also enable "Update title and price on click" to refresh the displayed title and price, and "Update quick add to cart button" to point the add-to-cart action to the selected product.

The visual settings editor provides full control over swatch appearance with over 70 CSS variables. You can customize:

• Swatch type, size, shape, and border style
• Active state indicator and hover effects
• Spacing, padding, and layout direction
• Font family, font size, and text color
• Background colors and media area styling
• Carousel navigation arrows
• Out-of-stock appearance

Settings are configured independently for desktop and mobile, and for product pages and product cards. Style presets offer pre-designed layouts, and custom CSS lets you add advanced styling.

Style presets are ready-made swatch designs you can apply with one click. The app includes presets for both product pages (square swatches, circle swatches, carousel layouts, buttons with images) and product cards (compact variations). After applying a preset, you can further customize the design in the visual settings editor.

Yes. The app supports custom CSS for advanced styling. Because swatches render inside Shadow DOM, your custom CSS must be wrapped in the :host selector. You can override any of the 70+ CSS variables to change colors, sizes, spacing, fonts, and more. See the custom CSS reference for the full list of variables and examples.

The app offers two positioning methods:

1. Theme type detection: the default method automatically places swatches in the correct location based on your theme.
2. App blocks: for precise control, go to Dashboard → Manage app blocks and drag the swatch widget to your preferred position in the theme editor.

App blocks work for both product pages and collection pages and offer better performance and reliability.

Yes. Unlike traditional Shopify variants which share a single product URL, Rubik Combined Listings Swatch keeps each product as an independent listing. This means each product has its own:

• Unique URL (e.g., /products/blue-t-shirt, /products/red-t-shirt)
• Meta title and meta description
• Product images and image alt text
• Independent search engine ranking

This is particularly beneficial for stores that want each color or style to appear individually in search results and to have dedicated pages for social sharing and bookmarking.

If each color has unique images and you want them to rank independently in search results, keeping them as separate products is generally better for SEO. Each product gets its own URL, its own meta tags, and its own Google Shopping entry.

Rubik Combined Listings Swatch gives you the best of both worlds: products stay separate for SEO purposes while being visually linked together for the customer browsing experience. Customers see a unified product page with color swatches; search engines see separate, fully optimized product listings.

Yes. Since each product in a group is a separate Shopify product, every "variant" has its own unique URL. This means customers can share a direct link to the specific color or style they like, and search engines can index each product page individually.

Yes. Rubik Combined Listings Swatch is compatible with all Shopify themes, including popular ones like Dawn, Prestige, Impulse, Impact, Focal, Palo Alto, Symmetry, Stiletto, Broadcast, Release, and hundreds more. See the full list of supported themes. The app uses a theme type system that adapts swatch injection to each theme's structure.

If you experience positioning issues with a less common theme, you can use app blocks for precise control, or contact support for custom theme adjustments.

The app is designed to be lightweight. It uses a single JavaScript file and a single CSS file, both optimized for performance. Swatches render inside Shadow DOM, which isolates their styles from your theme and prevents CSS conflicts. The app loads asynchronously and does not block page rendering. For additional performance gains, you can use app blocks which load only where needed.

Yes. The free plan includes up to 5 product groups and 100 monthly AI credits at no cost. Paid plans include:

• Starter: $10/month (100 product groups, 1,000 AI credits)
• Advanced: $30/month (500 product groups, 5,000 AI credits)
• Premium: $50/month (5,000 product groups, 50,000 AI credits)

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

Check these steps in order:

1. Make sure the app embed is activated. Go to Dashboard and check the "App embed status" section.
2. Verify the app is enabled in Settings. The status badge should say "Active".
3. Confirm swatch visibility is turned on for the relevant area (product pages or product cards) in Settings.
4. Open the product group and make sure its status is "Active".
5. Ensure all products in the group have option values filled in, as empty values prevent swatches from rendering.

If swatches appear on product pages but not on collection or grid pages:

1. Go to Settings and make sure "Product card swatches" is turned on.
2. Verify the correct theme type is selected. The app uses theme-specific selectors to detect product cards.
3. Try adding the product card app block via Dashboard → Manage app blocks for more reliable positioning.
4. Make sure the relevant product group is active and includes the products in that collection.

If swatches render in an unexpected location:

1. Go to Dashboard → Manage app embed and verify the correct theme type is selected.
2. For precise positioning, use app blocks. Go to Dashboard → Manage app blocks → Product page widget and click "Change position" to drag the swatch block to your preferred location in the theme editor.
3. For product cards, add the product card widget app block to your collection templates.

Some themes replace parts of the product page DOM when a native Shopify variant is selected. The app includes a re-injection system that detects these changes and restores swatches automatically. If this is not working:

1. Verify the correct theme type is selected.
2. Make sure the app embed is active.
3. If the issue persists, contact support with your theme name and a product URL. Custom re-injection logic can be added for themes with non-standard behavior.

If changes appear in the admin preview but not on the live store:

1. Make sure you clicked "Done" in the Customize modal and then saved the product group. Closing the modal without confirming may leave changes unapplied.
2. Clear your browser cache or test in an incognito window, as storefront files can be cached.
3. Verify you are viewing the correct product group and context (product page vs product card, desktop vs mobile).

The app dispatches a custom JavaScript event (rubik-combined-listings:swatch-click) whenever a swatch is clicked on the storefront. You can listen for this event to send data to Google Analytics, Facebook Pixel, or any other tracking tool. The event includes details about the clicked product, the source product, and the group. See the swatch click event documentation for implementation details.

You can reach our team through live chat or from inside the app. We typically respond within a few hours and can help with theme compatibility issues, custom CSS, swatch positioning, and any other questions about the app.