How to change the word “sale” in Squarespace

Sep 29

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

This tutorial will show you how to change the word “Sale” to anything you want it to be on your Squarespace site.

A few important things to note before you copy and paste this into your own site:

→ There is more than one way to do this! This is just one approach of many because code is super customizable.

→ Play around with the font size, colors, font family, padding and all the other options for your new product label to make it suit your style!

→ For more info on colors, check out this article on my site: insidethesquare.co/colors

→ This first code changes EVERY instance of the word sale, not just one individual item.

→ The second code changes the label in the order they appear on your site. Be SUPER careful with this one - if the items get rearranged, you will need to update the number inside the parenthesis to match the order of the items on sale!!

Download Transcript

Here are the codes from this tutorial:

Change all the SALE tags to new text:

.product-mark {visibility:hidden}
.product-mark:after{visibility:visible!important; content:"text goes here"; }

Customize the look of that new text by changing up the colors, font sizes and more in this code here:

.product-mark:after{background:purple; font-size: 3rem; border-radius: 20px; padding: .25rem;}

Create a unique label based on the ORDER YOU PRODUCTS ARE SHOWN IN. Sorry to yell but that is super important!! If you have multiple categories I do NOT recommend using this!

.grid-item:nth-child(3) .product-mark {visibility:hidden}
.grid-item:nth-child(3) .product-mark:after{visibility:visible!important; content:"text goes here";}

An extra one from the demo that will hide the category filter from the page: