How to hide add to cart button in Squarespace 7.1

There may be times when you want to hide the "Add to Cart" button in your Squarespace 7.1 store. Whether you're showcasing products without selling them, running a catalog-only site, or offering items for inquiry rather than purchase, hiding the button is a clean and simple solution.

In this tutorial, you’ll learn how to use custom CSS to hide the “Add to Cart” button from product pages or the product list view in Squarespace 7.1.

Table of Contents

• Why Hide the Add to Cart Button

• Step-by-Step Instructions

• Key Takeaways

• FAQs

• Conclusion

Why Hide the Add to Cart Button?

• You're displaying products without selling them.

• You want customers to inquire via contact form instead.

• You're building a catalog-style site with no e-commerce functionality.

• You want to limit purchasing until a future date.

Complexity: Easy

---

Step-by-Step Instructions

Step 1: From the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and paste the code below

To Hide "Add to Cart" on Product Pages:

//CSS Hide Add to Cart Button
.ProductItem-details .sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button {display:none;}

Note: Custom CSS 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="xxxxx"] is a Chrome Extension called Squarespace ID Finder.

[data-section-id="6055b328552222411afff759"] {

//CSS Hide Add to Cart Button
.ProductItem-details .sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button {display:none;}

}

Key Takeaways

• Use .sqs-add-to-cart-button to target product grids/listings.

• Ideal for catalog-only websites or soft launches.

FAQs

Q: Will this prevent users from purchasing if they know how to use the browser dev tools?
A: This method only hides the button visually. If you need to fully disable purchases, you should also disable checkout.

Q: Can I hide the button for just one product?
A: Yes. Use the product’s unique ID or tag to target it specifically

Q: Will this affect mobile layout?
A: No — this CSS simply hides elements and will not affect layout responsiveness.

---

---

Conclusion

Hiding the "Add to Cart" button is a great way to turn your Squarespace store into a lookbook, catalog, or inquiry-based shop. Whether you’re preparing for a launch, offering items offline, or just need a cleaner design, this small customization can go a long way.