Add a Shopping Cart to Your Squarespace E-Commerce Site

In the last few months, a lot of questions regarding Snipcart + Squarespace landed in our collective inbox. People wanted to know if Snipcart could be used to add a shopping cart to their Squarespace site. While Squarespace isn't the most "open" CMS, you can indeed use Snipcart to turn a basic site into an online store

Today I'm going to show you how to integrate our shopping cart platform to Squarespace, and how to add Snipcart buy buttons to your site.

It's a straightforward process, and the following 5 simple steps will take us through it.

1. Create your Snipcart account

You'll need a Snipcart account to get started. Sign up free and complete the simple activation steps.

2. Create your Squarespace website

Note: for this post, I'm assuming you're already familiar with how Squarespace works. If you're not, check out their Getting Started guide.

If you don't already have a Squarespace site, you can get started here. I picked the Avenue template to start my demo site.

For the purpose of this article, I wiped every demo content and created a new, blank page.

Then, I added two centered product images, an X-Wing and a Lightsaber. Because Star Wars is freaking awesome.

3. Inject Snipcart into your Squarespace site

Go to your Snipcart merchant dashboard and hit the user icon on the top right corner.

Next, under Account, select API Keys. Copy the snippet of code you find there.

Note: As you can see in the screenshot above, I'm currently in Test mode. Since the API key included in the snippet is the Test one, I won't be able to make real transactions on my website. To go Live with Snipcart, check out this documentation section.

Let's go to Squarespace now for the next step. Head to the Home menu, then: Settings > Website > Advanced > Code injection.

Paste the Snipcart snippet of code in the Header section, then hit the Save button that will pop up in the top left corner.

Snipcart is now injected into your Squarespace site. This means you can turn almost any element (such as links, buttons, and images) into a buyable product.

4. Add buy buttons with the Code Block

With Squarespace, the easiest way to add Snipcart products is by using the Code Block function.

Go to your Design tab, and start editing a page of your website.

Add a Code Block where you'd like your buy button to show. With Snipcart, you create a product using simple HTML definition.

Here's an example of the code I put in my Code Block for the demo site:

<button class="snipcart-button snipcart-add-item"
    data-item-id="1" 
    data-item-name="Classic X-Wing" 
    data-item-price="1000000.00" 
    data-item-weight="12000" 
    data-item-url="/" 
    data-item-description="Explore & defend." 
    data-item-image="https://i.imgur.com/mMQWAvF.jpg"> 
    Buy now

</button>

With the code above, we're defining a product on a button in order to sell a Classic X-Wing for 1000000$.

A few notes here:

• To style my button within Squarespace, I created a snipcart-button class that will call a custom CSS rule (see step 5).

• It's also important that you keep the snipcart-add-item in the class attribute.

• Make sure the data-item-url attribute displays the same page as the one you're selling the product on.

Here's the button & shopping cart in action on my Squarespace demo site:

5. Style your buttons with a pre-made custom CSS rule

The last step will be to style your buy buttons so they fit the overall design of your e-commerce website.

To do so, go to your Home menu, then: Design > Custom CSS. Here's the custom CSS rule(s) I added for the demo:

.button-wrapper {
  text-align: center;
}

.snipcart-button {
    display: inline-block;
    margin: 0;
    padding: 0.75rem 1rem;
    border: 0;
    border-radius: 0.317rem;
    background-color: #0f0;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.5;
    font-family: "Helvetica Neue", Arial, sans-serif;
    cursor: pointer;
    -webkit-appearance: none;
    -webkit-font-smoothing: antialiased;
}

.snipcart-button:hover {
    opacity: 0.85;
}

.snipcart-button:active {
    box-shadow: inset 0 3px 4px hsla(0, 0%, 0%, 0.2);
}

.button:focus {
    outline: thin dotted #444;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

The first .button-wrapper rule is simply to center my buttons in the Code Block sections. The rest is a pre-made CSS rule I found online to style my buttons. I used this website to generate a pre-made rule to style my buttons. You can also Google around a bit with keywords like CSS buttons and find some cool stuff!

I came up with the demo site below in about two hours tops. Looks neat, right?

Conclusion

Adding a shopping cart to a Squarespace e-commerce site using Snipcart was easy and efficient. Instead of buy buttons, you could also easily embed products into simple text links, as we show in this post on selling through blog content. Squarespace makes for great-looking websites, so we'd love to see more Snipcart projects on top of the popular site builder!

While playing around with design layouts isn't super flexible, there's a whole lot you can achieve with custom CSS in Squarespace. This e-commerce website, for instance, is built with Squarespace and Snipcart. You can learn how to customize your Snipcart shopping cart if you want to offer a unique shopping experience.

If you enjoyed this post and found it valuable in any way, go ahead and send a tweet our way. I'd really appreciate that! Got any questions regarding Squarespace & Snipcart? Feel free to hit the comments. :)