Can I mark sold out sizes with an X on my website?

vladescupetrut
Excursionist
25 0 7

Hello there, i would like to know if its possible to make an size "S, M, L, XL, XXL" if there one of them its unavailable to be marked with X like in the second screenshot, in the first one its my website.

 

vladescupetrut_0-1674558191342.png

 

 

and the second one with the X marked on the sold out ones:

 

vladescupetrut_1-1674558191355.png

 

 

Thank you!

Replies 11 (11)

Salil17
Shopify Partner
86 5 12

Add this loop in variant class -

 

{% for variant in product.variants %}

{% if variant.available == false %} 

cross-mark

{% endif %}

 

Then add the style

 

.cross-mark:before { content: "x"; position: absolute; top: 5px; right: 5px;  color: black; }

{% endfor %} 

 

Was my reply helpful? Please Like and Accept Solution. This mean a lot to me.

vladescupetrut
Excursionist
25 0 7

hmm, can you please be more specific where to put exactly these code ?

Salil17
Shopify Partner
86 5 12

The above code goes in the product section, where the variant  is loading. you can add the style part on top of the section.

vladescupetrut
Excursionist
25 0 7

that doesnt mean to put on every product that codes ? i have 200+ products, we cannot find a solution to put it in the theme codes ?

vladescupetrut
Excursionist
25 0 7

or something like this website,

Salil17
Shopify Partner
86 5 12

you need to put this in just one section, which is product.liquid or some thing similar. In that also you have to figure out where the variants are loading. 

vladescupetrut
Excursionist
25 0 7

 

 

Salil17
Shopify Partner
86 5 12

main-product

vladescupetrut
Excursionist
25 0 7

I can put the codes below anywhere in the main-product.liquid ?

 

{% for variant in product.variants %}

{% if variant.available == false %} 

cross-mark

{% endif %}

 

.cross-mark:before { content"x"position: absolute; top5pxright5px;  color: black; }

{% endfor %} 

 

 

Salil17
Shopify Partner
86 5 12

Try to find input type="radio" and then add a

 

class="

{% for variant in product.variants %}

{% if variant.available == false %} 

cross-mark

{% endif %}

{% endfor %} 

"

 

and 

 

This part put put on top of the section

<style>

.cross-mark:before { content"x"position: absolute; top5pxright5px;  color: black; }

</style>

vladescupetrut
Excursionist
25 0 7

I couldn't find