How can I alter text when a product variant is selected?

[theophile7411]

Hi, i would like to change the grey text whenever a variant is selected by the variant name. Right now it work only when i reload the page, i think i have to write a loop or something but i don’t know exactly what

Here is my code

  {{ option.selected_value | escape }}  

Here is my site

https://bf4d41.myshopify.com/products/copy-of-copy-of-tshirt?variant=44263230669068

Thanks !

[GemPages]

Hello @theophile7411 ,

It’s the GemPages Support Team and we are glad to assist you today!

The liquid code {{ option.selected_value | escape }} seems only display for the selected variant when going to the page for the first time.

You could please try using the metafield for the variant and change the code to metafield code

I hope my answer can be helpful to you.

Best regards,
GemPages Support Team

[Simonsron]

This may require looking at your JavaScript to modify it

[zaczee]

HI @theophile7411 ,

There might be an issue in javascript. Need to check further in code to fix this issue.

[abbaspk70]

you need to add a function which changes the text with each time you click on variant. Go to code open file global.js

you can simply add this function in global.js file

 // function to update Variant text
updateFormLabel(){
const formValue = document.getElementsByClassName("form__value");
var arr = [...formValue];
arr.forEach((num1, index) => {
const num2 = this.currentVariant.options[index];
num1.innerHTML = ": " + num2;
});

then call the function like show in picture