Labeling products on a shop page in Squarespace (7.0 & 7.1)

All CSS tricksCustomization tips7.07.1Bullet points and icons

Mar 23

Have you ever wanted to highlight products on a shop page to visually indicate which are new, vegan, on-demand, up for pre-order, etc?

If so, then today’s tutorial is for you!

We’ll be tackling how we can create little badges or labels for product items that are easy for you to set up, and easy for your clients to turn off and on!

Sounds good? Then let’s get to it.

Note: this post will cover the breakdown of the code when using Squarespace 7.1, but you’ll find the adapted snippet for 7.0 at the end of the tutorial!

Prepping the products

We’ll be starting out with a regular 7.1 shop page that contains a few products:

Out of all of them, two have a Tag added of “New”:

This tag is what we’ll be using as the “identifier” for those products we’re looking to label in some way.

You can use any keyword you like, I’ll just stick with “New”.

Finding the tagged products

The reason why we’ll be using tags to separate some products from the rest is that Squarespace adds that information to the HTML structure of the items when displayed on the main shop page!

Note: the same thing applies to categories, but those also show up as part of the shop’s category filter and, in this case, I don’t want to have a category of “New”.

As you can see in the following screenshots, a class of .tag-new is present in our two tagged products, and missing in the rest:

So, we can rely on the presence of that class to target only our “New” products!

Let’s grab that class, along with the .grid-item class from that same element and create our selector:

.grid-item.tag-new {
  
}

I’ll do a quick check, just to see if we’re targeting the items we want, by giving this container a temporary border color:

So, out of those three products, only the two with the “New” tag are being modified.

Perfect!

Creating the label

To add our little label, we’ll be creating a pseudo-element.

Let’s use an ::after, so that the label sits in front of the entire product.

As its content, I’ll be using the word “New”:

.grid-item.tag-new::after {
  content: 'New';
}

Can you see the text at the bottom of the products?

Great!

Now, let’s move it on top of the image with the help of position: absolute.

I’ll be setting mine 20px from the top-right corner of the product:

.grid-item.tag-new::after {
  content: 'New';
  position: absolute;
  right: 20px;
  top: 20px;
}

Alright! We’re getting there.

Now, how about we style it a little bit?

I’ll be adding a background color, changing the font’s color and size, and setting it to bold:

.grid-item.tag-new::after {
  background-color: black;
  color: white;
  content: 'New';
  font-size: .9em;
  font-weight: bold;
  position: absolute;
  right: 20px;
  top: 20px;
}

And, how about we modify the dimensions of the label a bit, make it round and keep the text in the center with the help of flexbox?

.grid-item.tag-new::after {
  align-items: center;
  background-color: black;
  border-radius: 50%;
  color: white;
  content: 'New';
  display: flex;
  font-size: .9em;
  font-weight: bold;
  height: 3em;
  justify-content: center;
  position: absolute;
  right: 20px;
  top: 20px;
  width: 3em;
}

Well, how about that?

"Can I use an image instead of text?"

I can hear this question forming in your head, so why don’t we tackle it right away?

If you want to use your own custom image as a label for your products, you can use the exact same approach from before, but work with an empty container instead:

.grid-item.tag-new::after {
  content: '';
  height: 50px;
  position: absolute;
  right: 20px;
  top: 20px;
  width: 50px;
}

And then, add in a background image!

.grid-item.tag-new::after {
  background-image: url(your-image-goes-here);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  height: 50px;
  position: absolute;
  right: 20px;
  top: 20px;
  width: 50px;
}

So, there you have it!

That’s how you can create super custom little labels or badges for your client’s products in Squarespace.

Until next time,

Full code

Squarespace 7.1

/*LABELING PRODUCTS ON A SHOP PAGE USING TEXT (7.1)*/
.grid-item.tag-new::after {
  align-items: center;
  background-color: black;
  border-radius: 50%;
  color: white;
  content: 'New';
  display: flex;
  font-size: .9em;
  font-weight: bold;
  height: 3em;
  justify-content: center;
  position: absolute;
  right: 20px;
  top: 20px;
  width: 3em;
}

/*LABELING PRODUCTS ON A SHOP PAGE USING AN IMAGE (7.1)*/
.grid-item.tag-new::after {
  background-image: url(your-image-goes-here);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  height: 50px;
  position: absolute;
  right: 20px;
  top: 20px;
  width: 50px;
}

Squarespace 7.0

/*LABELING PRODUCTS ON A SHOP PAGE USING TEXT (7.0)*/
.ProductList-item.tag-new::before {
  align-items: center;
  background-color: black;
  border-radius: 50%;
  color: white;
  content: 'New';
  display: flex;
  font-size: .9em;
  font-weight: bold;
  height: 3em;
  justify-content: center;
  position: absolute;
  right: 20px;
  top: 20px;
  width: 3em;
  z-index: 10;
}

/*LABELING PRODUCTS ON A SHOP PAGE USING AN IMAGE (7.0)*/
.ProductList-item.tag-new::before {
  background-image: url(your-image-url-goes-here);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  height: 50px;
  position: absolute;
  right: 20px;
  top: 20px;
  width: 50px;
  z-index: 10;
}