Prestige Theme - Cross Out Unavailable Variant

Store Design
1

Hi,

I’m wanting to cross out the unavailable variant similar to below.
Can anyone tell me if this is possible in the Prestige Theme?

Thanks so much!

Iosif_Mihai_0-1654788333064.png

Shop: https://biancabikinis.com/

2

Hi @Iosif_Mihai

To add cross line in unavailable variant you need to add one condition inside product variant section:

{% unless product.selected_or_first_available_variant.available %}unavailable_product{% endunless %}

  • find HorizontalList__Item class inside product-template and paste above code beside this class

  • after adding this class add below CSS in theme.css file:

li.HorizontalList__Item.unavailable_product {
    position: relative;
}

li.HorizontalList__Item.unavailable_product:after {
    content: '';
    position: absolute;
    width: 1px;
    height: 50px;
    border-left: 1px solid black;
    left: 0px;
    top: 11px;
    transform: rotate(45deg) translateY(-25px);
    z-index: 1;
    pointer-events: none;
}

I hope it’s helpful to you.

3

Hello man, I can’t find HorizontalList__Item

4

I found it, but doesn’t work, I add code in CSS to,

It appares next to variant text " unavailable_product"