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!!

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:

.category-filter-container {display:none}