Grey out and make the button unclickable for an unavailable variant for brooklyn theme

New Member
1 0 0

Hello Smart Cookies,
Hope you are all having a great holiday!

I have recently launched a clothing store and I am having issues with showing my customers which styles are available and which are not.

I have 3 different styles of that clothing, Pro, Lite, and Work. I have 4 different colours, and 6 different sizes, however not all styles are available in every colour:

PRO = Black, White, Green
LITE = Black, Blue
Work = Black, White.

If someone chooses 'LITE' and 'White' then it will tell them that the product is unavailable. My question is:
Is it possible to make it such that if someone presses "LITE" and the colours ["White", "Green"] are not available, can I make the little box where you choose your colour to be greyed out (so "white" and "green" would be greyed out) and they could not click on it. I want to avoid the hassle of them randomly clicking about, seeing what's available and what isn't available. If this is possible, could someone show me a possible solution? I have already checked some solutions but all of them seem to be out of date. Is there an app or some code I could use?

Thank you.

THEME: BROOKLYN

Below is a screenshot to show what I mean:


shopify forum.png

 

 

pseudocode:

style = [pro,lite,work]

colours = [black,white,green,blue]

sizes = [s,m,l,xl,xxl,3xl]

 

combination_dictionary(){

 

pro: black

pro: white

pro: green

 

lite: blue

lite: black

 

work: black

work: white

 

}

onAction(){

 

    if in combination_dictonary() is true:

          continue

else:

       grey out (colours,sizes)

 

Thanks!

 

0 Likes