Shopify themes, liquid, logos, and UX
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 ?
or something like this website,
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
<style>
.cross-mark:before { content: "x"; position: absolute; top: 5px; right: 5px; color: black; }
</style>
I couldn't find
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025