How can I display Value of Selected Variant On Product Page - Dawn Theme

Store Design

Topic summary

Goal: show the currently selected variant value on Shopify product pages (Dawn theme) and have it update on change.

What was tried:

  • Liquid output ({{ option.selected_value }}) showed the initial value but did not update after selection change.
  • Inline JS added in theme.liquid updated a label from the checked input. Worked for some but only for the first option set; others saw only a colon output. Fragile across products with 2+ options.

Working approach (most endorsed):

  • Modify Dawn’s global.js to update the DOM on variant change.
    • Add a call to updateSelectedValue() at the end of onVariantChange.
    • Implement updateSelectedValue() to pull this.currentVariant.option1/2/3 and inject into elements with IDs selected-value-1/2/3 on the product page.
  • Requires placing matching spans in product-variant-picker.liquid. Code snippets and a (now-missing) external guide were referenced. Multiple users confirmed success.

Open items/requests:

  • Guide link appears removed; requests for a walkthrough and why three option slots are hardcoded (Dawn supports up to 3 variant options).
  • Questions on avoiding global.js and accessing currentVariant directly; author says it’s possible but gave no steps.
  • Compatibility/help needed for Spotlight theme and for setups using images instead of labels.

Status: partially resolved with the global.js method; several follow-up questions remain. Code snippets are central to the solution.

Summarized with AI on December 18. AI used: gpt-5.
1

Hi,
I’m trying to display the value of the selected Variant on the product page and I added this code in
main-product.liquid file.

{{ option.selected_value }}

It worked and displayed the selected value but when I try to choose another variant it’s not updating the value.
Please help me solve this issue.
Thanks in advance.

b3de1753-d688-466d-bdb2-c69683cf6a84.png
b3de1753-d688-466d-bdb2-c69683cf6a84.png1224×582 47 KB

1 Like
2

I’m Richard Nguyen - CRO Expert at PageFly- Free Landing Page Builder.

You can add my code as follows: theme → Edit > Search “theme.liquid”. Then paste the code before the tag:

You can also customize the css for the added content with the class "custom-content "

If you find my comment useful, please let me know by giving it a Like. Thank you!

Richard - PageFly

1 Like
3

@PageFly-Richard
Thank You so much.
I have 2 variants on some products and on some products more than 2 but your solution is working for only the first variant.
Please help.

4

Hello @GM-Mart , did you find any good solution. i am looking for the same solution.

5

hello @PageFly-Richard , i just tried your solution, its only showing “:” (colon) nothing else. can you please look into it. it would be great help. any reply would be appreciated.

variant output issue1.png
variant output issue1.png283×313 19.5 KB

6

Hi, that will successfully display the selected value on page load but for it to dynamically update you need to add a function in the global.js file that you then reference on the product page.

Your product-variant-picker.liquid file (Dawn theme)

{{ option.selected_value }}

Your global.js file (Dawn theme)

// add below string at the end of onVariantChange
this.updateSelectedValue();

// add this before removeErrorMessage
  updateSelectedValue() {
    const valueOption1 = this.currentVariant.option1;
    if (valueOption1 != null) {
      document.getElementById("selected-value-1").innerHTML = valueOption1;
    }

    const valueOption2 = this.currentVariant.option2;
    if (valueOption2 != null) {
      document.getElementById("selected-value-2").innerHTML = valueOption2;
    }
    
    const valueOption3 = this.currentVariant.option3;
    if (valueOption3 != null) {
      document.getElementById("selected-value-3").innerHTML = valueOption3;
    }
  }

I did a free guide on this the other day if above is not working for you:

https://jesperahlbom.com/blogs/free-shopify-guides/how-to-display-value-of-selected-variant-on-product-pages

Hope it helps! / Jesper

4 Likes
7

This was amazing, thank you. I registered as a community member just to let you know that this code was perfect. I had to follow your guide as I wasn’t sure exactly where to put the span code, but the images you provided in your guide were perfect. Thank you so much!

8

No worries, thank you too. I’m happy it helped! :folded_hands:

9

Thank you

10

I added image under each variant, and hide all the variant label from the image, but now I need to print all the value of variant aside of option name. I used this code to do this {{ option.name | append: ‘’ }} - {{ current.title }} but its not working correctly. Here is the link of shop page https://art-nikolovi.myshopify.com/products/name-of-artwork-3?variant=45372013117721. Please can someone help me on it.

11

Hi! Do you know if there’s a way to don’t use the global.js or to call the currentVariant directly from there in the product page?

12

Should be possible. Don’t see the reason why though :slightly_smiling_face: what’s the store url?

13

I cant seem to access your guide. Did you remove it?

14

Worked for me as well, thanks!

The guide seems to be missing. Btw can you do a walkthrough of this? I tried to read global.js, but it’s a little bit hard to read. Why there are hardcoded 3 valueOption’s?

15

Hi Jesper

Im trying to follow your guide on YT regarding this topic. I have the Spotlight theme. Can You hlp me regarding the product-variant-picker.liquid
It does not seem to be compatible

16

Hi Conny,

I think that guide is outdated tbh but please submit a request for help on my website or send your website etc in a private message here and I’ll have a quick look.

// Jesper

17

I have sent you an email. Thank you.

//Conny