Adding a Shopify Buy Button to a Squarespace site – instructions and an example

While Squarespace does offer ecommerce capabilities, their ecommerce solution might not be the ideal choice for some users. And especially for those users, it might be a good idea to try the simple Shopify Buy Buttons on their Squarespace site. The benefits of Shopify Buy Buttons include, for example, that they are extremely easy to use and that using them can be very inexpensive.

In case you are not familiar with Shopify, it is the leading and, many would say, the best ecommerce platform.

From this page, you can find step-by-step instructions for using Shopify Buy Buttons with Squarespace. Additionally, this page also includes an example of what a Shopify buy button embedded on a Squarespace site might look like.

Instructions for using Shopify Buy Buttons on a Squarespace site

Step 1: Open a Shopify account

You can do this easily on their website, the registration process should not take more than a couple of minutes. Open a Shopify account (opens in a new window).

Step 2: Choose Shopify Lite as your Shopify subscription

Shopify Lite is the cheapest Shopify subscription and it allows you to add buy buttons to your Squarespace website. When paid on a monthly basis the cost of the Lite-plan is $9 + possibly applicable taxes per month, and you get a discount if you are willing to pay for at least a year in advance. At the time of writing this an annual subscription to the Lite-plan is priced at $96. If you are new to Shopify, you will at first get a 14-day free trial when you pick your subscription.

Step 3: Add products to your Shopify account

This can mean in practice as little as giving a title and price to a product, meaning that you can do this in as little as 10 seconds. When you are happy with your product make sure you mark the “product status” as “active” and additionally either choose that the product’s quantity won’t be tracked (if you are, for example, selling digital downloads) or add a quantity.

Step 4: From the admin panel choose “Buy Button”

This opens a page from where you can start creating a buy button.

Step 5: Pick which type of a Buy Button you want to create

If you are looking to create a buy button for just one product choose “product buy button” and if you want to showcase multiple products, choose “collection buy button”.

Step 6: Choose the product for which you want to create a buy button

If you have added multiple products or collections to your Shopify account you can now choose for which product or collection you are creating the buy button for.

Step 7: Choose the design of the buy button

You can easily choose the colors, font, text and so on for your buy button. You don’t have to know anything about coding or anything like that to do those things.

Step 8: Copy the buy button code

Once you are happy with your design choices, click to move to the next page. On that page, you will be shown the code needed to add the buy button to your Squarespace website. Click to copy the buy button code or just copy it in some other way.

Step 9: Go to your Squarespace admin panel and pick the page (or create a completely new one) to which you want to add the buy button to

You can add buy buttons to both existing and new pages.

Step 10: Click to edit the page and then click the plus sign to add a code block to your page

You can find the code block from under “more” or you can just search for it from the content blocks navigation.

Step 11: Paste / insert the buy button code

Before adding the buy button code, clear out all the existing stuff from the code block. Now add the code in to the code block. Click “apply”. Congrats, you now have a buy button on your site! Squarespace doesn’t display the buy button in your admin panel, but you can see it by going to your website while not logged in to your Squarespace account.

Example of a simple design around a buy button on a Squarespace site

This example simply includes adding a headline, image and standard text with Squarespace on top of the buy button. You can obviously do more advanced designs around your buy button(s). The green frame in the example is just for illustrative purposes, and not something that will be added to your site when using a buy button. Go to Shopify and start creating buy buttons.

Note: If you are looking to use the buy buttons to sell products from Oberlo on Squarespace, you can find some additional information from this page.