Update Variant Title When Selecting New Variant

Technical Q&A
1

In main-product.liquid I have added the following code to display the Variant title in a span tag above the variant pills:

<span class="size-value">
{% assign current_variant = product.selected_or_first_available_variant %}
{{ current_variant.title }}
</span>

EnvisionWeb1_0-1665790224919.png
EnvisionWeb1_0-1665790224919.png388×169 6.48 KB

How do I update the contents of this span tag when a different Variant pill is selected?

Thanks!

2

Varies wildly by theme and implementations.

You have to edit the themes relevant javascript variant selection functions.

Or add a listener for a the select change event to manipulate the text pulling the title info from the buttons html text.

3

Thanks for the reply, I’m using Dawn 7.0 theme. Any guidance is appreciated!

4

You don’t need to assign span for this you can access by theme javascript in global.js file you can find onVariant change function.

5

For anyone who has this issue here is the working code to be placed in the onVariantChange() function in global.js:

var checkedValue = document.querySelector('.product-form__input input:checked').value;
document.getElementById("size-value").innerHTML = checkedValue;