50% image opacity if product sold out - warehouse theme

Store Design
1

Hey folks! Hope everyone is well.

I’d like to implement a feature on our site whereby if a product is sold out the product image would appear at 50% opacity at collection view.

We do operate a tag based system which helps present information if a product is low in stock or sold out, so that may be of use in helping you when presenting some code to us.

The product tag we use for sold out products is “NIS” (for not in stock).

We are using the warehouse theme and have upgraded to online store 2.0.

help.jpg
help.jpg1504×1273 177 KB

1 Like
2

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

2 Likes
3

@UK_Aspire_Vendo Go to theme.scss.liquid and put below css at bottom of file.

.grid-view-item--sold-out .grid-view-item__image {
opacity: 0.5;
}
2 Likes
4

Thank you for your proposed solution - however this did nothing :disappointed_face:

1 Like
5

Hi mate!

https://www.ukaspirevendor.co.uk/collections/aspire-nautilus-3-mtl-tanks

You’ll see a sold out product in this URL which we can use to test.

6

Hello there,
Please check this one article.
Link

1 Like
7

I was looking for something a bit more bespoke, rather than trawling a different thread looking for the answers myself.

I always research if I can do it myself before reaching out.

If you could assist me I would very much appreciate it!

8

I have figured out the solution for myself.

in our collection file (named product-item.liquid in our theme) I inserted the following code:

{% for tag in product.tags %}
  {% if tag == 'NIS' %}
    
      {% elsif tag == 'InStock' %}
       
      {% elsif tag == 'LOWSTOCK' %}  
       
      {% elsif tag == '__label1:COMING SOON' %}   
       
      {% elsif tag == '__label:DISCONTINUED' %}
       
         {% elsif tag == '__label:PRE-ORDER' %}
         
        {%- endif -%}
      {% endfor %}

I then added the following to our theme.css file to complete the work:

.product-item__image-wrapperNIS {
  display: block;
  margin-bottom: 20px;
  opacity: 0.2;
}

We have a shopify flow workflow created which monitors when the stock hits a certain level, removes certain tags and adds tags based on that, so when a certain item reaches zero stock, it will automatically change the tag to ‘NIS’ which will therefore change the image to the NIS variant.

Thank you to everyone for assisting, however I’m posting this so that if someone else has a similar issue they can read here!

1 Like