Add a class only for a template / collection only

[Vic1208]

Hi, 

Few times ago, I got helped here to achieve this results : 

(Sold out products appears as grey on the collection page) 

Here is the link of the post which helped me reach this result

(https://community.shopify.com/c/shopify-discussions/add-opacity-to-sold-out-item-on-product-list-pre...)

Now, I would like to create a "coming soon" collection on my eshop. 

Which would allowed me to present product that are "out of stock" since we don't have the stock for now. 

So its not really out of stock in the sense that it's just coming soon and not "sold out". 

I would like to remove the feature we did add (opacity on sold out item on collection page) only for this collection. 

Do you know how can I do this ? 

I can share collab code if needed. 

Thanks a lot, 

(website : www.ekyog.com)

[Darshan17]

Hi Vic, 

I am able to do this, 
I need the collab access to achieve what you want. 

Thanks !

[Vic1208]

Here it is : 

7639

[Darshan17]

Collaborator request done. 

[Vic1208]

Accepted

[Darshan17]

I have created new collection please confirm first rest of the thing I will change as per your request 
https://ekyog.com/collections/coming-soon

[Vic1208]

All right, 

I'll modify the content later, for now can you just tell me what will you do to make this possible ? if needed I would like to be sure how can I modify / remove this. So if you add code please tell me what and where. 

Thanks a lot

[Darshan17]

I have created a smart collection in which I have selected below option. 

[Vic1208]

Oh no, for now its ok ! of course everything is clear for the collection created (its very simple). 

But I meant, for the part I asked you about the sold out product being not grey on this collection only, could you give me the information of how you did it ? just so I can manage it in the future. Thanks

[Vic1208]

Hi Darshan, 

Do you have any news ? 

Could you check ? 

Thanks ! 

[tim]

If your code was 

<product-card 
  class="product-card {% unless product.available %}sold-out{% endunless %}" 
  {% if reveal %}reveal-on-scroll="true"{% endif %} 
  handle="{{ product.handle | escape }}">

Then you can modify it like this -- would need to replace "coming-soon" with the handle of this new collection:

{% liquid
  assign collections = product.collections | map: "handle"
  if product.available or collections contains "coming-soon"
    assign sold_class = ""
  else
    assign sold_class = "sold-out"
  endif
%}

<product-card
  class="product-card {{ sold_class }}" 
  {% if reveal %}reveal-on-scroll="true"{% endif %} 
  handle="{{ product.handle | escape }}">

[Vic1208]

Hi Tim, 

In which folder is this code ? 

Thanks for your help

[Vic1208]

Hey, 

I found it on product card.liquid but I didnt work. 

Now sold out product arent grey on any of my collection. 

What should I put in the handle space on the code ? 

[tim]

Yes, the handle is ok, no need to change.

Share a screenshot of the code in editor? 

Are you working in live theme? On your live theme sold-outs are greyed out.

Or share a preview link.

[Vic1208]

Yes I was on a test theme thats why. 

Here is the code (I changed it to the live theme and as you can see, sold outs arent grey now even on other collection)

[tim]

This seem to work: