Adding 'new' label to product thumbnail pictures

Is there a way to add a 'new' label to certain product thumbnails - much like the 'sold out' label - which appears once something is out of stock? Ideally I'd like to see a label which says NEW on relevant thumbnail products on the product list page, with a green background colour.

I googled & found this link which seems to describe what I want. i've founded instructions, but it's not working for me: https://sf.digital/squarespace-solutions/adding-a-custom-product-badge-to-squarespace

Hi,

This is possible. I helped some member with new label on Summary & Related Products

First, you need to add a tag: new to these products, then share link to shop page & product where you assign tag: New, we can check & give you code easier

Hi! Can you please send me the code to add this?

Need it for products on this website: https://www.mountainhomedecor.ca/

Thank you!

On 2/22/2024 at 7:02 AM, taylorlaidlaw said:

Hi! Can you please send me the code to add this?

Need it for products on this website: https://www.mountainhomedecor.ca/

Thank you!

You can follow this 

I got this working now, however ideally I'd like to have a second type of tag - saying best seller, is this possible? I added custom CSS as well as code injection, and when duplicating this solution and changing to the word 'new' in the code for 'best seller', it then stopped all tags working

13 hours ago, rockout_james said:

I got this working now, however ideally I'd like to have a second type of tag - saying best seller, is this possible? I added custom CSS as well as code injection, and when duplicating this solution and changing to the word 'new' in the code for 'best seller', it then stopped all tags working

Suppose you have 5 products: A, B, C, D, E, F

You want:

• A, B: "New"
• C, D, E, F: "Best Seller"

The process should be

(1) Create 2 tags: New, Best Seller
(2) Assign tag New for products A, B

(3) Assign tag Best Seller for products C, D, E, F

(4) Use CSS code

/* Badge: New */
.tag-new:after {
    content: "New";
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #f1f2f3;
    padding-left: 10px;
    padding-right: 10px;
    color: red;
    font-weight: 600;
    font-size: 14px;
}
/* Badge: Best Sẹller */
.tag-best-seller:after {
    content: "Best Seller";
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: violet;
    padding-left: 10px;
    padding-right: 10px;
    color: white;
    font-weight: 600;
    font-size: 14px;
}

If you follow exact steps but it still doesn't work, you can share link to your shop page, I will check it again

Tuanphanton CSS code works like a charm for me. However, there's a small problem with the positioning of the tag on the shop->product page: the tag is positioned at the right-hand corner of the page and not on the thumbnail image.  

On 3/3/2024 at 5:54 PM, SuperSuper said:

Tuanphanton CSS code works like a charm for me. However, there's a small problem with the positioning of the tag on the shop->product page: the tag is positioned at the right-hand corner of the page and not on the thumbnail image.  

Can you share link to a product page? I can check it easier

On 3/3/2024 at 5:54 PM, SuperSuper said:

Tuanphanton CSS code works like a charm for me. However, there's a small problem with the positioning of the tag on the shop->product page: the tag is positioned at the right-hand corner of the page and not on the thumbnail image.  

You can use this CSS code. Repeat similar for other tags

body.view-item .tag-promo:after {
    content: "%💥 ";
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #000058;
    padding-left: 10px;
    padding-right: 10px;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    display: none;
}
body.view-item .tag-promo .ProductItem-gallery-slides:after {
    content: "%💥 ";
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #000058;
    padding-left: 10px;
    padding-right: 10px;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}

Hello Tuanphan !

I'm sorry for my traditional answer. Thank you for your code. But, it seems to me that there is a mistake. This corrected the problem on the shop->product page. 
https://www.bluecabas.com/quality-apple-cases-best-price/p/ultramarine-blue-iphone-cases-affordable

But now the Tag is no longer visible on the Shop page. 
https://www.bluecabas.com/quality-apple-cases-best-price

Do you have a solution? 
Thanks for your help!!!

21 hours ago, SuperSuper said:

Hello Tuanphan !

I'm sorry for my traditional answer. Thank you for your code. But, it seems to me that there is a mistake. This corrected the problem on the shop->product page. 
https://www.bluecabas.com/quality-apple-cases-best-price/p/ultramarine-blue-iphone-cases-affordable

But now the Tag is no longer visible on the Shop page. 
https://www.bluecabas.com/quality-apple-cases-best-price

Do you have a solution? 
Thanks for your help!!!

 

New code for Product Detail Only.

Don't remove code you used for Tag/Category Page

Oooh how stupid I was to think of that! I confirm it works like a charm!!! Thanks again Tuanphan!!!!!

Hey there! I read this post and i found it really interesting! I used every step given but i got one small probelm and i want to ask if its fixable. Banners are working fine and everything in compination with the Tags given to the products. But the New and Bestseller Banners also appear on products in the "You Might Also Like" section, even though some products don't have a New or Bestseller tag. Is there a problem in the code, can i do something for it? the website is www.odyssey-original.com

I applied the following code:

.tag-new .grid-meta-wrapper:before {
    content: "New";
    position: absolute;
    top: 0;
    right: 0; 
    background-color: #9F957C;
    color: #FFFFFF;
    font-weight: 400;
    font-size: 14px;
    padding: 0px 5px;
}
div.tag-new section.grid-meta-wrapper {
    position: relative;
    padding-top: 30px;
    margin: 0 !important;
}
.tag-bestseller .grid-meta-wrapper:before {
    content: "Bestseller";
    position: absolute;
    top: 0;
    right: 0; 
    background-color: #9F957C;
    color: #FFFFFF;
    font-weight: 400;
    font-size: 14px;
    padding: 0px 5px;
}
div.tag-bestseller section.grid-meta-wrapper {
    position: relative;
    padding-top: 30px;
    margin: 0 !important;
}

 

On 7/8/2024 at 10:15 PM, Nikolas1994 said:

Hey there! I read this post and i found it really interesting! I used every step given but i got one small probelm and i want to ask if its fixable. Banners are working fine and everything in compination with the Tags given to the products. But the New and Bestseller Banners also appear on products in the "You Might Also Like" section, even though some products don't have a New or Bestseller tag. Is there a problem in the code, can i do something for it? the website is www.odyssey-original.com

I applied the following code:

.tag-new .grid-meta-wrapper:before {
    content: "New";
    position: absolute;
    top: 0;
    right: 0; 
    background-color: #9F957C;
    color: #FFFFFF;
    font-weight: 400;
    font-size: 14px;
    padding: 0px 5px;
}
div.tag-new section.grid-meta-wrapper {
    position: relative;
    padding-top: 30px;
    margin: 0 !important;
}
.tag-bestseller .grid-meta-wrapper:before {
    content: "Bestseller";
    position: absolute;
    top: 0;
    right: 0; 
    background-color: #9F957C;
    color: #FFFFFF;
    font-weight: 400;
    font-size: 14px;
    padding: 0px 5px;
}
div.tag-bestseller section.grid-meta-wrapper {
    position: relative;
    padding-top: 30px;
    margin: 0 !important;
}

 

To exclude it from You might also like section, use this code under

div.ProductItem-relatedProducts .grid-meta-wrapper:before {
	display: none !important;
}

4 hours ago, tuanphan said:

To exclude it from You might also like section, use this code under

div.ProductItem-relatedProducts .grid-meta-wrapper:before {
	display: none !important;
}

 

That's amazing! Thank you very very much man! Really appreciate it!💯