Create pre-order badge with tagging

Site URL: https://theartisanstudio.uk/

I began my question here:

On 4/7/2020 at 9:05 PM, TheArtisanStudio said:

I would like to add a third badge that would look like the "Sale" and "Sold out" badges, saying "Pre-order". I don't believe this feature exists yet. [I would like to add the badge... to display over the top of the product image both when in the groups of products and the individual product page.  This is the website: https://theartisanstudio.uk/ 

There's not a built in feature to do what you need, but it can be achieved with some code. Take a look at the guide I put together:

https://sf.digital/squarespace-solutions/adding-a-custom-product-badge-to-squarespace

Again for some reason I couldn't see your reply until now.

Your guide is awesome Paul! Truly awesome. The clearest instructions to do anything I have seen for years. It took me all of two minutes to get it up and running. How can I thank you?

Something really weird is happening - the pre-order badge only appears when I refresh pages (same on desktop computer and mobile) and not the first time it loads. Any ideas why?

Looking at your code, and how it works sublimely across all of my product pages (I have three due to Squarespace's 200 product limit) I wonder whether it can be used to do other things across all product pages at the same time? Like pulling them to a single link (to make a selection on one page of products from more than one product page? Or tagging across product pages?

Second weirdness - badge disappears when I click on product detail and then use the browser "back" button.

Checked with another person and the "only appear on reload page" thing happened with her too. So strange.

Thanks to Paul's updated guide it's all working perfectly now. What a star Paul is.

Paul,

I am using (and LOVING) your Wishlist extension and would like to add a 'New' custom status badge to items as they get added to our site. Followed the instructions and the badges show up when viewing the product page, but they do not appear when using a summary block.

Thanks!

On 6/2/2020 at 5:43 PM, b_eddy said:

Paul,

I am using (and LOVING) your Wishlist extension and would like to add a 'New' custom status badge to items as they get added to our site. Followed the instructions and the badges show up when viewing the product page, but they do not appear when using a summary block.

Thanks!

Any luck on getting this to work?

Hi Paul,

I was just wondering if you have updated your guide for the badge using tagging for the 7.1 sites? I tried without success using the code you show here https://sf.digital/squarespace-solutions/adding-a-custom-product-badge-to-squarespace.

The current code you did before shows the word "pre-order" below the product but no badge.

43 minutes ago, TheArtisanStudio said:

The current code you did before shows the word "pre-order" below the product but no badge.

The code in my guide changes the wording of the 'badges' so that you can have custom names. It doesn't change the formatting. 🙂

As you'll have seen, Squarespace changed the style of their 'badges' on 7.1. Previously they appeared as small shapes on the images, but on 7.1 they are plain text, added below the product image. However, you can change this styling of badges with some Custom CSS. For example:

.products.collection-content-wrapper .product-mark {
  position: absolute;
  top: 17px;
  right: 17px;
  background: #444;
  padding: 3px 5px;
  font-size: 11px;
}

First of all I apologise profusely - once again I got no alert for your reply and only just found it. Fantastic Paul it works! Can I have more than one wording for the badge? i.e. "pre-order" and "Arriving next week!" ?

Also, the pre-order badge doesn't seem to carry over to a collection page (in our case "Gift Edits"). Is there something more I need to do? Thank you!

can your badges in 7.1 be made round instead of rectangular?