Multi page variant structured data with ProductGroup markup for Shopify stores

After announcing the ProductGroup markup, questions about products with variants on different pages started to come in.

Because of how Shopify builds its products, it's common to see a main product with variants. So there is one product page with multiple variants.

However, many stores prefer to have all their variants on a unique product page with a unique product URL. Yet, stores still want their product page to look like they have variants, but use unique product URLs instead. Though not impossible with apps or custom code, it does pose another question.

How does a store tell Google that these individual product pages are actually variants or siblings of another product?

This helps Google to find your variants and better understand that these products are related.

With the new ProductGroup markup and JSON-LD for SEO, telling Google your products are related is not as hard as we might think.

Single page vs multi page variants

There are two different ways to incorporate the ProductGroup structured data.

1. Single page, where all variants are selectable on a single page.
2. Multi page, where variants of the same product are accessible on different pages.

JSON-LD for SEO supports single page markup by default since that's how Shopify builds variants. That means all variants on the page will automatically receive the ProductGroup markup.

If you use the single page approach, where all your variants of the product are on the same page, you can ignore the rest of this article.

For those who use multi page variants, there is a solution for you as well.

As an example, lets say you sell a red tie, a purple tie, and a blue tie. They are variants of the same product but accessible on different pages:

• red: example.com/products/red-tie
• purple: example.com/products/purple-tie
• blue: example.com/products/blue-tie

The way Shopify builds its products, there is no way for Shopify to natively tell Google they are essentially the same, just a variant of each other.

With ProductGroup markup and JSON-LD for SEO, you can link sibling products together.

Relationships between products can be however you define it. Usually, product variants are separated by color, size, pattern, material, etc.

JSON-LD for SEO doesn’t do anything visually on the page. We only create the structured data for Google. How you visually show products to look like variants is up to you. Think of it like we're creating product siblings in the structured data. If you need help visually showing products to look like variants, I recommend you checkout Design Packs: Product Blocks.

Googles requirements for multi page variants

Before implementing multi page variant markup to your store, make sure you meet Google's guidelines. It must be clear that the pages allow "jumping" to the other page. For example, when on the blue tie page, a visitor must be able to select the red variant which takes them to the red URL.

Step 1: Create the metafield

Use Shopify’s Metafields or your metafield tool of choice and add the Product metafield:

• Create a new Product metafield definition
• name: Variant URLs (can be called whatever you want)
• namespace: jsonld (required)
• key: variant_urls (required)
• type: URL and select List of values (required)

Make sure you hit save. Your metafield definition must use the exact values and spelling for namespace, key, and type or it won't work.

Step 2: Assign the values

Now we're ready to connect your variants.

Go to one of your product pages that has a sibling (variant) on another page in your Shopify Admin.

Scroll down to the bottom of the page where you'll see your metafields and look for the Variant URLs metafield we just created.

Select the Variant URLs metafield and paste the URL you want to link. When applicable, paste the full variant URL (with ?variant=123456), not just the product URL otherwise it may confuse Google. Always use the full link with https and your domain (e.g. https://www.example.com/products/red-tie?variants=123456.

You can select Add item to add as many URLs as needed.

In my example, I want to connect the blue tie (the product page I'm on) with the red and purple tie. So I'll add both the red and purple URLs to the metafield values.

Don't forget to do the same for your other pages. That way your blue links to the red and purple, and your red and purple links back to blue.

TIP: Some metafield apps allow you to bulk import metafields which may make this process easier.

Step 3: Test the markup

After you add your metafield values and their URLs, it's time to test the data to make sure we've got it correct.

Using the product URL that you've added the metafields to, run it through the Rich Results Testing Tool or Schema Markup Validator. In my case, I'll test the blue tie URL.

I've added two variant URLs to my metafield, so in my example, I'll see hasVariant three times in my structured data.

1. the red tie URL
2. the purple tie URL
3. the blue tie with much more details since that is the product on this page.

You can see an example of what this looks like on the JSON-LD for SEO demo site.

ProductGroup schema markup is one of the more significant updates Google has done to Product data in years. If you haven't installed JSON-LD for SEO yet or are still relying on your Shopify theme data, you're going to want to install JSON-LD for SEO to take advantage of this new format.