A user wants to display an “X” mark over sold-out size options (S, M, L, XL, XXL) on their Shopify product pages, similar to examples shown in screenshots.
Proposed Solution:
Another participant suggests adding custom Liquid code to the product template:
Implementation Challenges:
Current Status:
The conversation remains unresolved—the user cannot locate the specific code element (input type=“radio”) needed to implement the suggested solution.
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.
and the second one with the X marked on the sold out ones:
Thank you!
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.
hmm, can you please be more specific where to put exactly these code ?
The above code goes in the product section, where the variant is loading. you can add the style part on top of the section.
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 ?
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.
main-product
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; top: 5px; right: 5px; color: black; }
{% endfor %}
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
.cross-mark:before { content: "x"; position: absolute; top: 5px; right: 5px; color: black; }I couldn’t find
