Why Would You Want to Remove the Add to Cart Button in Squarespace?
You can also choose to hide the Add to Cart button if you are building a catalog only site and you don't want to have (or aren't ready to launch) direct sales, or if you are using external affiliate system for your products and you want to force users to click through on the affiliate's website to purchase.
It’s a pretty typical model for service businesses, affiliate marketers, and high-touch brands. In the former, total checkout may not be the aim; discovery and contact are.
Common Reasons:
The product's price is not displayed, and consumers need to get a quote or make an appointment for repairs.
The shop is essentially a portfolio or lookbook
Save references to external e-commerce systems
The site is currently in preview or under development
You just want to disable checkout temporarily
Does Squarespace 7.1 Allow You to Disable the Add to Cart Button Natively?
Squarespace 7.1 doesn't have a default setting for turning off the "add to cart" button on product blocks.
There is no dedicated button next to the button to turn off the button or setting in the Squarespace UI to hide the button, globally or individually.
Native Options Are Limited:
You can’t turn off checkout per product
You can't conditionally delete buttons by device size
You need to employ Custom CSS or JavaScript to change the layout behavior
What Are the Limitations of Product Blocks in Squarespace 7.1?
Product blocks in Squarespace 7.1 are designed for default e-commerce behavior, with limited customization.
Technical Constraints:
You must use precise CSS selectors and sometimes JavaScript injection for more control.
How to Hide the Add to Cart Button Using Custom CSS
This method visually removes the button but doesn't alter behavior behind the scenes.
Where to Paste:
Go to Design → Custom CSS or
Settings → Advanced → Code Injection → Header
.sqs-add-to-cart-button,
.ProductItem-details .ProductItem-add-to-cart {
display: none! important;
}
What It Does:
Hides the Add to Cart button from both the product grid and individual product pages
Doesn’t affect the cart or checkout functionality
Can You Remove Add to Cart Only on Specific Pages or Templates?
Yes, you can target specific product pages, categories, or templates using CSS selectors or page-specific IDs.
Example: Remove Button on Specific Product Page
page-id-5f7e2c63e1c2a91a9d23abf7 sqs-add-to-cart-button {
display: none! Important;
}
Use Inspect Element in your browser to find the correct page ID.
How to Use JavaScript to Disable the Add to Cart Functionality
JavaScript can prevent interaction with Add to Cart elements even if they remain visible.
Where to Paste:
Settings → Advanced → Code Injection → Footer
<script>
document.addEventListener("DOMContentLoaded", function () {
const cartButtons = document.querySelectorAll(".sqs-add-to-cart-button");
cartButtons.forEach(btn => {
btn.style.pointerEvents = "none";
btn.style.opacity = "0.5";
btn.title = "This item is not available for direct purchase";
});
});
</script>
Effect:
The button appears disabled
Click/tap does nothing
A tooltip can guide users
Optional: How to Replace Add to Cart with a View More or Contact Link
You can swap the Add to Cart button with a custom CTA using JavaScript DOM manipulation.
Where to Paste:
Settings → Advanced → Code Injection → Footer
<script>
document.addEventListener("DOMContentLoaded", function () {
const buttons = document.querySelectorAll(".sqs-add-to-cart-button");
buttons.forEach(button => {
const link = document.createElement("a");
link.href = "/contact"; // change this URL
link.innerText = "Contact to Order";
link.className = "custom-contact-link";
button.replaceWith(link);
});
});
</script>
Optional CSS Styling:
.custom-contact-link {
background: #000;
color: #fff;
padding: 10px 16px;
text-decoration: none;
display: inline-block;
font-weight: bold;
}
How This Affects Inventory, Checkout, and Conversion Tracking
What Changes:
If you rely on Facebook Pixel, Google Tag Manager, or GA4 ecommerce tracking, disabling Add to Cart may disrupt reporting.
Best Use Cases for Hiding Add to Cart in Squarespace
Disabling the Add to Cart button is useful when purchase is not the goal.
Ideal Scenarios:
Consultation-based products (e.g., interior design, custom prints)
Service-first brands (e.g., coaching, agency offers)
Pre-launch campaigns (no live products yet)
External checkout sites (Shopify Buy Button, Amazon)
How to Restore the Add to Cart Button If Needed
Simply remove or comment out the CSS or JavaScript code.
Squarespace doesn’t delete the underlying structure—you’re only hiding or modifying behavior.
Rollback Steps:
Go to Design → Custom CSS
Delete or comment out lines that hide the sqs-add-to-cart-button
Remove any JavaScript from Code Injection
The buttons will reappear as per the default template design.
Is Removing Add to Cart a Good Idea for Your Product Strategy?
It depends on your conversion model.
If your product requires conversation, configuration, or has a long sales cycle, hiding Add to Cart creates space for storytelling or lead generation. If you’re selling low-consideration products, it may reduce friction to keep them visible.
FAQ: Common Questions About Disabling the Add to Cart Button in Squarespace 7.1
1. Can I remove the Add to Cart button without breaking my store?
Yes, using CSS or JavaScript only hides or disables interaction. Inventory, checkout, and product structures remain intact unless explicitly changed.
2. Will this affect my SEO or product visibility?
No, hiding the button doesn’t affect product indexing or metadata. Google still crawls and indexes product pages unless you add noindex tags.
3. Can I use this method to remove the button only on mobile?
Yes, use media queries in CSS to target mobile breakpoints. Example:
@media (max-width: 767px) {
.sqs-add-to-cart-button {
display: none !important;
}
}
4. How do I find my page or product ID in Squarespace?
Right-click the page > Inspect > Look for a parent div with an id like page-id-xxxxxxx.
Use this ID in your CSS to target specific pages.
5. Will disabling the Add to Cart button stop analytics tracking?
Yes, Click-based Add to Cart events won't fire. If you use Meta Pixel, GA4, or GTM ecommerce tracking, this customization may break tracking workflows.
6. Is it possible to use both CSS and JavaScript together?
Yes, CSS hides elements visually. JavaScript is disabled or replaces functionality. Combined use gives more control for complex layouts or conditions.
7. Can I test changes before publishing?
Yes, use a duplicate page, hidden test product, or browser developer tools to test styles and scripts without affecting the live site.
