Adding variants to collection pages on Shopify

We talk all the time about how important categories are for eCommerce SEO. But what can you do if you only have a limited amount of products to display on your page? This is where product variants can be a great solution.

Why are variants important for SEO?

There’s two great benefits to having robust, well-populated collection pages: not only does it provide a better shopping experience for customers, but it also appeals to search engines. A great example here is the recent leak from Yandex, which contained a piece of code that counts the number of products on a page to help identify if it is a category. On the other hand, we also know that Google frequently soft 404s category pages that have no products. This means that we can’t just go around creating category pages if there’s not enough relevant products in the first place. As a rule of thumb, this means we aim for for at least three products for a collection – it’s enough to provide a decent user experience and avoid any issues with thin content.

Product variants and Shopify

Adding variants is a great solution. These provide customers with a range of options for a single product, such as different sizes, colours, or other attributes. Unfortunately, Shopify doesn’t allow this by default, which means that creating a variation collection in Shopify requires some proficiency in Liquid, Shopify’s template language. This blog post will guide you through this process, using the Dawn template as an example.

Once you’ve completed the steps, your collection should look like this:

×

1. Create two new metafields

1. A product metafield named ‘Alternate Product Title’

×

2. A variant metafield named ‘Show in Variant Collection’

×

×

2. Duplicate your default collection template

You can do this by going to your themes, clicking ‘customize’, selecting the collection templates, choosing ‘Create Template’, and basing it on the ‘Default Collection’. For this example, we’ll name it ‘variant-collection’.

3. Edit the code

Under ‘Templates’, you should see your ‘collection.variant-collection.liquid’ file. Opening this file will reveal a tag called ‘product grid’ that is pulling in a section named ‘main-collection-product-grid’. Change this to ‘variant-collection-product-grid’.

You also need to create a copy of ‘main-collection-product-grid.liquid’ under ‘sections’, calling it ‘variant-collection-product-grid.liquid’. While you’re at it, make a copy of ‘product-card.liquid’ under ‘snippets’ and call it ‘variant-card.liquid’.

In the ‘variant-collection-product-grid.liquid’ file, locate the loop where each product is written out into the grid.

{%- for product in collection.products -%} <li class="grid__item"> {% render 'product-card', product_card_product: product, media_size: section.settings.image_ratio, show_secondary_image: section.settings.show_secondary_image, add_image_padding: section.settings.add_image_padding, show_vendor: section.settings.show_vendor, claim_bar_skin_type: section.settings.claim_bar_skin_type, show_claim_bar: section.settings.show_claim_bar %} </li>

×

Add a second loop within the product loop that iterates through all the variants of a product, passing these values into the new ‘variant-card.liquid’ snippet you created. Note that all product data, as well as variant data, is sent to this card.

Add a check in this loop for the ‘show_in_variant_collection’ metafield. This allows you to hide individual variants from appearing in the collection by setting this to FALSE in the variation.

Once done, open ‘variant-card.liquid’. In this file, you will need to carefully change several instances of ‘product_card_product’ (data from the product) to ‘product_card_variant’ (data from the variant). For example, you’ll need to modify the link surrounding the item so that it leads to the variant, rather than the product.

Also, change your price render to:

{% render 'price', product: product_card_variant, price_class: '' %}

Your code should now look like this:

<li class="grid__item"> {% render 'product-card', product_card_product: product, media_size: section.settings.image_ratio, show_secondary_image: section.settings.show_secondary_image, add_image_padding: section.settings.add_image_padding, show_vendor: section.settings.show_vendor, claim_bar_skin_type: section.settings.claim_bar_skin_type, show_claim_bar: section.settings.show_claim_bar %} </li> {% for variant in product.variants %} {% if variant.metafields.custom.show_in_variant_collection != false %} <li class="grid__item"> {% render 'variant-card', product_card_product: product, product_card_variant: variant, title: product.title, media_size: section.settings.image_ratio, show_secondary_image: section.settings.show_secondary_image, add_image_padding: section.settings.add_image_padding, show_vendor: section.settings.show_vendor, claim_bar_skin_type: section.settings.claim_bar_skin_type, show_claim_bar: section.settings.show_claim_bar %} </li> {% endif %} {% endfor %}

×

×

4. Create an alternate product title

Another modification involves the use of the ‘Alternate Product Title’ metafield. This can be useful in displaying a different product title above your variation title. For instance, instead of displaying ‘Floral Dress sizes 10-16 Size 12’, you can set the ‘Alternate Product Title’ to ‘Floral Dress’ and it would display as ‘Floral Dress Size 12’.

5. Switch the theme template

Lastly, change the template for the collection you wish to display variants for:

×

And there you have it! You’ve successfully created a variation collection in Shopify. This can be a powerful tool to improve SEO for high value pages offerings and improve your customer’s shopping experience.