How to render variants in the product title?

Shopify Discussion
1

Greetings

I am trying to render my variants in the title dynamically each time the customer select a different varient, the title will change with the variant the customer selects. Does anyone knows how to do this?

Thanks in advance

Screenshot 2023-06-26 at 09.58.01.png
Screenshot 2023-06-26 at 09.58.01.png648×394 24.8 KB

2

@mpatsi , Hope you are doing well. Please try the below js to make it possible as per your requirements.

<script>
document.addEventListener("DOMContentLoaded", function() {
  // Target the variant dropdown element
  var variantDropdown = document.getElementById("variant-dropdown");

  variantDropdown.addEventListener("change", function() {
 
    var selectedVariant = variantDropdown.value;
    var productTitle = document.getElementById("product-title");
    productTitle.innerText = "Product Title - " + selectedVariant;
  });
});
</script>

let us know if you have any doubts.

3

Hello, and thanks for helping…in which file i will add the piece of code?

4

You can keep this script in product-template.liquid file.

In given js you have to update id as per your theme name.

5

Hi,

Hope this will help, but doing anything please take backup

1.Shopify admin>online store>themes>Actions>Edit code
2. In the theme editor find the file product-template.liquid or similar
3. Find the section responsible for displaying the product title. It may look like {{ product.title }} or similar.
4. Add the variant information
5. Save>Preview and if all ok then publish