Most shopify combined listings best practices posts are recycled lists of “use clear names” and “test on mobile”. Useless. This post is different from other best practices for combined listings on Shopify because it includes the combined learnings of Shopify combined listings best practices and practices that we’ve developed at Rubik from watching well over hundreds of successful installs go from install to launch, as well as from quietly watching the shop over the months after launch when a merchant might experience a dip in conversion that they don’t understand.
13 configurable options each with an opinionated default setting. Many of them conflict with the (otherwise excellent) Shopify documentation. We use these settings on our real (Rubik CL) stores, not just from the docs.
In this post
- 1. One axis per group, always
- 2. Match swatch colors to pixels, not guesses
- 3. Name options for shoppers, not for admin
- 4. Consistent first photo across linked products
- 5. Respect canonical tags
- 6. Don’t orphan out-of-stock options
- 7. Internal link between siblings
- 8. Test mobile tap targets
- 9. Accessibility is non-negotiable
- 10. Track swatch clicks in analytics
- 11. Watch performance on collection pages
- 12. Use per-group settings, not global overrides
- 13. Review groups quarterly
- FAQ
1. One axis per group, always
Your hero tee might come in 5 colors and 3 fabrics. Resist the urge to make one group with 15 linked products. Instead, organize by color (axis 1), and then create a second axis for fabric – or mark the different fabrics as native variants of the hero tee. Mixing axes within a group will confuse your customers and murder your analytics.
2. Match swatch colors to pixels, not guesses
This is the number one mistake made visually by someone picking “Navy” from a color picker and then having the color be off by 3 shades from the garment photo. Shoppers notice this immediately. Use an eyedropper tool to pick the exact hex from your real product photo. It only takes 10 seconds per color but looks perfect forever.
3. Name options for shoppers, not for admin
Internal SKU C04-NVY-HTR is displayed to customers as Heather Navy. Rubik allows you to assign an internal group name to a Colour Variant that only admin will see, and a separate name to be displayed on the site to customers. This allows you to keep SKU codes off the site, whilst maintaining a meaningful naming convention for admin and channel team.
4. Consistent first photo across linked products
When offering goods in different colours, make sure the same angle, model, etc is used, and that the border between the products isn’t abrupt (i.e. if the hero image of one product is a flat lay and the hero image of the other product is a model wearing it, this will look really cheap and nasty when someone tries to swap the two – it’s much better to recreate the flat lay for the second product, or reorder the images so that the model images are together and the flat lays are together).
5. Respect canonical tags
Each linked product should canonical to ITSELF, not to a master product. This is where some apps go wrong and damage your rankings. We keep canonicals as they are so each URL ranks independently. Please check in your theme head tag that the self-canonicals for linked products are in place after installing the plugin.
6. Don’t orphan out-of-stock options
When an item Colour sells out, don’t unpublish the product. Keep the product visible, just with a greyed out swatch, allowing customers to potentially still see it, signup for back-in-stock, or arrive at that URL from an old ad, which you wouldn’t if the product was unpublished. See out of stock handling.
7. Internal link between siblings
The Rubik’s swatch row already creates internal links, but your descriptions should too. If a product is part of a 6-color group, mention also available in other colors in the description with text links. This will help Google crawl the group and also create topical clustering for related colors.
8. Test mobile tap targets
Swatches under 44×44 are too small for accessibility, per Apple’s guidelines and human testing. By default, the Rubik control has nice, large type but if you’ve customized down on desktop for lack of width, you’ll inherit those tiny controls on mobile and have an ugly, hard to tap widget. Create a separate widget size for mobile.
9. Accessibility is non-negotiable
Each color option must be labeled for screen readers. Rubik generates ARIA labels from option values and this option should NOT be turned off. Additionally, color options should not be simply represented by color – the option name must also be included next to each swatch for customers who are colorblind.
10. Track swatch clicks in analytics
Event track swatch clicks on GA4 (or in the Rubik analytics panel) so you can see which color shade product clicks are happening on. You won’t be able to see which of those clicks turn into conversions without this step, but by tracking swatch clicks you’ll have insight into which colors may need better product images, product descriptions, or potentially just cut from the bunch.
11. Watch performance on collection pages
Collection swatches are useful, but every additional swatch increases the size of the page ever so slightly. A 48 tile collection would add up to 288 swatch elements. Rubik uses Shadow DOM and lazy loading to keep this feature cheap, but be sure to check your Lighthouse score. If your score drops more than 3 points, try to reduce the swatches per tile.
12. Use per-group settings, not global overrides
This program lets you set shape, size and style globally or per group. I set per group as I imagine each group could be set up differently. My t-shirt group could be large circles while my sofa group can have square fabric swatches for example. Global defaults are a quick fix that bite when you have more than 5 groups.
13. Review groups quarterly
Set a calendar reminder for every 3 months to do an audit of the groups. In that time, there are likely new colors to add and old ones to drop. While you’re doing the audit, verify that the swatch photos are still accurate to the latest product photography. This should only take about 30 minutes and prevents a slow and damaging decline in the shopper experience.
See it running
See the live demo store, watch the tutorial video, or read the getting started guide.
FAQ
What is the single most important combined listings best practice?
Make sure that the swatch color matches the actual product pixel perfect. If it doesn’t customers will notice right away and distrust your store. Everything else is irrelevant.
Do combined listings hurt SEO if I do them wrong?
Only if you ever write over canonicals or deindex linked products. Use a tool that respects canonicals like Rubik to make these problems disappear.
How many swatches per group is too many?
Over 50 starts to feel very overwhelming on product page. Organize by family of shades (all light, all dark, all neutral) if you have a large range of colors.
Should I use image swatches or color swatches?
Color swatches (solid colors) and swatches for patterns, fabrics / woods / multi-tones. You can populate a palette with a combination of both color and pattern / fabric / wood swatches.
Is it a best practice to show combined listing swatches on the homepage?
Usually no, homepage hero tiles should be driving clicks to a collection or product and not be a swatch decision surface. Swatches should live on collection and product pages.
How often should I audit my combined listings?
Every 2 years for active catalogs, every 6 years for slow-moving ones. Review for discontinued colors, new colors added and photo accuracy.
What’s the best practice for cart line grouping?
Keep linked products separate and distinct within the cart. Keep each related product as its own cart line. Product lines should reflect how linked products are grouped and sold, such as by color. Shoppers should be able to clearly tell they have selected two different colors and that there are two separate lines of products in the cart. Attempting to combine linked products into a single line in the cart can confuse the totals and the discount calculations for shoppers.
