Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Create pre-order badge with tagging


Recommended Posts

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

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment

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?

Edited by TheArtisanStudio
Issue arose after I wrote the first version
Link to comment
  • 1 month later...

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!

Edited by b_eddy
Link to comment
  • 2 months later...
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?

Link to comment
  • 1 year later...
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;
}

928473449_Screenshot2021-08-31at16_00_40.thumb.png.32ee71e375262d2890118cf1584fba2a.png

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...