How to add special icons to products?

Hello,

I want to add special icons to some products - similar to how the "sale" feature allows you to mark items with a box on top of the product image.

For example, how can I mark some products as "New" or "50% off" or "Vegan" or "Spicy" or some other custom text?

And is it possible to place a small graphic icon instead of text?

1 hour ago, paul2009 said:

See the guide that I wrote here: Adding a custom status badge to Squarespace Products.

Let me know how you get on.

-Paul

Hello! Thank you for your reply.

Unfortunately, even after following your guide, nothing at all appears - not the label, not the background...

I am still on the free trial; do you think that's the reason it's not working?

And how can I add a small sprite / icon instead of using text? Thank you !

It's difficult to troubleshoot this for you without seeing your website. Please provide a working link to your site. You said that your site isn't live yet, so you will need to set a site password and tell us what it is, so that we can view it. The link provides details of how to do this.
 

Hi @paul2009. I am using your code to tag products that ship free (theoldyew.com/shop) and loving it. 

My question is: is it possible to have multiple of these tags? Say, "free shipping", "50% off" and "great gift!" all at once? I haven't been able to make more than one work at once.

Hi @plantshop203. The guide allows you to add one custom product badge. 

If you're interested in multiple badges, then do please DM me with details of what you want to achieve. I'm currently exploring options to improve product conversion on Squarespace sites, and it would be good to understand what you're trying to achieve.

I say this because when product badges are used correctly on a Product List Page (PLP) they can reduce the time that it takes for shoppers to make a decision, potentially increasing sales. However, when there are too many badges, the reverse is likely to be true; they could have a negative impact.

It's a good idea to stand back and look at your PLP from a customer's point of view and consider, what would help them to decide their next move? For example, would it be free shipping, or knowing it's an easy care plant? You'll know this better than me. 🙂

Hey @paul2009 your code works fine but my website (shop is here: www.fioridicipria.com/it/shop-now) is made by a series of summary blocks. 

Any chance to make it work for summary blocks too? If it doesn't require too much work, of course

PS: If you don't know, labels are not displayed if the tag contains underscores 

@RobPegurri Do you still need help?

Hi @tuanphan and @paul2009

I'm having the same problem as @RobPegurri : my custom status badge works on products pages (https://www.olive-groves.fr/huilesolive) but not in summary blocks (https://www.olive-groves.fr/tous-nos-produits)

Can you think of any workaround for this ?

31 minutes ago, CamilleOG said:

I'm having the same problem as @RobPegurri : my custom status badge works on products pages but not in summary blocks

That's because the code snippet is looking for 'tag classes' (such as tag-preorder) that appear on product pages. Squarespace don't include these on Summary Blocks 😕 so the code won't identify them. Instead, Summary Blocks include anchor links (for example <a href="/?tag=preorder"</a>) so it should be possible to write some code to look for these instead.

Thanks @paul2009 

Would this involve a lot of work?

On 12/14/2021 at 1:19 PM, tuanphan said:

@RobPegurri Do you still need help?

I'd appreciate it a lot, yes. I tried but I can't find a solution myself

On 12/15/2021 at 2:40 PM, paul2009 said:

That's because the code snippet is looking for 'tag classes' (such as tag-preorder) that appear on product pages. Squarespace don't include these on Summary Blocks 😕 so the code won't identify them. Instead, Summary Blocks include anchor links (for example <a href="/?tag=preorder"</a>) so it should be possible to write some code to look for these instead.

Ah I see, I chose to make my shop with summary blocks because they're way more flexible

On 4/18/2020 at 6:01 PM, paul2009 said:

See the guide that I wrote here: Adding a custom status badge to Squarespace Products.

Let me know how you get on.

-Paul

Hi Paul, 

Thanks so much for this code - was hunting all over for something like this. However, for me, my tag shows up but not in the right place. Any insight as to why?

24 minutes ago, chelspar said:

my tag shows up but not in the right place.

Where were you expecting it to appear? On 7.1, Squarespace chose to show status badges with the product metadata, not on thumbnail images.

20 hours ago, paul2009 said:

On 7.1, Squarespace chose to show status badges with the product metadata, not on thumbnail images.

Ahhhhh. I gotcha! I don't know why I had in my head that they would show up in a corner of the thumbnails. I'm stuck in 7.0 mode.

On 4/18/2020 at 11:01 PM, paul2009 said:

See the guide that I wrote here: Adding a custom status badge to Squarespace Products.

Let me know how you get on.

-Paul

Hi @paul2009,

Thank you so much for going through the trouble of sharing this. It's not working for me though, am I doing something wrong? Nothing's showing up: www.ottonehardware.com

57 minutes ago, elmeto said:

Thank you so much for going through the trouble of sharing this. It's not working for me though, am I doing something wrong?

It looks like you have missed out step 2 - adding jQuery 🙂

On 7/17/2022 at 12:31 PM, paul2009 said:

It looks like you have missed out step 2 - adding jQuery 🙂

Of course, thank you!

Do you know if there's a way of the badge being on top of the images, like they do here for example: https://www.anthropologie.com/en-gb/dresses

Thanks

44 minutes ago, elmeto said:

Do you know if there's a way of the badge being on top of the images

On Squarespace 7.0, badges appear on the images. On 7.1 they appear below them. You could change this, but it will require CSS and this will be specific to the design that you would like. 

10 minutes ago, paul2009 said:

On Squarespace 7.0, badges appear on the images. On 7.1 they appear below them. You could change this, but it will require CSS and this will be specific to the design that you would like. 

Actually, scrap that, for some reason it's working, so all good, thank you!  By the way, I'm in Squarespace 7.1 and it's appearing on top of images

Hello, 

I am using 7.1 and injected the code you provided but nothing shows up.  have things changed since this topic was first published?

On 4/18/2020 at 3:01 PM, paul2009 said:

See the guide that I wrote here: Adding a custom status badge to Squarespace Products.

Let me know how you get on.

-Paul

Thank you for the guide! I have two books coming out end of year and this is super helpful.