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
- Step 2: Add this code in product-variant-picker.liquid
- Step 3: Confirm that it's working
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();
- 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;
}
}
- 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>
- 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)
- 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
- PS. Don't forget to set the variant picker type to "pills" in the 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.
I tried to keep it as easy as possible.
Thank you for reading! / J
