Goal: display and dynamically update a product variant title above the variant selection (“variant pills” = clickable buttons for each variant) in a Shopify Dawn 7.0 theme.
Initial setup: Liquid code in main-product.liquid shows the selected or first available variant title in a span.
Guidance: Changes should be handled via the theme’s JavaScript. Either modify the variant selection logic or listen for change events to update the span text.
Theme-specific solution (Dawn 7.0): Use global.js and add code in the onVariantChange() function to update the span when a new variant is selected.
Implementation provided: Retrieve the currently checked variant value and write it to the span element.
Outcome: Resolved. The span now updates on variant selection via onVariantChange(). No open questions noted.
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!
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.
Thanks for the reply, I’m using Dawn 7.0 theme. Any guidance is appreciated!
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.
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;