Shopify combined listings with different prices per color

June 24, 2026
Combined Listings
14 min read
three color swatch dots each with its own small price tag, linked together by a line

Setting different prices per color on Shopify is messy with native variants, and the cleanest fix is to make each color its own product and link them with combined listings. Picture a backpack sold in canvas and full-grain leather. The leather one costs more to make, so it should cost more to buy. But if both colors live as variants under one product, Shopify shows a single price on the page, and that price either lies about the leather or undersells the canvas.

This is one of the most common structure questions we get on the combined listings side. Merchants want color swatches that feel like real variants, but they also need the leather colorway to ring up at its own price, with its own photos, on its own URL. Native variants fight that. Separate products solve it.

So here’s the short version. Make one product per color (or per material). Set each product’s price independently. Then group them with Rubik Combined Listings so the swatches still appear on the product page and the collection grid, and each swatch click loads that color’s product, with that color’s price. You get clean per-color pricing and a switching experience that looks like variants. Let’s get into why this works and how to set it up.

In this post

Why native variants choke on per-color pricing

Shopify variants do support different prices. You can give the leather variant one price and the canvas variant another. That part works. The problem is what the customer sees before they pick anything, and how that single product page handles the mismatch.

A variant-based product page shows one price at the top until the shopper selects an option. Themes handle that “from” state in different ways. Some show the lowest variant price. Some show the first variant’s price. Some show a range. None of those are great when one color costs 40% more than another, because the headline number sets an expectation that breaks the moment someone clicks the pricier swatch. We’ve seen this exact pattern frustrate merchants who set different prices per variant and then wonder why the page feels off.

And then there’s the catalog math. Shopify gives you 100 variants per product by default. If your premium colorway also comes in eight sizes, and you’ve got six colors, you’re multiplying fast. Mixed pricing across a big variant matrix gets clumsy to manage in the variant editor, and bulk price edits turn into a chore. Why fight a single product page that was never built to present several distinct price points cleanly?

There’s a deeper issue too. One product page means one URL, one title, one meta description, one set of images shared across every color. The pricier leather colorway has no room to tell its own story. It can’t rank on its own. It can’t be shared on its own. That’s a lot to give up just to keep colors stuffed into one product.

The fix: one product per color, linked as a group

Make each color a standalone Shopify product. Canvas backpack: its own product, its own price. Leather backpack: its own product, its own (higher) price. Each one carries the price it deserves, with no shared headline number to compromise. Then you link them into a group with Rubik Combined Listings, and the app renders color swatches on both the product page and the collection cards.

Click a swatch and the app switches to that color’s product. The shopper experiences it like a variant selector, but under the hood each color is a real, independent product with its own price tag. This is the structure people mean when they talk about product siblings, and it’s the right call whenever colors or materials need separate prices.

Two more things this buys you. First, it bypasses the 100-variant limit without Shopify Plus, because each product holds only its own size/option matrix. Second, real-time sync. The app uses Shopify metaobject references, so if your leather colorway sells out or you set it to draft, its swatch drops off the group automatically. No stale swatch pointing at a dead product. We built it that way on purpose, because nothing erodes trust faster than a swatch that 404s.

Rubik Combined Listings rich swatch customization grouping separate color products on a Shopify product page

Showing different prices per color: range vs per-swatch

Here’s where the separate-products approach actually wins on the price question. Because each color is its own product, each swatch knows its own price. So the display can update as the shopper switches, instead of being stuck on one frozen number.

On a collection card showing the whole group, your theme can present a price range across the linked colors. Canvas at the low end, leather at the high end, shown as a “from” price or a range depending on how your theme renders grouped pricing. That’s honest. It tells the shopper up front that prices differ by color, instead of hiding the leather premium behind a single teaser number.

The more interesting behavior is per-swatch price updates. When a shopper clicks a swatch, Rubik Combined Listings fires a JavaScript event that carries that product’s price data, including the price, whether it has a price range, and any compare-at price. Themes and developers can hook that event to update the visible price the instant a color is selected. Click canvas, see the canvas price. Click leather, the number jumps to the leather price. No page reload needed for the card-level switch.

What gets carried in that event? Quite a lot. The relevant pricing fields are the product price, the price with currency formatting, a flag for whether the product has a price range, and both the compare-at price and its formatted version. That’s everything a theme needs to show an accurate, color-specific price (including a strikethrough sale price) the moment someone taps a swatch.

Swatch clicks updating price on collection cards

Collection pages are where per-color pricing gets tricky, and where the two approaches really split. Worth being precise here, because it’s a common point of confusion.

If all your colors are variants of one product, card swatches can swap the image and update the price within that single product’s variants. Product card swatches in Rubik Variant Images do exactly that, click a card swatch and it swaps the card image, and can update the card price and add-to-cart link, all for one product’s own variants. Great when one product genuinely holds all the colors at variant-level prices.

But that’s not the per-color-pricing scenario most stores want. When each color is its own separate product (its own price, its own URL), you need the swatch to switch between products, not between variants. That’s Rubik Combined Listings. On the collection grid, the group’s swatches let a shopper jump from the canvas card to the leather card, and each one shows its own price because each one is a different product. Same swatch UI, different mechanism underneath.

  • Colors as variants of one product: use RVI card swatches to swap image and price within that product.
  • Colors as separate products with separate prices: use RCL to group them and switch between products, each with its own price.
  • Both patterns at once: plenty of catalogs run RCL for cross-product color groups and RVI for in-product image filtering. They’re built to work together.

