Title says it all. I would like my customer to be forced to select a variant on the products they purchase, rather than the first variant be auto-selected.
Thank you!
Hey @markproducts ,
The first variant has to be auto selected because the pricing needs to be shown. Without a variant selected, the pricing cannot be shown, and other parts of the product as well, so likely you will break the theme.
We could however make it more obvious that the customer needs to select a variant. Can I have the link to your store please?
After looking at it, I will share my recommendations.
There is no price associated with the item either way as it is acting as a pre-order form. There are plenty of other solutions using other themes so I donât see why it wonât work with a simple theme like Spotlight. Below is the link!
Hey @markproducts ,
The details like that are important. I do have a solution, I just spent some time writing and testing it out. Please note that this will work for dropdowns only. I would have to spend alot more time to make sure it works on other type of variant pickers.
If you havenât changed any of the code, the line numbers should be the same
In your themeâs âEdit codeâ option, search for âproduct-variant-picker.liquidâ and it should be in the Snippets folder.
Before the code â{% render âproduct-variant-optionsâ,â
add the following line
Screenshot below
Next search for âproduct-variant-options.liquidâ and delete lines 106-108 (inclusive)
Screenshow highlighting the parts to delete.
Finally, search for "theme.liquidâ and below the tag ââ tag paste the following.
Screenshot below
You should have a similar look in the product page
Thanks, this is helpful and it works up until the point where the shopper selects an option from one of multiple list boxes. At that point it breaks because the other list box now displays ânull - Unavailableâ rather than the original âPlease selectâ.
https://4c2fff-3.myshopify.com/products/vintage-look-sweater
password: dontest
Do you have any idea how to fix this? Thanks again,
Don
Hey @DonD ,
You could add some Javascript to handle that.
Go to your theme.liquid file and add this add the bottom of your file ABOVE the tag
Screenshot for reference
Hi @markproducts ,
For your requirement, utilizing the Easify Product Options app , including the free plan, could be a suitable solution. This app allows you to create all your product options without needing to set them up as regular Shopify variants.Thanks to that, you can ensure that no default options are pre-selected 
.
- Storefront:
- App Settings:
If you have any questions or if somethingâs unclear, just let me know. Alternatively, you can reach out to the Easify team through the in-app live chat for quick assistance.
Great! I tweaked your solution a bit because I want the prompt to be specific to the option (e.g. âSelect a Sizeâ and âSelect a Colorâ). Your idea of adding a timed event listener to the list box is exactly what I needed to restore the prompts. I had tried using the onchange event with the same objective but it didnât work. Perhaps you can educate me about why that isâŚI suspect the 300 millisecond delay matters!
Coffee coming your way, thanks for your help.
Don
Oh hey @DonD ,
Thank you for your generosity first of all!
Regarding the timer, thatâs just a way of letting every other JavaScript in the theme run first and then run this particular script so that there are no clashes. When all run at the same time you canât really tell which script is going to be the last to execute. Basically the last one to run is the one that makes the final change. The delayed 300ms just makes sure this script is always the last to run and has the final say. I would think that reducing the time would still work assuming every other JS events are not written with a delay, but 300ms was just to be safe.
Hi, I was trying to use this method on my shop, and I have some follow up questions if you donât mind.
I have many products with multiple variants, and followed your directions which solved the auto variant select issue. However, it seems to have disconnected my variant options (in this case, colors) to their assigned images. Instead, now it just keeps the same photo (which was the one for the variant that always was auto selected). This doesnât seem fixable from the product page at all.
Any ideas?
Hi @p_and_p ,
Iâm having the same problem with Dawn V15. Did you manage to find a solution to disable auto select and display the variant image when variant option is selected?
Thanks
Jo