Add a custom badge icon for Squarespace products | CSS code

View fullsize

How to create a custom badge icon for Squarespace products in Squarespace 7.1

To create a custom badge icon for Squarespace products add a simple piece of CSS code that will make your product listings stand out. This is great to promote on ‘sale’ Squarespace shop items or ‘new’ products. You can even create multiple tags icons so you can promote various offers.

So here’s what you need to do...

---

Step 1

Add the tag to your product

Add the tag you would like for your product. For example if you want to use ‘New’ add this into the tags section…

---

View fullsize

---

Step 2

Add the CSS for the custom badge icon for Squarespace products

Add the below code to your custom css. Go to > Design > Custom CSS and paste the code. Be sure to change the following word in red to match your tag exactly: .grid-item.tag-new. If your tag is set to ‘sale’ you would change this part of the code to: .grid-item.tag-sale

---

CSS code for product badge

//PRODUCT BADGE ICON

.grid-item.tag-new::after { //Change the word new to match your tag

background-color: #4eafe8; //background colour

color: #FFFF; //text colour

border-radius: 50%;

content: 'NEW'; //Name your badge

display: flex;

font-size: 1.1em;

font-weight: bold;

height: 3em;

align-items: center;

justify-content: center;

position: absolute;

right: 20px;

top: 20px;

width: 3em;

}

---

Did I help you? Consider buying me a coffee as thanks!