How To Customize The Sale Label in Squarespace 7.1

Nov 8

This tutorial is specifically for the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. For more information, visit insidethesquare.co/themes

When you have an item on sale in your Squarespace store, the product will get a SALE label next to its price.

This video will show you how to change the color and size of that label, and how to move it above the image on desktop and mobile!

Here is the code from this tutorial. Be sure to modify those values to place your label in the right spot; it will be different depending on your font family and size! The first set of values (-200px, -320px) is for desktop and tablet, while the second set (-270px, -360px) is for mobile.

.grid-meta-status{
transform:translate(-200px, -320px);
}
@media only screen and (max-width: 640px) {
.grid-meta-status{
transform: translate(-270px, -360px)
}
}