Update Variant Title When Selecting New Variant

[EnvisionWeb1]

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>

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

Thanks!

[PaulNewton]

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.

[EnvisionWeb1]

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

[Viraj2]

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. 

[EnvisionWeb1 · Accepted solution]

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;