How can I get the summary grid 'SALE' badges to show on the store page view too?

Hi Tom

Definitely something not quite right still.

I'll insert a screen grab below. The 'sale' badge is taking precedent on an item that's out of stock. I think it's more logical to show it as 'sold out' on the badge even though it was a sale item.

(https://stoneandspectra.com/shop   amethyst 7)

Screen grab:

I'll leave the css as it is so you can see it.

Thanks for your help 😊

Quote

Definitely something not quite right still.

Move the sold out code after the sale code. In CSS the last ruleset wins and it's declarations are applied over previous ones.

Let us know how it goes.

Hi Tom!

This has worked perfect!!

I'm not completely fluent in css, I know a lot more than I did (I get by and I'm learning!) so thank you for your patience. I really appreciate the help. My shop is looking exactly how I want it to now in terms of the sale badges and sold out badges. I'm super happy with them!

Here's how it's looking:

Thanks for all your help 😃

I was wondering if you have a similar code but to use on summary block

56 minutes ago, AntonioSantos said:

I was wondering if you have a similar code but to use on summary block

I do not. Summary blocks natively support badges.

Product list pages natively use a mixture of badges and text to indicate state.

Thank you for answering. Yes I see the badges. I was just trying to change style a bit and the allignement.