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.
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:
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.
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:
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.
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.
