Solved

Adding opacity for sold out items on product list

Yedigunmarka
Tourist
16 0 2

I want it to be pale like the attached image (Shopify Brooklyn Theme) for out-of-stock products. I did research for this but it didn't work. The codes didn't work. I am using the theme called Motion. I would be glad if you help

My store

https://7gunmarka.myshopify.com/

Screenshot 2021-09-01 15.57.51.png

Accepted Solution (1)
r8r
Shopify Expert
2555 327 940

This is an accepted solution.

@Yedigunmarka – like so? 😉

Screenshot 2021-09-06 at 17.40.25.jpg

Sorry, I was looking at collection tiles with my answer above … all you need to do is open the file /snippets/product-grid-item.liquid and find the following code in line 26:

<div class="grid__item grid-product {{ grid_item_width }}{% if settings.quick_shop_enable %} grid-product__has-quick-shop{% endif %}" data-aos="row-of-{{ per_row }}" data-product-handle="{{ product.handle }}" data-product-id="{{ product.id }}">

Then replace it (add that final attribute, actually) with …

<div class="grid__item grid-product {{ grid_item_width }}{% if settings.quick_shop_enable %} grid-product__has-quick-shop{% endif %}" data-aos="row-of-{{ per_row }}" data-product-handle="{{ product.handle }}" data-product-id="{{ product.id }}"{% unless product.available %} style="opacity: 0.5;"{% endunless %}>

… and you're set.

Hope this solves it.
Mario

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte

View solution in original post

Replies 15 (15)

r8r
Shopify Expert
2555 327 940

@Yedigunmarka - it’s not a difficult thing to accomplish, but without knowing the theme source code it’s very likely step by step instructions won’t hit the nail on the head.

what I would do is, apply a class to the given product the collection page, by checking its availability. Like …

<div class="grid__item{% unless product.available %} product-soldout{% endunless %}<!-- there are more css classes here -->">

And then modify the opacity for that class via CSS like …

.grid__item.product-soldout {
  opacity: 0.5;
}

Note: I don’t have access to the Motion theme, so you might be best off looking for grid__item and adding the unless-block there; I assume the product-object is available there. 

Hope this helps … Mario

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte
Yedigunmarka
Tourist
16 0 2

I'm sorry. I can't find collection page css. I have collection only or main collection.. I check your codes but i can't find 😞

r8r
Shopify Expert
2555 327 940

Start looking in /templates/collection.liquid. You should at least find references to files which should eventually be responsible for rendering the product grid items. 

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte
Yedigunmarka
Tourist
16 0 2

@r8r Unfortunately, I check but i don't see. Sorry

 

Screenshot 2021-09-06 00.02.35.png

 

r8r
Shopify Expert
2555 327 940

@Yedigunmarka – alright, I see that's an OS 2.0 setup. In that case, look into the .liquid files in the /sections folder!

Mario

 

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte
Yedigunmarka
Tourist
16 0 2

@r8r Sorry. I've looked at all of them. Could you please come in and have a look?

r8r
Shopify Expert
2555 327 940

This is an accepted solution.

@Yedigunmarka – like so? 😉

Screenshot 2021-09-06 at 17.40.25.jpg

Sorry, I was looking at collection tiles with my answer above … all you need to do is open the file /snippets/product-grid-item.liquid and find the following code in line 26:

<div class="grid__item grid-product {{ grid_item_width }}{% if settings.quick_shop_enable %} grid-product__has-quick-shop{% endif %}" data-aos="row-of-{{ per_row }}" data-product-handle="{{ product.handle }}" data-product-id="{{ product.id }}">

Then replace it (add that final attribute, actually) with …

<div class="grid__item grid-product {{ grid_item_width }}{% if settings.quick_shop_enable %} grid-product__has-quick-shop{% endif %}" data-aos="row-of-{{ per_row }}" data-product-handle="{{ product.handle }}" data-product-id="{{ product.id }}"{% unless product.available %} style="opacity: 0.5;"{% endunless %}>

… and you're set.

Hope this solves it.
Mario

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte
Yedigunmarka
Tourist
16 0 2

@r8r Done. Thank you so much. I would like to make a payment to you, but paypal and other payment methods are closed in Turkey. Please forgive me. God bless you

r8r
Shopify Expert
2555 327 940

@Yedigunmarka – no problem, thanks still. If you're in a generous mood, you can donate money to a cancer research in both our names!

Mario

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte
Yedigunmarka
Tourist
16 0 2

Donated. Don't worry. Thank you🙏🏻

Lukewilliamsart
New Member
4 0 0

Hi. I’m trying to add opacity (get rid of the greying) to my sold out items so that all of the items are clear to see like the original photo. I’m also trying to get these items to appear in a grid instead of collage. My shopify doesn’t seem to give a grid or collage option. Any help would be great. Thanks! 

Michel25
New Member
4 0 0

Hello Mario
This code works great! Is it also possible to reduce only the opacity of the image and not at the tag?

sharaiz
Excursionist
21 0 5

Hello
I also want to reduce the opacity of sold-out products but cant find collection.liquid
Using Refresh Theme
URL: www.sonashi.pk

Yedigunmarka
Tourist
16 0 2

@r8r I'm sorry. I can't find collection page css. I have collection only or main collection.. I check your codes but i can't find

Lukewilliamsart
New Member
4 0 0

Hello. My sold out images are greyed out in Brooklyn theme. I would like them to be the same as the non sold out images (but keep the ‘sold out’ icon. My second issue is that my sold out items are appearing larger than my non sold out items. I would like them to all be the same size. Any help would be hugely appreciated. Thanks. I am lukewilliamsart.myshopify.com