How to add text before a price in Squarespace

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

The product content block in Squarespace makes it easy to promote a product on any page, and in this tutorial, you’ll learn how to customize it even more. In this tutorial, we are going to use some CSS to add text both before and after the price.


Below is the code from this tutorial; be sure to change the text to what you want it to say before and after the price!

/* Text Before Price */

.product-price:before{
content: "Available now for only "
}

/* Text After Price */

.sqs-money-native:after{
content:"!"
}

Here is a link to the chrome extension you can use to find the block id. I am not affiliated with this extension or its creator(s) - just a fan!

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

insidethesquare


Grab my collection of custom codes for Squarespace: 
→ insidethesquare.co/css

Learn CSS for Squarespace in my free class:
→ insidethesquare.co/learn

https://insidethesquare.co
Previous
Previous

How to create hover effects for the main menu in Squarespace

Next
Next

How to highlight text in Squarespace