goodkeel

Colour products, canonicals and hreflang on Shopify

Christopher Uryga · November 2026

Some Shopify stores list each colour of a product as a product of its own, then point every colour's canonical tag at one main product. On a store with several languages, those colour pages often still carry a full set of hreflang tags, and the two kinds of tag say different things. Here is how to spot it and the two ways to fix it.

What the setup looks like

Instead of one product with colour variants, the store has one product per colour, each at its own address, linked together by swatches. To stop the colours competing with each other in search, a theme customisation or an app sets each colour's canonical to a main product:

<!-- on https://yourstore.com/fr/products/linen-shirt-sand -->
<link rel="canonical" href="https://yourstore.com/products/linen-shirt">

<link rel="alternate" hreflang="en" href="https://yourstore.com/products/linen-shirt-sand">
<link rel="alternate" hreflang="fr" href="https://yourstore.com/fr/products/linen-shirt-sand">
<link rel="alternate" hreflang="de" href="https://yourstore.com/de/products/linen-shirt-sand">

In our study of 96 multi-language Shopify stores, three had this pattern on the product page we checked: a colour or size product whose canonical named another product, while the page still listed its own translations as alternates.

Why the two tags disagree

A canonical tag tells Google which address to index. A page that names another page as its canonical is asking to be treated as a copy, and usually it won't be shown in search itself.

The hreflang tags on the same page say the opposite: this exact address is the French version, and here are the English and German versions of it. They describe a set of pages that the canonical has just asked Google not to show. At best those tags are wasted. At worst Google has conflicting signals about which page to show French shoppers.

The example above has a second problem. The French colour page names the English main product as its canonical. Google's guidance for pages with hreflang is to specify a canonical page in the same language, or the closest substitute when no same-language page exists. Pointing a French page at an English one tells Google the French text is a copy of the English page, which can keep the French page out of French results.

How to tell if your store does it

  1. Open a product that comes in several colours and click a colour swatch. If the address changes to a different product handle (/products/linen-shirt-sand rather than ?variant=), each colour is its own product.
  2. View the page source (Ctrl+U on Windows, Option+Command+U on a Mac) and search for canonical. If it names a different product, the colours are canonicalised to a main product.
  3. Search the same source for hreflang. If the tags list this colour's own addresses, the two tags disagree.
  4. Repeat on a translated version of the page, such as /fr/products/…, and check which language the canonical points to.

The free hreflang checker does this for you: paste a colour page's address and it flags a page whose canonical points to a different URL, and alternates whose canonical points elsewhere.

Two ways to fix it

Start by deciding which pages should be in search. Everything else follows from that.

Each colour in search

If people search for the colours by name ("sand linen shirt") and each colour page has its own photos and text, let each colour be its own canonical. Remove the canonical override so every colour page names itself, and keep its hreflang tags pointing at the same colour in other languages. The tags and the canonical then agree.

Only the main product in search

If the colour pages are near-identical and you'd rather Google showed the main product, keep the canonical override, with two changes:

Whichever you choose, the rule is the same: the page a canonical points to, and the pages hreflang tags point to, should be the pages you want in search, in the language of the page.

A third option is to merge the colours into one product with colour variants, Shopify's own model. Then there's one address per language and no canonical override to manage. It's the biggest change of the three, since it affects reviews, inventory and any app that works per product, so it's usually one for a planned rebuild.

Where our app fits

Hreflang Manager's audit checks the canonical of every page it reads and of every alternate, so a store with this setup sees each colour page that disagrees with its tags, with the fix. The free plan runs the audit.

Sources