Jump to content

How to add special icons to products?

Go to solution Solved by paul2009,

Recommended Posts

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?

Link to comment
  • Solution
6 minutes ago, HelloKitten said:

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.

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

Let me know how you get on.

-Paul

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ‚ô•.
Work: Squarespace Developer and¬†founder of¬†SF Digital, building the features¬†Squarespace didn't include‚ĄĘ.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
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 !

Edited by HelloKitten
Link to comment

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.
 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ‚ô•.
Work: Squarespace Developer and¬†founder of¬†SF Digital, building the features¬†Squarespace didn't include‚ĄĘ.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 1 year later...

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.¬†ūüôā

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ‚ô•.
Work: Squarespace Developer and¬†founder of¬†SF Digital, building the features¬†Squarespace didn't include‚ĄĘ.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 4 months later...

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 

Edited by RobPegurri
Link to comment
  • 2 weeks later...
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.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ‚ô•.
Work: Squarespace Developer and¬†founder of¬†SF Digital, building the features¬†Squarespace didn't include‚ĄĘ.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 3 weeks later...
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

Link to comment
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.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ‚ô•.
Work: Squarespace Developer and¬†founder of¬†SF Digital, building the features¬†Squarespace didn't include‚ĄĘ.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 6 months later...
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¬†ūüôā

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ‚ô•.
Work: Squarespace Developer and¬†founder of¬†SF Digital, building the features¬†Squarespace didn't include‚ĄĘ.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
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. 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ‚ô•.
Work: Squarespace Developer and¬†founder of¬†SF Digital, building the features¬†Squarespace didn't include‚ĄĘ.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
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

Link to comment
  • 3 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

√ó
√ó
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.