web design by Mary Shaffer

Free Squarespace Hacks

my secret(-ish) library
of squarespace hacks

One of the greatest joys of my job is coming up with new Squarespace hacks to get the results my clients want when Squarespace doesn’t offer them as part of their built-in editing interface. I’ve pieced together many of these solutions from other code snippets I’ve found online, so I wanted to return the favor and offer you some of my favorite CSS and Javascript solutions. Enjoy!

Love, Inscape


Checkout Button Appears after Clicking Add to Cart

Screen Shot 2019-06-11 at 4.14.59 PM.png

Several of my clients convinced me that people were too dumb to realize that after they clicked “Add to Cart,” they had not actually purchased the product until they had checked out. My clients convinced me that a Checkout button should appear below the “Add to Cart” button after it was clicked. Thus I created what I call my “Magic Checkout Button,” which I now offer to all my clients who use Squarespace commerce. This works both on product pages and in product blocks.

It’s not that we’re assuming all online shoppers are dumb. We’re just making it easier for the ones who are.

Here’s how to add my Magic Checkout Button:

Screen Shot 2019-06-11 at 4.04.52 PM.png

Step 1: In your Squarespace admin panel, click on Settings—>Advanced—>Code Injection. Paste the following code into the Header Injection area:

    $("<a class='checkoutbutton' href='/commerce/show-cart'>CHECKOUT</a>").insertAfter(".sqs-add-to-cart-button");

Step 2: You will then need to style the button so that it matches the “Add to Cart” button. Because we’ve given our magic checkout button the class ‘checkoutbutton,’ we can now style it by going to Design—>Custom CSS. Paste the following into the CSS area, and adjust the styles until it matches your Add to Cart button:

/*checkout button that appears below add to cart when you click on it*/ 
.checkoutbutton {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 500;
  font-style: normal;
  line-height: normal;
  text-align: center;
  width: auto;
  height: auto;
  text-decoration: none;
  padding: 9px 20px;
  background-color: white;
  border-radius: 3px;
  transition: .1s opacity linear;
  cursor: pointer;
  border-color: #19435D;
.checkoutbutton:hover {color: #fff; background-color: #19435D;}