Display the Currently Selected Option Value on your Shopify Product Page

Last updated:
June 12, 2023

Knowledge requirements:

  • Basic Shopify Liquid
  • Basic JavaScript
  • HTML5

One of the best things you can do to help a Shopify product page convert is to make each step of the purchase process as easy and straightforward as possible. And having a variant selection block that is easy to use will play a huge role.

So, in this article, I will show you how you can display the option name that is currently selected for the customer to clearly see it before they hit the add-to-cart button.

So, without further ado, here are the steps.

Step 1: Find the code block to edit

1. Open your theme file and look for the main product section file where the different parts of the product form (variant picker, quantity selector etc) are located, mostly named ‘main-product,’ like how it is for the Dawn theme.

2. Then you need to look for the variant picker code block and find where the options are being iterated using the for loop syntax of Shopify Liquid. Something like this:

finding main-product section in the Shopify Liquid theme files

Step 2: Add a blank html tag

1. Next, look for a spot where you want the option value to be displayed, ideally beside the legend (or the option name) so that it looks something like: ‘Color: Black’, where ‘Color’ is the option name and black is the option value.

finding the option iteration in the Shopify Liquid theme files

2. Add a blank html tag (this will be your option value container) with a class you prefer to call it. I normally use a span or div tag for this. So, it should look like this:

adding an html tag beside the legend tag in the Shopify Liquid theme files

Step 3: Write your JS code

1. Declare a variable for all of the options regardless if it's under size, color etc. 'querySelectorAll' helps in achieving this.

2. Write your function as shown in the JS code below where I put important notes to help you better understand the logic.

3. Run the function using the 'addEventListener' and the 'forEach' method. We used the 'forEach' method to listen when any of the options is clicked.

You may also view this on CodePen.

Important note:

Since the code above was only designed to mimic what shows on a Shopify theme, in my HTML, I had to use 'data-*' attribute which I called 'data-value' where I put the value of the option.

But usually, on Shopify, an <input> tag is used for this instead of a <span> tag like I did. And that <input> tag has a 'value' attribute where the option's value sits. And normally, the option value is iterated at this point and it should look something like the code in the first red box and your value should look like the code in the second red box below.

Please tweak your JS code accordingly.

iterating the option's values in Shopify Liquid
Red Dela Cruz | Shopify and Webflow developer

Red Dela Cruz

An enthusiastic Shopify and Webflow developer just like you!

I’ve learned a lot of things in web development by reading and watching tutorials. So, now, I want to pay it forward. 🤓