How to Add a “Continue Shopping” Button to the Cart Page in Squarespace 7.1
In a high-converting eCommerce experience, the cart page isn’t just a transactional step — it’s a critical opportunity to lead customers back to your products and to sustain their overall engagement.
Well, unfortunately, Squarespace 7.1 doesn’t have a built-in “Continue Shopping” button on the cart page, but you can use the code in a summary block or code block instead – it will give the desired effect! This absence can lead to:
Users who are annoyed and trying to go back manually
Higher rates of cart abandonment
Decreased total conversion potential
The good news? With a few lines of code, you can add in beautiful, branded “continue shopping” button right into your Squarespace carts and enhance customer experience as well as increase sales.
Why Add a “Continue Shopping” Button?
Because a strategically placed “Continue Shopping” button is more than a UI upgrade — it’s a conversion tactic.
Benefits include:
Let your visitors get back to your product browsing without smashing the back button.
Promote more products and cross-sell
Reduces Abandonment by streamlining the process
Increases use across desktop and on mobile devices
Solution Overview
You’ll learn how to:
Inject a "Continue Shopping" button dynamically above the Checkout CTA
Style the button as you like!
It is recommended to include a static version as well, using a Code Block.
Method 1: Add a Dynamic Button via Footer Code Injection
This method uses JavaScript to detect the cart page and automatically insert a custom button before the checkout button.
Step 1: Add the JavaScript
Go to
Settings → Advanced → Code Injection → Footer
and paste the following:
<script>
document.addEventListener("DOMContentLoaded", function () {
if (document.body.id.includes("cart")) {
const checkExist = setInterval(() => {
const checkoutBtn = document.querySelector('[data-test="cart-button"]');
if (checkoutBtn) {
clearInterval(checkExist);
const continueBtn = document.createElement("a");
continueBtn.innerText = "← Continue Shopping";
continueBtn.href = "/shop"; // Update with your preferred destination
continueBtn.className = "continue-shopping-button";
checkoutBtn.parentNode.insertBefore(continueBtn, checkoutBtn);
}
}, 300);
}
});
</script>
Pro Tip: Change the href="/shop" to direct users to your homepage, a featured category, or your main product collection.
Step 2: Style the Button
Now go to
Pages → Custom code → Custom CSS
Paste this style:
CopyEdit
.cart-checkout {
flex-direction: row !important;
align-items: center !important;
justify-content: space-between;
}
.continue-shopping-button {
display: inline-block;
width: 100%;
padding: 16px 0;
text-align: center;
background-color: #000;
color: #fff !important;
border-radius: 50px;
font-size: 16px;
text-decoration: none;
margin-bottom: 15px;
transition: background-color 0.3s ease;
}
.continue-shopping-button:hover {
background-color: #333;
}
Method 2: Add a Static Button Using a Code Block (Optional)
If your cart page allows HTML code blocks (such as via a section or product summary block), you can insert this manually:
<a href="/shop" class="continue-shopping-button">← Continue Shopping</a>
Then, apply the same styling shown above in the Custom CSS panel.
Advanced Styling Options
| Feature | Code Snippet Example |
|---|---|
| Center-align the button | text-align: center; display: block; |
| Add icon for UX flair | Continue Shopping or use inline SVG |
| Match your brand color | Replace #000 and #333 with your brand's palette |
| Tailwind users | px-6 py-2 bg-primary text-white rounded |
Final Thoughts: Enhance Cart Flow, Reduce Drop-Off
A “Continue Shopping” button on the cart page seems small, but delivers big. And since you’re re-routing users to your product catalog at a key decision-making moment, you won’t only enhance navigation, you’ll be more likely to drive engagement, upsells, and all-around friction-free shopping.
Whether you decide on the .js dynamic inclusion or a simple HTML block, the product remains user-friendly and conversion-oriented. Combined with your custom styling, it strengthens your branding and offers a more streamlined checkout experience on all devices.
For ecommerce, micro-interactions make a world of difference in an increasingly competitive space like this. So, manage your cart’s experience and welcome your customers to continue shopping with peace of mind.
Frequently Asked Questions
-
No. Squarespace 7.1 does not include a native “Continue Shopping” button on the cart page. That’s why this tutorial provides a custom code solution using JavaScript and CSS.
-
The button is dynamically inserted above the Checkout button on the cart page. You can change its placement by adjusting the JavaScript if needed.
-
Yes. In JavaScript, update the href value:
continueBtn.href = "/shop";
You can change /shop to your homepage, a featured category, or any specific product collection.
-
This solution ensures the button only appears on the cart page. The script checks if the body ID includes "cart" before injecting the button.
-
Here are common fixes:
Confirm the selector [data-test="cart-button"] exists (inspect the cart page HTML if unsure).
Make sure the script is added in Settings → Advanced → Code Injection → Footer.
Wait a few seconds after page load; the script uses setInterval to wait for the Checkout button to render.
