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

On my home page, I've added a summary block to show products from my store.

(Pass: amethyst7)

Sale items show with this nice 'SALE' badge in the top right:

But on the store page https://stoneandspectra.squarespace.com/store the product cards look like this and don't have the badge:

Is there a way to also show the badge in the store view? 

Thanks for your help guys!

Victoria

Please see Store Product List Sale Badge.

Let us know how it goes.

Thank you @creedon! This worked perfectly!

Thanks so much for your help and pointing me in the right direction.

Vic

On 5/23/2023 at 2:46 AM, creedon said:

Please see Store Product List Sale Badge.

Let us know how it goes.

Hi @creedon

Everything was working great but I've added some custom CSS to show my store page (https://stoneandspectra.squarespace.com/store) in 2 columns for screens below 767px wide (mobile view basically).

And now in this view (767 wide and below) the 'SALE' badges have disappeared.

Is there some addition code or styling I need to add to make sure they appear in the 2 column layout?

https://stoneandspectra.squarespace.com

Pass: amethyst7
(scroll down until you see the password box)

Thanks for your help!

Victoria

This is what I'm seeing.

When you are not seeing the badges, are you in editing mode?

Hey @creedon I think you're looking at the summary block on the homepage - the sale badges show natively here. You helped me get them to show on the store page https://stoneandspectra.squarespace.com/store

Desktop:

Mobile:

Thanks for taking a look! Really appreciate the help.

Victoria

I have updated my cited code, making the effect available on mobile. Please reinstall the code.

Let us know how it goes.

Thank you so much @creedon It's working perfect now. I really love this 🙂

Vic

Hi @creedon me again! I've installed your code for the out of stock badges

https://github.com/tomsWebConsulting/twcsl/tree/main/v7.1/Store Product List Out of Stock Badge

But it seems to conflict with the sale badges code.

https://stoneandspectra.com

Scroll down for password input: amethyst7

The home page (summary block which has native badges) is correct - the first 2 are sold out, the third product is in stock but on sale:

The store page https://stoneandspectra.com/shop (your code affects this view) - is showing a bug where it's confusing the third product and it's using the badge to display 'sold out' rather than 'sale'. The first two are correct, the very first product should definitely show 'sold out' even though it's also on sale, because its sold out status is more useful for users to know:

The badges are also not quite working on mobile - just like the sale badge code wasn't at first but then you updated it 🙂.

At the moment it seems to be piggy backing onto the code that's working for the sale badges but changing the text to 'sold out' and it's not showing at all on the second product. The first two are sold out, the third one is just on sale and is in stock.

Is it possible to have the two codes (sale badges and sold out badges) working together? They are so visually effective! I'd love for them to work.

Thanks for your help,

Vic
 

Quote

I've installed your code for the out of stock badges

Quote

But it seems to conflict with the sale badges code.

They do conflict as they weren't designed to work together.

Quote

Is it possible to have the two codes (sale badges and sold out badges) working together?

Not with the current technique. For those technically inclined I'm using a CSS ::before pseudo class. If I were to use before and after that would limit the number of badges to two. That would probably work for this request. If I'm going to get them to work together I think I'd like to have the option for more than two badges but that would require that the effect use actual HTML structures and overlay it to control the badges in a list like fashion.

I just observed that the SOLD OUT badge takes precedence over the SALE badge. I hadn't registered that in my mind previously.

For a CSS only solution such as with my current code, they could never show two badges at once.

@creedon - Hi thanks for the reply! I didn't mean at the same time i.e showing 2 badges on one product, just that the two pieces of code could be used at the same time without conflict.

So that like you said the 'sale' badge would show, but if the item is sold out then it would instead show the 'sold out' badge.

Also if the sold out badge could work on mobile too. Just like you updated the 'sale' badge to work on mobile.

Thanks 🙂

27 minutes ago, victoria85 said:

Also if the sold out badge could work on mobile too. Just like you updated the 'sale' badge to work on mobile.

I can do this easily! Give me a few moments and I'll post in the sold out badge thread about the update.

That's super! I'll probably disable the 'sale' badges and go for the 'sold out' ones as my shop is going to be quite a small collection of one-off pieces so the 'sold out' badge is going to be more useful from a communication and marketing standpoint. 🙂 Thank you!

Quote

I can do this easily!

Done!

Quote

just that the two pieces of code could be used at the same time without conflict.

I'll have to cogitate on this one to see what might be done.

The current issue with the LESS based version is the two pieces of code are sharing the same variables and so the last code installed wins. I'll have to see if I can scope the variables more locally.

Quote

I'll have to see if I can scope the variables more locally.

This looks promising but I can't say I have a solution at this point.

Notice the different positions. If this works out settings are unique to each effect.

Thanks Tom!

I've just gone with the Sold out option - with the latest update, for me, the item that was both sold out and on sale was showing 'sale' rather than sold out.

But I've removed the sale code, like I said I've just gone with the sold out code.

Also I think it might be related but a plugin I was using that showed the inventory stopped working. It shows in the builder but not on the live site (e.g. an incognito window). Here they are in the builder preview...

Product detail page:

/shop page:

They were working until I installed your updated custom css.

40 minutes ago, victoria85 said:

I've just gone with the Sold out option - with the latest update, for me, the item that was both sold out and on sale was showing 'sale' rather than sold out.

Understood. But for those that want to have both, but not at the same time. This is what I'm seeing.

This is with...

Store Product List Out of Stock Badge Version 0.4.0

Store Product List Sale Badge 0.3.0

Previous versions to these two will hammer on each other. If you are installing newly you don't have to worry as only the latest code is available from my official cited sources.

Quote

They were working until I installed your updated custom css.

Most of my code is written against a base SS site. I don't write to be compatible with all other plugins.

I'm happy to take a look to see if I can make my code more friendly with other code.

Quote

Also I think it might be related but a plugin I was using that showed the inventory stopped working.

Wait are you using a plugin or the built-in limited availability labels of your site?

Hey, I think there was something odd happening with the css. It was showing in the editor and then not in live view.

So for the time being I uninstalled your code, reinstalled it and deleted the plugin.

I’ll try again tomorrow and let you know where I’m at. It might have been an issue with some of my CSS - I’ll try and check it 🙂

Quote

I’ll try again tomorrow and let you know where I’m at. It might have been an issue with some of my CSS - I’ll try and check it 🙂

Sounds good.

By the way my code does work with the built-in limited availability feature.

Hi Tom!

I checked through all my CSS and as far as I can see there's no errors, so that's good.

Everything is working as expected so far. I have in place:

• Your sold out badge code - all working
• Native limited availability text (thank you! I didn't know this was a native feature!)

I'm not sure what was happening last night but my CSS only seemed to load and be visible in the builder with the CSS side bar open. But this has resolved. May have been a glitch.

I have saved all my CSS in a file so I can revert back to it and I'm about to install your sale badge code 🙂

I'll let you know how I get on.

I also restyled the badges and I think they look much smarter 🙂