Style Your Sales Tag with CSS // Squarespace CSS Tutorial

Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics – grab my free Getting Started Guide here πŸ‘‰

If you are having a sale in Squarespace, make sure it stands out with some simple CSS!

In this tutorial, I am going to show you how you can add three different Sales Stickers (and yeah – I totally made that name up. I am sure there is something much more official to call them… but who doesn’t love stickers?!) to your Squarespace website. Now these CSS codes work for Squarespace 7.0 and they work for modifying the CSS in Squarespace 7.1 so no matter when you built your site, you can make it work!

The Sticker Pack with these copy and paste codes is available for FREE at

Make sure to watch the whole tutorial so you can learn how to modify these codes for your own site styles! You can change up colors, shapes, and sizes with a little clever CSS and in the video, I walk you through it.

If you have any questions about how to make this work or want to brag about how good your sales page looks, let me know in the comments below! I love to hear from other Squarespace designers working with CSS.

Oh! And before I forget, for those of you working in Squarespace 7.0… if you do NOT see the word “sale” when you have a product listed for its sale price, make sure you add this little snippet of code first so it is actually visible and in line with your product itself because some templates don’t show it automatically!
.tweak-product-badge-style-none .sqs-product-mark-wrapper .product-mark {display:inline-block}

#squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #squarespaceecommerce #squarespacestore #styleyourstore

The term “Squarespace” is a trademark of Squarespace, Inc. I am not affiliated with Squarespace, Inc. I just really love their platform.

Post Author: hatefull