Keeping product-page images correct per color

Per-color pricing is half the job. The other half is showing the right photos. If a shopper switches to the leather colorway and still sees canvas product shots, the higher price feels unjustified.

With the separate-products structure, this part mostly takes care of itself: each color’s product has its own image set, so switching to the leather product loads leather photos. Clean. But if you also keep some colors as in-product variants (say leather comes in three hardware finishes), you’ll want each finish to show only its matching images on that product page. That’s where Rubik Variant Images earns its place, filtering the product gallery so the selected variant shows only its own media. One app groups the priced color products, the other keeps each product’s internal variant images tidy.

If you want the full rundown on the grouping side, rubikify.com has a complete explainer on how combined listings work end to end.

The SEO upside of separate URLs

Separate products don’t just fix pricing. They hand you an SEO advantage that a single multi-color product can’t match. Each colorway gets its own URL, its own title, its own meta description, and its own images. The leather backpack can target “leather backpack” intent while the canvas one targets “canvas backpack.” One product page can’t do both well.

Google indexes those distinct URLs separately, so a shopper searching for a specific color or material can land directly on the right product, at the right price, instead of a generic page where they have to hunt for their option. That’s better for rankings and better for conversion. We dig into the indexing mechanics more in this look at the conversion impact of combined listings.

“I think it’s an extremely useful application. It’s easy to install and use, and it doesn’t require any learning curve because it’s so intuitive. The helpdesk is also very supportive, the issue I reported was fixed within minutes. It could be cheaper, or even free, but jokes aside, it’s definitely worth the price as it is.”

Paco, February 2026, Rubik Combined Listings on the Shopify App Store

Setting it up step by step

The whole thing is less work than it sounds. Here’s the order I’d follow.

  1. Split colors into products. Create one product per color or material. If you’re moving from a single multi-color product, you can split it into separate color products and keep their existing variants (sizes, finishes) inside each one.
  2. Set each price independently. Give the leather product its real price and the canvas product its real price. No shared price, no compromise. If you need help thinking through price tiers, see how to set different prices per variant for the variant-level cases.
  3. Group them in Rubik Combined Listings. Pick the color products in the resource picker and save the group, or use bulk grouping by title pattern, product tags, or metafield if you’ve got many groups to build at once.
  4. Style the swatches. Choose visual, button, pill, or dropdown swatches, then tune them with the built-in presets or custom CSS. The AI Visual Assistant lets you adjust the look with plain language if you’d rather not touch CSS.
  5. Hook price updates if your theme needs it. Most themes show the per-product price on switch out of the box. For custom card behavior, hook the swatch event so the displayed price updates the instant a shopper clicks a color.

On pricing for the app itself: Rubik Combined Listings is free for up to 5 product groups, then $10/month for 100 groups, $30/month for 500, and $50/month for 5,000, with annual billing saving 17%. Every plan has every feature, only the group count and AI credits change. No Shopify Plus required, which is sort of the whole point.

Want to see it first? Check the live combined listings demo store, watch the tutorial video, or read the getting started guide.

Try Rubik Combined Listings free
Try Rubik Variant Images free

Frequently asked questions

Can I set different prices per color on Shopify?

Yes. The cleanest way to set different prices per color is to make each color its own Shopify product with its own price, then link them with Rubik Combined Listings so swatches still let shoppers switch between colors. Each colorway then shows its own price on its own page and on collection cards.

Why not just use variant prices for each color?

Shopify variants can carry different prices, but a single product page shows one headline price until a shopper selects an option, which misrepresents the pricier colors. Separate products give each color its own price, URL, title, and images, so nothing is hidden behind one teaser number and each color can rank on its own.

Will the price update when a shopper clicks a color swatch?

Yes. On the product page the swatch loads that color’s product with its own price. On collection cards, Rubik Combined Listings fires a JavaScript event carrying each product’s price, price range flag, and compare-at price, so your theme can update the displayed price the instant a shopper clicks a different color.

Does this work without Shopify Plus?

Yes. Rubik Combined Listings does not require Shopify Plus. Because each color is a separate product holding only its own options, the structure also gets you past the default 100-variant-per-product limit without upgrading to Plus.

What happens when one color sells out?

Rubik Combined Listings syncs in real time via Shopify metaobject references, so out-of-stock, archived, and draft products are hidden from the group automatically. A sold-out color’s swatch drops off until the product is back, which means no swatch ever points to a dead or unavailable product.

How are the product images handled per color?

Each color product carries its own image set, so switching colors loads the right photos automatically. If a single color product also has internal variants (like hardware finishes) that need filtered images, Rubik Variant Images filters the product gallery so each variant shows only its matching media.

Is there an SEO benefit to separate color products?

Yes. Each color gets a distinct URL, title, meta description, and image set, which Google indexes separately. A shopper searching for a specific color or material can land directly on that product at the right price, which helps both rankings and conversion compared to one shared multi-color page.

Pick your priciest colorway, give it its own product and its own price tonight, and group it with the rest tomorrow. The leather one will thank you.

Co-Founder at Craftshift

You may also like