Unique title per product variant

[Martin69]

Our Shopify webshop is using the Spark Theme and has Products and a lot of Product Variants. I learned that it's not possible to have unique Page Titles (<title></title>) for Product Variants, except when using custom code.

My Product pages have 3 different options:

Option 1 Name: Stijl
Option 2 Name: Grootte
Option 3 Name: Materiaal

When a User selects a different 'Stijl', 'Grootte' or 'Materiaal' the User will see a Product Variant. The Product Variant will show a different URL ?variant=(number)

I would like to inject the Values of 'Stijl', 'Grootte' or 'Materiaal' into the Page Title
What I want is that the Page Title changes when the User selects a different 'Stijl', 'Grootte' or 'Materiaal' Value, so that every URL ?variant=[number] has a unique Page Title.

Example Page Title:
Herringbone Wood Floor Noble White | (Stijl) - (Grootte) - (Materiaal)

Result:
Herringbone Wood Floor Noble White | Rustic French Oak - Vincent - 18-90 cm

If possible, I want to achieve the same for meta-descriptions

Who can help me out with custom code?

[LetsCode]

@Martin69Yes, I can help here. Could you please share the store URL?

[Martin69]

@LetsCode thank you! The store url is: https://www.uipkesvloeren.nl

[eComInsider]

Note: Backup your theme first, then

1. Access your Shopify theme files: Go to your Shopify admin panel, navigate to "Online Store" > "Themes," and click on the "Actions" dropdown next to your active theme. Then select "Edit code" to access the theme files.

2. Locate the product template: Look for the Liquid file that represents the product template. It is usually named product.liquid or something similar. Open that file for editing.

3. Find the <title> tag: Within the product template, locate the <title> tag. It may look like <title>{{ product.title }}</title>. We'll modify this to include the variant options.

4. Update the <title> tag: Replace the existing <title> tag with the following code

<title> {{ product.title }} | {% for option in product.options %} {% if option == "Stijl" %} {{ option }}: {{ variant.option1 }} {% elsif option == "Grootte" %} {{ option }}: {{ variant.option2 }} {% elsif option == "Materiaal" %} {{ option }}: {{ variant.option3 }} {% endif %} {% unless forloop.last %} - {% endunless %} {% endfor %} </title>

This code checks the option names and includes the corresponding variant values in the page title. It assumes that your option names match the ones you provided.

1. Update the meta description: If you also want to update the meta description, you'll need to find the <meta name="description"> tag in the same product template and update it with the following code

<meta name="description" content="{{ product.meta_description | escape }}"> 

1. Save and test:

[Martin69]

Dear Sellling Apps,

Thanks for the effort. We cannot find the <title> element in any product.liquid files except theme.js. We are using the Spark Theme and Gempages. 

We would like to hire someone to fix this, instead of trial and error runs. Can you help us out?

Kind regards,

Martin

[eComInsider]

 in product.liquid.

{% if product.selected_variant %}
{% assign variant_title = '' %}
{% for option in product.selected_variant.options %}
{% assign option_name = option.name %}
{% assign option_value = option.value %}
{% assign variant_title = variant_title | append: option_value | append: ' - ' %}
{% endfor %}

{% assign page_title = product.title | append: ' | ' | append: variant_title %}
<title>{{ page_title }}</title>

{% comment %}
Uncomment the following code if you also want to update the meta description
{% endcomment %}
{% assign meta_description = product.description %}
{% if product.selected_variant.title != product.title %}
{% assign variant_title_no_pipe = variant_title | remove: ' | ' %}
{% assign meta_description = meta_description | append: ' | ' | append: variant_title_no_pipe %}
{% endif %}
<meta name="description" content="{{ meta_description }}">

{% else %}
<title>{{ product.title }}</title>
<meta name="description" content="{{ product.description }}">
{% endif %}