Change CSS of not available variant

New Member
2 0 0

Hi there!

I am trying to change the design of variants that are not available so that the customer directly sees it instead of having to choose the variant and only then sees that it's sold out. Here is the shop:

Does anyone have an idea how to do that? I tried every option that I could think of, but I'm not really advanced in this and it's frustrating that nothing works. 

Thanks for your help!


Shopify Partner
164 9 23


Hi there, you need to custom code in product template liquid where when some variant is out of stock. that variant is crossed out so you can not select that variant. like this variant out of stockvariant out of stock  you see tjhis was done with the help of custom code while I was adding color swatches to the product. If you need further assistant or job to be done please visit here.





Do you have experience with Liquid and CSS? Because it requires skill on this. You can follow these steps:

- Step 1: Add soldout class for sold out variants. Refer

You need to add it at for product.variants, code: {% if variant.available %}available{% else %}soldout{% endif %}

- Step 2: After distinguishing sold out variants, you can add CSS for those variants. Refer

It will help you to create slash lines for variants.

Hope it clear to you.

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
New Member
2 0 0

Hey there! I am sorry for my late response. Thanks so much for the help. Unfortunately, I couldn't solve the issue. I have knowledge in html and css, but not in liquid and so I'm struggling with adding the class here. I tried inserting the code but all it does is to 

If it's not too much to ask for, it would be of great help if you could explain a little more where I have to insert the code. 

Thanks again a lot!