How to Add a “Continue Shopping” Button to the Cart Page in Squarespace 7.1

Jun 25

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 (FAQ)

1. Does Squarespace 7.1 have a built-in “Continue Shopping” button?

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.

2. Where will the “Continue Shopping” button appear?

The button is dynamically inserted above the Checkout button on the cart page. You can change its placement by adjusting the JavaScript if needed.

3. Can I choose where the “Continue Shopping” button links to?

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.

4. Will this button show on all pages or only on the cart page?

This solution ensures the button only appears on the cart page. The script checks if the body ID includes "cart" before injecting the button.

5. What if the button doesn't appear after adding the code?

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.