If you created each color or style of your product as a separately in Shopify, you’ve probably noticed a problem. When a customer lands on one of those product pages, they have no idea that other versions exist. There’s no easy way for them to browse the other colors, materials, or styles you offer.
This guide will walk you through connecting those separate products and displaying color swatches on your product pages, collection pages, and search results using the Shopify app Rubik Combined Listings.
If you prefer to watch a video instead of reading, here is the video version of this post.
Why This Matters for Your Sales
Let’s say you sell a handbag in six colors. Each color has its own product page in Shopify. A customer finds the chocolate version through Google or your collection page, but they actually prefer clay or navy. Without swatches linking these products together, they’ll never know those options exist.
By default, Shopify does not show any visual connection between separate product listings. The customer sees one product, one set of images, and that’s it. If they don’t go hunting through your catalog on their own, you lose the sale.
After connecting your products with Rubik Combined Listings, here’s what changes:
On product pages, all available colors appear as clickable swatches below the product information. Customers can click any swatch to jump directly to that version.
On collection pages, each product card displays small color swatches underneath. Customers can hover over them to preview different options before clicking through.
This works on search results pages, featured product sections, and your home page, too.
Step 1: Install Rubik Combined Listings
Head to the Shopify App Store and install the app. There’s a free plan that lets you set up 5 product groups, which is a good way to test it out before committing.
After installation, the app will guide you through two setup steps.
Step 2: Activate the App on Your Theme
The first thing the app asks you to do is activate it on your Shopify theme. Click the button to open the theme editor.
Shopify will auto-toggle the app embed, but sometimes this causes the save button to stay grayed out. If that happens, just click the toggle off and on again. The save button should become active. Click save, then close that tab.
Back in the app, you’ll see the status change to “Enabled.”
This works with all Shopify themes, so you don’t need to worry about compatibility.
Step 3: Create a Product Group
Now it’s time to connect your separate products together. Click on “Create Product Group” and give it a name. This name is just for your own reference inside the app. It won’t show up anywhere on your storefront. Something descriptive like “Handbags” or “Running Shoes” works fine.
Next, search for the products you want to group together. Select all the color or style variations of the same product. For example, if you have the same handbag in six colors, select all six.
Step 4: Assign Colors with AI
This is where Rubik saves you a lot of time. Click the AI button, and it will automatically detect and assign color values to each product in your group. It also fills in option values that help with SEO.
The AI does a solid job in most cases. But if a color doesn’t look quite right, you can click on any swatch to adjust it manually. There’s a color picker that makes this quick and easy.
One recommendation: for product cards (collection pages), use color swatches since they’re small and easy to scan. For product pages where you have more space, you can use images instead to give customers a better preview.
Step 5: Save and Check Your Store
Click save, and you’re done with the basics. Open your store and refresh the page. You should see swatches already appearing on your product pages.
You can also check your collection pages and search results. The swatches will show up on product cards there as well, so customers can discover all your options no matter how they browse your store.
Customizing How Your Swatches Look
Rubik comes with several preset display styles you can choose from. Here are some of the things you can customize:
Swatch styles. Choose between color circles, squares, rounded corners, product images, or custom images. You can even show two-color swatches with diagonal, horizontal, or vertical splits.
Layout options. Display swatches in a grid or carousel. Pick the layout that works best for the number of variants you have.
Detailed view. For product pages, you can enable a more detailed swatch view that includes color names and individual prices. This is especially useful if your product versions have different price points.
Mobile-specific layouts. Since a big chunk of your traffic comes from mobile, Rubik lets you set a completely different swatch style for phones. For example, you might use image swatches on desktop but compact color circles on mobile.
Per-group customization. Different product groups can have different swatch styles. Your handbags might use image swatches while your t-shirts use simple color circles.
Using the AI Style Editor
If you don’t want to dig through settings menus, Rubik has a built-in AI editor that understands simple text commands. You can type things like:
- “Make corners rounded”
- “Make border color brown”
- “Make swatches smaller”
The changes apply instantly, so you can see the results in real time and decide if you like the look.
Organizing Products with Categories
If you sell products in different tiers (like a standard line and a limited edition), you can create categories within a product group. This adds a visual label that helps customers see the distinction between versions.
To set this up, go to a product in your group, click on the category option, and add a new entry like “Limited Edition.” Assign it to the relevant products and save. On your storefront, customers will see these categories as separate sections within the swatches.
This feature uses Shopify metaobjects under the hood, which keeps things fast and native to the platform.
Managing Out-of-Stock Products
Under the app settings, you’ll find options for handling products that are out of stock:
- Push out-of-stock swatches to the end of the list (this is the default behavior)
- Hide out-of-stock swatches completely
- Show them as crossed out
The app also automatically excludes draft and archived products, so you don’t need to clean those up manually.
Where Swatches Appear on Your Store
Once everything is set up, swatches will show across your entire store:
- Product pages (below product information)
- Collection pages (on product cards)
- Search results pages
- Featured product sections
- Home page product displays
You can also disable swatches on specific pages if you don’t want them everywhere.
