How to add a certain css class to a group of item with the same tag - Prestige Theme

[Vic1208]

Hello there, 

I would like to modify only product cards of items that has a certain tag. 

Here is a quick example : 

I add the tag "coming soon" to my coming soon product so I can put them all in the same collection. 

Then I would like to add a certain class for the product-cards.liquid of those product only (for example add a dark opacity on the image and a "coming soon" text in the middle of the card). 

How could I do something like that ? 

Thanks, 

Victor 

[Shadab_dev]

A bit of liquid and css is all you need for this.

[Vic1208]

Hello Shadab, 

Thanks for you reply,

Yes this is why I'm asking for help because I'm not familiar with this and I don't know how to edit the code to allowed this.

I would appreciate help on this 🙂 

Thanks, 

Victor 

[Made4uo-Ribe]

Hi @Vic1208 

I thought you'd already solved this? In your previous post, I was asking and looking at your product with a 'Sold Out' or 'Coming Soon' badge. I need the code for that.

Sample:

Im not sure if the code I used will work in your store. 

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

.badge.badge--bottom-left.color-scheme-3 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: transparent;
}

.card__content:has(.badge.badge--bottom-left.color-scheme-3) {
    background: rgba(0, 0, 0, 0.7);
}

And Save. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Vic1208]

Hello Mad4uo-Ribe

In fact, in my last post I did found the way to darken the card when the product is sold out. 

But this is completely different (yes i would like to kind of the same thing but with other products and to do so I would like to be able to add a class to a certain type of item that has the same tag). 

So I would like to know : how to add a class which refer to "every product tagged with 'comingsoon' " for example (I didnt add this tag yet to my product but I'm sure you understand). 

To be clear, in the future I might want to add different class which would refer to different group of item because of their common tags. 

Did you understand ? 

When I talk about tag I talk about these kind of tag : 

Thanks a lot, 

Victor

[Made4uo-Ribe]

Yes got it, this might need a developer to get this design. If your interested, we can give you a reasonable qoute. Let us know! Thanks!

[Vic1208]

So there is not any way you can help me on the coding i should use to add a certain css class to a "tagged" group of item ? 

... Just as we did before with the sold-out one ? 

Victor

[Made4uo-Ribe]

I'm sorry, but when the code is complicated, we do require a fee for our time.