How to change the word “SALE” to something else on Squarespace // 7 & 7.1 Squarespace CSS Tutorial

Squarespace is notorious for changing its program layout (interface) multiple times a year. This video likely looks outdated, but the codes and concept are not! 
For the latest tutorials visit insidethesquare.co
---
This tutorial was recorded in my 7.1 demo site but also works for older versions of Squarespace!
---
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!!

//-- 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:"20% off";}

//--An extra one from the demo that will hide the category filter from the page
.category-filter-container {display:none}

▸▸▸Using a personal subscription?
You need to install the code with an on page code block instead. It’s not perfect, and will take a second to load, but it will work! Check out this tutorial for info on how to make that happen:
youtu.be/ptQkzTVYRFs

---
🤩 Ready for more codes? The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you're ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Download your copy 👉 InsideTheSquare.co/css
---
🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): insidethesquare.co/partner10
---
🙋 Need some help? Visit ​insidethesquare.co/code-help​ to see my current support options.
---
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ❤️

---
#squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #squarespacetips