Re: Variations UI/UX

Can UI/UX show a cross through out of stock variations?

KL-Swimwear
Tourist
10 0 2

Hello Shopify experts!

 

I would like to know if there is a way to have the UI/UX show a cross through variations that are out of stock?

 

For instance if (M) Medium is out of stock then I would like it to show a cross through it.

 

shopify variation.jpgshopify variation2.jpg

 

KL
Replies 4 (4)

Simonsron
Shopify Partner
699 87 122

In the place of your loop variant add

{% for variant in product.variants %}
{% if variant.inventory_quantity > 0 %}
<div>
//Normal variant item
</div>

{% else %}
<div class="soldOut">
//sold Out variant item
</div>
{% endif %}
{% endfor %}

Then write a css for your sold out

.soldOut{
            position: relative;
        }
        .soldOut::after{
            content: "";
            width: 70%;
            height: 1px;
            background-color: #000;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: rotate(20deg) translate(-50%,5px);
        }
        .soldOut::before{
            content: "";
            width: 70%;
            height: 1px;
            background-color: #000;
            position: absolute;
            top: 15%;
            left: 50%;
            transform: rotate(-20deg) translate(-50%);
        }
banned
KL-Swimwear
Tourist
10 0 2

I'm still learning exactly where to place these codes exactly. So when you say in place of your loop variant means I need a few more steps to find and understand the loop variant please!

 

 

KL
Simonsron
Shopify Partner
699 87 122

Since I don't know your exact code either, that's as far as I can help you.

If you can't find it and need my help, you can contact me.

banned
KL-Swimwear
Tourist
10 0 2

So I've been giving it a shot but no luck, I have a strikethrough but it is gray and ideally would like just to change that colour to a prominent red and maybe thickness so customers can see it very easy

 

I'm using the Ride 8.0.0 theme. 

KL