Hello Everyone,
I need some expert help with adding a code to my spotlight theme editor where no variant option is selected by default.
I am aware that normally the first option is selected by default. I do not want to rearrange my options for aesthetic reasons.
I am looking for help adding a code where no option is pre-selected and the customer cannot add the item to card before selecting their preferred option preferably displaying an error message like “please select an option first” or something similar
I am attaching a screenshot for one of our products with multiple options and in our case the “Device only” is always pre-selected. again we do not want to rearrange the options for aesthetic reasons.
I don’t think it’s possible atleast the knowledge I have of Shopify. There are workarounds that can work.
What creeps up my mind is on load you can remove the class from the by default first variant so it looks like others that are not selected, disable the atc button and then listen for clicks as others have mentioned in the replies.
Now on selection of a variant you just have to enable the atc button and the adding the class i believe Shopify will take care of.
Hey @David84,
thank you so much for jumping in,
that’s exactly what I am looking for. just force them to actually select an option otherwise a message to be shown telling them to select an option.
I am using buttons
@mattie2,
thanks again Mattie!
I truly appreciate your help.
do you mind enlightening me on where to paste the code you provided?
I have very minimal knowledge in such technical tasks
Hey @Shadab_dev,
Thanks for jumping in, I actually talked to shopify support and they were not able to help and referred me to the forums or suggested finding a developer that can help.
Perfect! buttons are ideal for this.
The trick is stopping the form from treating any option as “selected” on load, and only allowing Add to Cart after a real choice is made. That logic lives in the product form script, not the editor.
Are your variant buttons coming from the default Spotlight picker, or a custom snippet?
@kuwaitsouvenirs – many of the posts here are just copy/paste + screenshots from ChatGPT, so be aware of their quality.
Your theme belongs to the Dawn family and they all share the same code. So you may look for solutions for Dawn, etc.
Dawn family also includes Publisher, Taste, Craft, Origin, Spotlight, Crave, Refresh, Ride, Studio, Trade, Sense and Colorblock – they are basically presets of the same theme.
You may see whether it fits your requirements – it does not require editing theme code, just adding a block to the “product info” section in Customizer.
if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it
