How to display value of selected variant on product pages (Shopify Guide 2023)

Free Shopify Guides

Before and after image of how to display value of selected variant on product pages

Watch video guide instead

It's not possible by default to display the value of selected variant in Shopify's free templates at the moment. This is a very important feature especially if you're implementing swatches with images.

Luckily, there is a simple solution for this without any apps. I've prepared all the code you need in this 3 step guide. It's a copy/paste guide for the non technical person.

I use Dawn theme version 9.0.0 in this guide but same steps works for almost all free themes in Shopify's theme store.

Step 1: Add this code in global.js

  • Go to "Edit Code" on your theme
  • In the top left corner search for "global.js" (located in the assets folder)
  • Go to row 828
  • Jump down to a new row
  • Copy and paste below code on the new row so it looks like the following image

this.updateSelectedValue();
Add code part 1 in global javascript file
  • Now go to row 910
  • Jump down to a new row
  • Copy and paste below code on the new row so it looks like the following image

  // start - custom - update selected value
  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;
    }
  }
Add code block for the function in global javascript file
  • Save this file in the top right corner

So far, so good 👍😅

Step 2: Add this code in product-variant-picker.liquid

  • Search for "product-variant-picker.liquid" in the top left corner (located in the snippets folder)
  • Now go to row 26
  • Replace everything on row 26 with below code so the row looks like the following image

<legend class="form__label">{{ option.name | append: ": " }}<span class="option_value" id="selected-value-{{ forloop.index }}">{{ option.selected_value }}</span></legend>
Add code snippet in product variant picker file to display selected value
  • Save this file in the top right corner

You are now good to go 💻🔥

Step 3: Confirm that it's working

  • Stay in edit code mode and click "Preview store" in the top right corner (see below image)
    Preview results in your Shopify store
    • Navigate to a product page with variants
    • The value of the selected variant should now be displayed next to the label like below image and be dynamically updated when you click around as well
      Showing results on product page with value updated when selecting variant
      • PS. Don't forget to set the variant picker type to "pills" in the product template.
      Change to pills in variant picker in your default Shopify product template

      Conclusion

      This is how I got around to displaying the value of selected variants for a few recent Shopify merchants. There might be another solution for this as well, but this solved the problem for us in a good way 😃

      Leave a comment below if you got questions, or if this solution can be improved.

      Contact me below if you need help but I tried to keep it as easy as possible.

      Thank you for reading! / J

      Jesper Ahlbom

      Hi! I'm Jesper Ahlbom

      Shopify Developer Shopify Partner

      In this blog, I've started to share free guides on very common requests I get from Shopify merchants since I started 2020.

      About Free stuff Contact me for help

      Leave a comment

      Don't forget to mention which theme and version you got if you need help.

      Please note, comments need to be approved before they are published.