How To Disable Auto Variant Selection On Products for motion theme

[aelsaadi]

My websites products automatically pick the first size and since that size only comes in a few lengths it greys out all the other sizes that dont have that length. I want it to nothing selected whenever a user opens the product page and then whenever they select a variant option it'll grey out everything that isn't available in that variant. This is in order to avoid users coming and thinking everything else is sold out since its greyed out due to it automatically picking the first variant. I am currently using the motion theme.. any help?

[PaulNewton]

Hi @aelsaadi this is an advanced theme customization when a theme is not already built to have it as a setting.

If your code savvy you can try to adapt old vintage  "choose an option" customizations to work in a modern theme.

https://help.shopify.com/en/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-... 

If you need a no-variant-selected theme customization then contact me by my email for services, or if you have access private message by clicking here (sloooower).
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

[namphan]

Hi @aelsaadi,

Please send me the store link, I will check it for you

[aelsaadi]

store link is https://geovannisuits.com   thanks for taking a look at it 

[namphan]

Hi @aelsaadi,

I checked and have 2 solutions for you:

- 1: You use JS to change the default display variant, so it will show the variants that are still in stock. For example, will display '42/36W' as default.

- 2: You will disable the defaults first, then use JS to notify the customer that they need to select a variant before they want to add to cart.

Both of these methods will require JS experience, which will be a complex requirement. Therefore, I recommend you hire a professional for it.

Or I can check it for you with a collaborator invitation.

Please let me know.

[aelsaadi]

I appreciate the rapid response! For the first solution you offered, would that mean only the sizes in stock would be available? So everything out of stock would be greyed out but the rest is available and there is no default selection? Because the options vary depending on which length option you pick. For the second option, I have some decent JS experience so that is a possibility but I want to explore the first option first. Can you provide a further explanation, maybe even screenshots of examples too?

Thank you!

[namphan]

Hi @aelsaadi,

You will use JS to load a variant that includes the least out of stock variants. Refer:

[aelsaadi]

I'm sorry I'm having trouble understanding - how will this fix my issue? The issue is that some sizes even if we have stock they grey out others because they don't have the specific length. What I need is for the default is to show all sizes and lengths in stock and only then when someone chooses something will it affect the variants. Will the JS changes you're referring to solve this? If so, how can I do it?

[namphan]

Hi @aelsaadi,

So solution 2 is best for you. You can find the code at theme.min.js file. 

I hope it helps!

[aelsaadi]

Can I invite you to collaborate on it so you can check it out? the code looks extremely messy in that file and I am unsure what to do. Let me know

[namphan]

Hi @aelsaadi,

Sure, please send the collaborator code in private message, I will send you the invitation and check it