Conversion rate is the most abused metric in ecommerce. Everyone touts up their app’s “% lift” , few can actually back it up with math, and I’d rather avoid tossing out potentially inaccurate numbers today. Rather, I’ll simply state that adding color and/or material swatches to product cards and regular product pages will improve your shopify combined listings conversion rates. And now that most stores have analytics/crappy pageview tracking in place, you can put this advice to the test on your own site.
Short version: swatches kill decision friction by making options more accessible. Decision friction is one of the biggest killers of conversion rate, especially on mobile. Rubik Combined Listings enables swatches in two places: in the collection card for the first look, and in the product page where the decision is actually made. Fewer clicks to find the variant. Fewer thumb taps on mobile to find the size/colour/etc you need. Fewer failed sessions because your customer assumed you only sold one colour (when in fact you have 20 colours and lots of other options).
In this post
- Where conversion leaks start
- Visual previews beat text variants
- Mobile UX: thumb reach matters
- The collection page effect
- The product page effect
- How to measure lift honestly
- FAQ
- Related reading
Where conversion leaks start
Every click, every choice, every potential customer is about to decide to leave your store. Drop the glass of milk, go watch TikTok, forget your store existed. As retailers, our goal is to reduce the number of decisions that must occur between the customer wanting to buy something and actually buying something in your store.
By not showing combined variant products, your customers only see one image per product on your collection page. So they don’t even know that there are charcoal and oat versions of the charcoal linen shirt. They click to view the charcoal one, like it, then click the back button to see more charcoal options. After a few clicks on the collection page, they realize that the last one they viewed was just the oat version of the same shirt. They are confused and annoyed and leave your site.
Swatches on the collection page collapes the journey down to zero clicks for customers. Swatches displays all of the sizes available for a product on the collection page in the form of swatches directly above the product image, giving the shopper a quick glance at every option. Once they see what is available, they can make a decision and never have to click to the individual product page.
Visual previews beat text variants
By default, Shopify’s native variant picker is usually a dropdown or a button. ” Charcoal.” ” Oat.” ” Navy.” Text. Unless the shopper already knows exactly which charcoal you mean, they have to click to see. variant pickers present each option individually so customers can compare details before making a choice. Click through to see examples!
Check the swatch for charcoal. It is 2 pixels deep and exact in color. You don’t have to imagine this fabric. People process visuals faster than text – about 10 times faster. So by the time they could read the description of the charcoal, they’ll already have made a decision – and be likely to complete the sale.
Here is a side by side comparison of how it would look beating text, and a close up of how the swatches on product cards show the pattern.
Mobile UX: thumb reach matters
Many of the problems discussed in 1 disappear on the desktop computer. On desktop, you can click around and no one gets hurt. But on mobile, every tap is a thumb stretch, and every page load is a 300ms to 2 second wait for results. In that space, attention dies.
Swatches on a product card so customers can see all the variants without having to click to view them. Swatches on the product details page so customers can see what colour fits best without leaving the page. And if you have Rubik Combined Listings and Rubik Variant Images enabled, the product gallery will update too. Fewer page loads. Less thumb fatigue. Higher mobile conversions. It’s not hard maths, it’s basic interaction cost.
The collection page effect
This is the biggest win. Most stores only think about product page conversion. They forget that the collection page is where most shoppers will spend their first 30 seconds interacting with your store.
No swatches makes a page showing 24 variants of the same product (24 “Linen Shirts” in this case) look like a massive product catalog. People will scroll through the page, but soon give up on finding what they like. With combined swatches, the same page of products is reduced from 24 individual cards to 4 cards with 6 dots each. The same products, made easier to shop. A more curated catalog experience. Shoppers are able to browse longer and find what they are looking for.
Displaying product image swatches on your site can greatly improve conversion rates on collection pages. Here’s a guide on the best way to set up swatch displays on collection pages in Stores. Also, don’t forget product pages, but generally speaking conversion lift will be greater on collection pages. Your mileage may vary.
The product page effect
On the page showing all products (i.e. the store) the effect is different, because the shopper is already convinced that you sell what they need, now they are checking if you sell what they want.
A 20-swatch grouped product page suggests range, suggests choice, suggests that this store knows what it’s doing. Next to it sits the single-variant dropdown for the simple product type: “Color: Navy” – even that word seems somehow bland and boring. A properly done grouped product page looks like a real brand/site, as opposed to a store using plain shop/product templates.
Rubik also allows you to group together separate products rather than just their variants. Meaning you can avoid the Shopify limit of 100 variants per product by showing 2048 variants instead. See here for how.
How to measure lift honestly
It’s hard to measure conversion lift from a feature. It’s hard to know if a feature is helping your business. You can’t just look at last month to this month and expect to get accurate results. There are so many external factors that can skew your numbers including seasonality, ad spend, new product releases, and random noise.
The honest way:
- Split test. Enable Rubik on half your traffic, leave the other half on native. Run for two weeks minimum.
- Track swatch clicks in GA4 so you can see engagement independent of purchase.
- Compare add-to-cart rate, not session-to-purchase. Cart rate is the cleanest signal for UI changes.
- Segment by device. Mobile usually shows the biggest lift.
- Look at bounce rate on collection pages specifically.
You will be able to see whether or not rubikShake To Earn Rubik (the) rubik is helping your store. And you’ll be able to see it in the data – and believe the numbers you’ve measured for yourself rather than the made-up numbers I come up with.
See the live demo store, watch the tutorial video, or read the getting started guide.
Frequently asked questions
Do combined listings actually improve Shopify conversion rate?
10-In-principle they help cut-down on decision friction, enable variant discovery with zero clicks, and facilitate the experience on mobile. But actually measuring the lift will require looking at your specific site’s data.
Where does combined listings lift conversion the most?
Typically highest impact on default price sorting lists such as your collection page. Effects on individual product pages are real, but much smaller.
Does mobile benefit more than desktop?
Typically yes. The mobile user has a higher interaction cost per tap on mobile compared to desktop. Reducing the number of taps is even more critical as mobile users have less patience and higher interaction costs and are also less tolerant of slow page load times.
How long should I test before trusting the numbers?
At least two weeks. One week is too short to wash out weekday vs weekend noise.
Should I track add-to-cart or purchase rate?
Add-to-cart. It is the cleanest signal for a UI change. Purchase rate is too noisy and is affected by too many downstream factors like shipping, checkout friction and payment.
Does showing more variants hurt conversion?
This one only applies if you have ever loaded out 50 swatches at a time in one row with no hierarchy. If you are going to do this, please organize those swatches in categories, display the top sellers first, and either paginate the categories appropriately or give your users a way to scroll/expand the category view. Nobody wants to sift through endless rows of the same products, unless they’re shopping by price, in which case please, pretty much perfect the search function and everyone will be fine.
Do combined listings help SEO as well as conversion?
Yes. We can index separate products for each color, so the pants could rank for ‘black tuxedo pants’ or ‘beige tuxedo pants’ for different keywords. Showing combined product also allows for SEO benefits and a single product page experience for the customer.
