How to add a purchase button to your Squarespace website

Squarespace also offers us the options to sell through our website. We can sell physical products, digital products or services through Squarespace.

In this blog post I want to show you how you can sell a service through your Squarespace website and just have a button on your sales page that says ADD TO CART or BUY NOW or anything else you want.

I have done this on my Squarespace Start Up Sales page and you can have a look here to see what I mean and what it can look like.

How to add an add to cart button on your Squarespace website | Emilia Ohrtmann

The first thing you need to do is add a product page to your website so that you can register the service you want to sell through your website.

Adding a product or service to your Squarespace website

In order to add “add a product page” and the service you need to take the following steps:

  • Click on the plus sign and add a product page

  • Name your page

  • Then you need to add your products

  • You can decide between a physical product, a digital product or a service

  • In our case we click on services

  • You now have the option of adding an image and a description, a price and a title as well as tags and categories

  • You definitely need to add a name for the service and a price and I have also added an image for this blog post for your to see

  • When you click on pricing another tab opens up where we can add different options for this product/service and we can add different prices, a different SKU number and stock amount for each product/service

  • This is usually good when you have a product with different sizes, but in our example we can also add two different types of service, for example with two different lengths of how long the service will be provided

  • In the case of a service (and most likely for a digital product) you might want to use the option unlimited stock

  • There are a few other things we can do but for this specific example we need to click on options and click on USE A CUSTOM ADD BUTTON LABEL

  • You can now customize the button you want to show and say ADD TO CART or BUY NOW or PURCHASE or anything else you want to say

  • Click save and publish

You can see the steps I took on these images:

 
How to have an add to cart button on your Squarespace website | Emilia Ohrtmann
 
How to have an add to cart button on your Squarespace website | MNFL Design
 
4 How to have an add to cart button on your Squarespace website |MNFL Design
 
How to have an add to cart button on your Squarespace website | MNFL Design
 
How to have an add to cart button on your Squarespace website | MNFL Design
 
adding a product to sell in Squarespace | Emilia Ohrtmann
 
How to have an add to cart button on your Squarespace website | MNFL Design
 
How to have an add to cart button on your Squarespace website |MNFL Design

Now your service has been added to your Squarespace website and all you need to do is add the buy now button to your sales page as well as connect a payment gateway system to your account.

Add a BUY NOW button to your website

Now you can go to the page where you want to add your ADD TO CART or PURCHASE (or whatever you want to call it) button.

  • Go to the page and place you want to add the button

  • Click on edit

  • Add a product block where you want to add the button - it can be found under commerce

  • Search for the product you just added (the name)

  • Now you can determine what you want to show, the image, the title, the price, the description and the Add to Cart button

  • And you can determine the alignment of those features

  • In this example I only want to show the add to cart button so I deselected all the other options

  • Click apply and save and your button is there!

How to have an add to cart button on your Squarespace website | MNFL Design
How to have an add to cart button on your Squarespace website | Emilia Ohrtmann
How to add a purchase button Squarespace website | Emilia Ohrtmann

In order to test if the button is working you need to open up your site and click on the button. An order page will appear. And you could do a test purchase by using a 100% discount test code that you need to have created earlier.

Testing your purchase button in Squarespace | Emilia Ohrtmann

 

Note: You can watch a more detailed video tutorial here that also shows how to add different price options and some CSS options on how to not show the quantity option.

This is the CSS code to remove the quantity option your add to cart section.

/*remove quantity display on add to cart button*/

.product-quantity-input {
display:none !important;
}

Let me know in the comments if you have anything to add or questions!

Thank you!!


Join the community

Newsletter blog post optin in image emilia

This is me writing blog posts every week

If you enjoyed what you read just now and would like to get more tips and tricks about branding, website design, business and Squarespace straight to your inbox - sign up for my weekly Newsletter and I promise you will find help and support!

Nobody needs to be alone when starting and running a small business!

I won't send you spam and you can unsubscribe at any time. Powered by ConvertKit

These posts might also interest you: