When you sell products in multiple colors, materials, or styles, your product page can get crowded with swatches fast. Ten swatches in a row is already a lot to scan. Twenty starts feeling chaotic.
The categories feature in Rubik Combined Listings solves this by splitting your swatches into labeled sections. Instead of one long row of swatches, your customers see organized groups like “Merino” and “Leather” or “Solid Colors” and “Patterns.”
In this guide, we’ll walk through the full setup: creating a product group, organizing swatches into categories, customizing the look, and showing swatches on product cards across your store.
If you prefer to watch a video you can also watch the following tutorial on our YouTube channel
Why keep products separate on Shopify?
Many Shopify merchants create each color or material as its own product listing rather than using variants. There are good reasons for this:
- Better SEO. Each product gets its own URL, title, and description. Google indexes them individually, which means more search result entries for your store.
- Sales channel flexibility. You can list different colors on different marketplaces or sales channels without worrying about variant-level restrictions.
- Cleaner analytics. You can track performance per color or material instead of digging into variant-level reports.
The tradeoff? Your customers can’t see that you offer the same product in other colors or materials. They land on one product page and have no way to discover the rest. That’s where product swatches come in.
Setting up product swatches (quick overview)
Before we get to categories, here’s the basic setup. If you’ve already created product groups, skip to the categories section.
Step 1: Install and activate
Install Rubik Combined Listings from the Shopify App Store. After installation, you’ll see a simple setup screen with two steps. First, activate the app on your theme by opening the theme editor and clicking Save. The app embed block will already be enabled.
Step 2: Create a product group
Click “Create product group,” give it a name (like “Handbags”), and select the products you want to link together. You can reorder them by dragging. Each product becomes a swatch on the product page.
Use Magic fill to save time
Instead of typing option values and picking colors manually, click the Magic fill button. The AI analyzes your product images and titles, then fills in the option labels and swatch colors automatically. This is especially useful when you have products that follow naming patterns like “Sarah Bra – Olive” or “Classic Tee / Navy.”
After saving, visit your product page. You’ll see swatches linking all your products together. Customers can now browse every version from a single page.
Organizing swatches into categories
Here’s where it gets interesting. Let’s say you sell handbags in two materials: Merino wool and leather. Without categories, all the swatches appear in a single row or grid. With categories, they’re split into clear sections with labels.
How to add categories
- Open your product group in the app.
- Find the product you want to categorize and click the “Set category” button.
- Click “Add new category” and type the category name (e.g., “Merino”).
- For the next product in the same category, just select the existing category from the dropdown.
- Create additional categories for other materials or styles (e.g., “Leather”).
- Save the product group.
Products without a category will appear in a default “uncategorized” section. You can assign every product to a category or leave some ungrouped.
When to use categories
Categories work best when your product group has many variations that fall into natural groupings:
- Material. Merino, Leather, Cotton, Silk
- Color family. Neutrals, Brights, Pastels
- Style. Classic, Modern, Vintage
- Collection. Spring 2026, Summer 2026
- Pattern. Solid, Striped, Plaid
The key benefit: customers can quickly scan the section that interests them instead of scrolling through every option. If someone is looking for leather handbags, they go straight to the “Leather” section.
Customizing how swatches look
The app offers multiple display styles you can apply to your swatches. You can switch between them at any time from the visual settings panel.
Display styles
- Visual swatches. Product images shown as thumbnails. Can include the product name and price below each swatch.
- Color circles. Solid color or texture circles (great when you have many options and want a compact display).
- Buttons. Text-based buttons with or without images. Good for materials, sizes, or non-visual options.
- Dropdown. A single dropdown selector (saves the most space on the page).
Each style can be further customized: border radius, spacing, colors, font sizes, and more. There are also presets you can apply with one click to get started quickly.
Custom swatch images
By default, swatches show the product’s featured image. But you can upload custom images for individual swatches. This is useful when you want to show a material texture, a close-up of the fabric, or a specific angle that highlights the color difference.
Custom images are stored as Shopify metaobjects, so they sync instantly and load fast on the storefront.
AI visual settings assistant
If the number of style options feels overwhelming, the built-in AI assistant can help. Just describe what you want in plain language:
- “Make swatches circular and smaller”
- “Reduce the gap between swatches”
- “Use pill-shaped buttons”
- “Show prices on swatches”
The AI adjusts the settings for you and shows a live preview. You can keep chatting to refine the look until it’s exactly right.
Swatches on product cards, search, and homepage
Swatches don’t just appear on the product page. The app also displays them on product cards throughout your store:
- Collection pages. Customers can hover over color swatches directly on the product card to see different versions.
- Homepage. Works on featured collections and product grid sections.
- Search overlay. Swatches appear in search results so customers can browse colors before clicking through.
- Featured product sections. If your theme has a featured product block, swatches work there too.
When there are too many swatches to display on a card, the app shows a “+2” (or however many remain) indicator. Customers can click it to see all options.
Different settings for mobile
Mobile screens have less space, so showing the same swatch layout as desktop doesn’t always work. The app lets you configure a separate swatch style for mobile devices.
For example, you might use large visual swatches with names and prices on desktop, but switch to compact color circles on mobile. Or use a carousel layout on mobile to let customers swipe through options without taking up vertical space.
The mobile presets are designed for smaller screens: tighter spacing, smaller images, and more compact layouts.
Watch the full tutorial
We recorded a step-by-step video walkthrough covering everything in this post, from creating your first product group to setting up categories and customizing the swatch appearance. Watch it here:
How to Organize Shopify Product Swatches into Sections by Material, Color & Style
Try it on your store
Rubik Combined Listings works on all Shopify plans. The free plan includes 5 product groups, which is enough to test the full feature set including categories, custom images, and AI tools.
- Install Rubik Combined Listings from the Shopify App Store
- Browse the demo store to see swatches in action
- Visual settings documentation for detailed customization options
- Knowledge base for step-by-step guides
If you run into anything or want help setting up categories for your products, reach out through the in-app support chat. We’re always available to help.
