How to hide price on product pages in Squarespace 7.1
There may be instances when you want to hide the product price from appearing on your Squarespace 7.1 product pages. Whether you're creating a catalog-style website, offering custom quote-based products, or simply showcasing items without revealing pricing, hiding the price can help deliver a cleaner, more purposeful design.
In this tutorial, you'll learn how to use custom CSS to hide product prices from individual product pages and shop grids in Squarespace 7.1.
Table of Contents
Why Hide Product Prices?
You're running a catalog-only website with no e-commerce functionality.
Your products are price-on-request or require custom quotes.
You want to focus on showcasing design or features before revealing pricing.
You're preparing for a launch and prices are not finalized yet.
Complexity: Easy
Step-by-Step Instructions
Step 1: From the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and paste the code.
//CSS Hide Price
.product-price {display:none;}
Note the above code applies site wide. If you wish to apply the code to a single product, you will need to identify the section id.
A useful tool you can use to identify the #collection-id, #block-id and section[data-section-id="xxxxxx"] is a Chrome Extension called Squarespace ID Finder.
[data-section-id="6055b328552222411afff759"] {
//CSS Hide Price
.product-price {display:none;}
}Key Takeaways
Use
.sqs-money-nativeto target prices across Squarespace 7.1.Apply CSS to both product pages and product grid pages.
Ideal for quote-based, catalog, or preview-only sites.
You can customize your own message in place of the price using
::after.
FAQs
Q: Will hiding the price stop people from purchasing?
A: No. This only hides the visual price. If the add-to-cart button remains visible, users can still purchase the item unless you hide that too.
Q: Can I hide the price for specific products only?
A: Yes! You can use the product ID or product tags.
Q: Will this affect how products appear on mobile?
A: No. This CSS simply removes the price element. Your layout and mobile responsiveness remain intact.
Conclusion
Customising your product display by hiding the price can help shape your customer journey — whether you're focusing on product discovery, offering premium services, or waiting for a launch. With just a few lines of CSS, Squarespace gives you the flexibility to build a store that works the way you want it to.
