Adding a custom status badge to Squarespace Products

10 Apr

This guide explains how to add custom product badges to products on your Squarespace store page. It was updated for the latest store pages in September 2025.

Why use status badges?

When promoting products, it helps to draw attention to products with a special status in your online store, just as you would in a ‘bricks-and-mortar’ shop.

Visible badges can increase conversion for online stores by making products more appealing. Squarespace has some built-in badges to highlight products with a SALE or SOLD OUT badge, but there isn’t a feature that allows you to add a custom status badge. For example, you may want a custom status badge to highlight:

New products
Exclusive products
Limited Edition products
Products that are coming soon
Products that can be customised

How to add a custom badge

I have built a free plugin that allows you to add badges to your store page for one custom status. For example, you can use this to highlight new products in your store. The code for this badge is shown below.

How to add multiple custom badges

If you’d like to add many different types of status badges, there’s a paid version of the plugin available here:

How to add a “New” badge to products

As an example, let’s add a “New” badge to product list pages to encourage customers to purchase products that are have recently been added to the store. If you would prefer a badge with a different title please see the notes that follow step 7 below. These explain how to customise your badge for any purpose.

1. Firstly, edit the product to add a tag with the name ‘pre-order’ as shown below. Scroll down to the Organization section and type the name of the tag. Don’t forget to save your settings!

How to add a pre-order tag to a product on Squarespace

2. Next, go to Code Injection panel and scroll down to the panel named FOOTER.
If jQuery is not installed (there isn’t a line that already mentions jquery) then add this to the Footer box:

  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous"></script>

3A. If you are using a Squarespace 7.0 Brine-family template, add the following code - or read further down for the 7.1 version.

3B. If you are using Squarespace 7.1, add this version of the code instead:

4. Save the changes by clicking SAVE (in the top left corner). If you view your Products page, you should now see a ‘pre-order’ badge on the product tagged with the ‘pre-order’ tag in step 1.

5. You can customise the background colour of this badge by adding some styling (otherwise known as CSS) to the Custom CSS panel:

  
    .sqs-product-mark-wrapper .product-mark.sf-pre-order {
  background: #EB7820;
}

6. I’ve used an orange background (#EB7820) as an example but you can replace this colour code with your choice of colour.

7. Save your changes.

Custom product badge titles

The above example added a “Pre-Order” badge, but you can customise it for any badge title by substituting your choice of ‘tag’ name and your choice of badge ‘label’. For example, let’s assume you want to add a badge labelled ‘New’ to your latest products.

1. The first thing you’ll want to do is to add a tag to one of your latest products. You could call it ‘new’, ‘new-product’ or whatever you choose!

2. When you have added your tag, edit line 6 of the special code (as seen in step 3A or 3B above) to match the name of the tag that you chose. For example, if you added a tag called ‘new’ then you’d edit it to look like this:

  
    var sfCustomBadgeTag = 'new';

3. Next, decide how you want your badge to look. What do you want the label to say? If you want it to say ‘New Product’ then edit line 7 to look like this:

var sfCustomBadgeLabel = 'New Product';

4. Save your changes to the code. That’s it! Any products with the chosen tag should now show the chose caption.

Badge Styles

The last step is to choose the background colour of the badge. To do this, go to the Custom CSS panel and add a new style.

Squarespace 7.0

The example below assumes that your products has the tag ‘new’. If it has a different tag, replace new with the name of your tag. It also assumes that you want the badge to be red. You can change this to suit your needs as explained in step 6.

Squarespace 7.1

Here is an example for Squarespace 7.1. As mentioned above, the “new” in “sf-new” should be changed to reflect the name of the tag that you used for your custom badge.

  
    .product-mark.sf-new {
    background: red;
}

You can also use more advanced CSS to set the position and formatting of the badge. For example:

  
    .product-mark.sf-new {
    position: absolute;
    top: 0;
    background: red;
    font-weight: bold;
    padding: 5px;
    font-size: 11px;
    margin-top: 0.5rem;
    color: #fff;
}
  
  

This guide contains some simple JavaScript code and some CSS to demonstrate how flexible Squarespace can be. We’ve kept it simple so that it is easy to install, but this does mean that it has some limitations:

it allows you to add one custom badge to products. A custom solution could add several different types of badge.
it is for product pages only. It will not add badges to Summary Blocks.
it relies on the jQuery library.

If you are interested in a custom solution that offers improved website performance and has been customised for your site, consider booking an official, approved Squarespace Expert via the Squarespace Marketplace. Costs start at £500 (around USD$600/€600).