Adding "NEW" on new product thumbnail

Site URL: https://www.fvbrk.com/store

Hi! I've tried looking around and I can't seem to find what I'm looking for (possibly because I'm not sure what it's actually called) but I'm trying to add an image at the top corner of my product thumbnails that says "NEW" for new products. Is this a feature I am blindly skipping over or is this even possible on squarespace? A quick example would be the homepage of https://thehundreds.com/ in the "New Arrival" section (the red bomb with the word "NEW"; example image attached). Thanks in advanced!

Hi,

I don't see New Arrivals section. Can you check it again?

14 hours ago, fvbrk_brand said:

I'm trying to add an image at the top corner of my product thumbnails that says "NEW" for new products. Is this a feature I am blindly skipping over or is this even possible on squarespace?

On Squarespace, there isn't a way to automatically identify new products and tag them in this way (the site you quoted as an example was a Shopify site).

However, you can achieve this manually with some code. First add a 'new' tag to the required products. You can add tags and categories in the Product Composer (where you edit products).

Once you've added your tag you'll need some code to look for the tag and show a custom badge. I wrote a simplified guide for this here: Adding a custom status badge to Squarespace Products. There's a version for Squarespace 7.1 within the guide.

14 hours ago, tuanphan said:

I don't see New Arrivals section.

I had the new product hidden as they aren't released yet but I just made 1 product public for now. 

8 hours ago, paul2009 said:

you can achieve this manually with some code.

thank you for this! I tried following your steps and I don't think I did it correctly but I believe you get what I'm trying to do. How do I check to see what version of squarespace I have? Also, if I wanted to use an image instead, is that possible? Thanks again!

29 minutes ago, fvbrk_brand said:

How do I check to see what version of squarespace I have?

@paul2009 I just found it, disregard this, thanks! 

@paul2009 

Hi Paul,

Further to this topic, I've implemented your code into my website for when we first dropped our products and used the word " NEW " for them. 

Its been 3 months since then now and would like to start removing this tag / word from the product titles as we are expecting new items and would like to only be displaying it on the products that are actually new drops.

I tried removing the TAG from one product as the line where it says NEW is in grey and the actual title of the product is in black but when the tag is gone it makes the whole title grey and adjusts it to match the css I've used for the word/tag " NEW ".

Link to one of our products

https://limited-clothing.co.uk/menscollection/p/signature-hoodie-black

Also a link to our product page 

https://limited-clothing.co.uk/menscollection

If this code isn't the best approach for what I am trying to do, would you have an alternative suggestion ? 

I want to keep the same style as you see in my product collection page for when I want a specific product to have a label (i.e New or Coming Soon ) and also keep the same style for the actual product title without a label. Just want to be able to add and remove this 1st line of text for specific products.

Regards

On 1/29/2024 at 12:25 PM, NewbiefromUK said:

Further to this topic, I've implemented your code into my website for when we first dropped our products and used the word " NEW " for them. 

To which code are you referring please? The code mentioned earlier in this thread (Adding a custom status badge to Squarespace Products) is being used for "COMING SOON" badges, not for "NEW" text that you've referred to in your post above 🙂

@paul2009
Hi,

The " Coming soon " one is injected into the website whenever I need to use that bade for the top right corner of the product thumbnails.

The " New " text appears through your code to split the product title into 2 lines. 

I want to be able to add and remove the text " new " from specific product titles - right now id like to only include that text in the title only on new items. If I remove the text " New | " from my product titles the rest of the product title takes the CSS specs of the 1st line of the product title which in this case is the " New | "


This is the link I used to achieve that

https://sf.digital/squarespace-solutions/display-product-titles-on-two-lines-with-squarespace-71

Just want to be able to control the small text above my product titles for each product individually either through your code if possible or through tags maybe.

Hope this makes sense. 

2 hours ago, NewbiefromUK said:

The " New " text appears through your code to split the product title into 2 lines. If I remove the text " New | " from my product titles the rest of the product title takes the CSS specs of the 1st line of the product title

Yes. The code to wrap product titles didn't add classes to allow you to format each line definitively. You'd have needed to use the ::first-line CSS pseudo-element to format the first line differently, and this wouldn't be helpful if you only wrapped some titles.

I've updated the guide for splitting product titles and it now adds class names to the two elements, making it much easier to format them individually. 

@paul2009

Thank you! Much appreciated! I will test this out as soon as.

Is there another way of adding such labels to the product titles please ? For example through tags or similar ? 

Asking this because when I type New | although it looks all good on the website after the CSS kicks in you see this text on all other platforms where the product has been synced. So in all social media platform shops, google etc. When I want to add the label Coming Soon | it will appear in the title and make it very long. 

Was wondering if there is another way of achieving this without affecting the length of the product titles, so kind of have it there visible in the website but nowhere else. 

Thank you for your time

2 hours ago, paul2009 said:

Yes. The code to wrap product titles didn't add classes to allow you to format each line definitively. You'd have needed to use the ::first-line CSS pseudo-element to format the first line differently, and this wouldn't be helpful if you only wrapped some titles.

I've updated the guide for splitting product titles and it now adds class names to the two elements, making it much easier to format them individually. 

Hi,

I've attached a photo below with the issue I am having. Maybe I am misunderstanding something but I think I was able to format the 1st and 2nd line separately before the revision ( i.e. target them with css ). I tried the revision code and deleted the label text New | and the 2nd line of the title took the CSS specs of the 1st line again.Because then the main product title becomes the 1st line.  Please refer to the image below.


Sorry if I've confused you..

Hi,

Any thoughts on this ? 

Regards