javascript shopify
I apologize in advance as I'm not able to get the minimal amount of code possible, but I'm currently working on a Shopify site (that I didn't build) and I want to have no default variants selected. For example, if you go to this page https://thriveworkwear.com/products/carpenter-work-pants-5300-pro, you'll see that the default options are Color: Hickory Waist:30W Inseam:30L.
Is there a way to disable the default variant functionality? Meaning that no variants are selected and the user has to select them manually.
I tried to follow this guide https://help.shopify.com/en/themes/customization/products/variants/how-to-add-a-pick-an-option-to-drop-downs and this one but they DIDN't work.
I have also tried adding this:
document.querySelector('input[name="name0"]:checked').checked = false;
document.querySelector('input[name="name1"]:checked').checked = false;
document.querySelector('input[name="name2"]:checked').checked = false;
to the theme.js file but it didn't work. It seems to work if I add it through the console tab but not when I add it on the site.
Any help is appreciated.
Awesome @drip! Thank you so much. It was definitely the app that was causing it and I was able to make the change I needed. With the being said. I'm curious of why the javascript I add to target the radio buttons didn't work, until after the page loaded.
setTimeout(function(){document.querySelector('input[name="name0"]:checked').checked = false;}, 3000);@Efrain Lemus Apps usually takes more time to load in the front-end when they rely on the ScriptTag API, especially if they make a request to gather information. So they don't load on DOM ready and sometimes not even at window load. So in that case you will have to look for a hook that is fired once their code is done (if there is any) or you will have to think of something else. setTimeout is okay if you know it won't take longer than 3000ms but usually a mutation observer or setInterval (if written properly) may do you better.