How to Connect Shopify to Squarespace
Updated June 2024
I usually advocate for just picking one website platform and sticking with it. This isn't just to make life simpler, it's also because stringing a bunch of systems together often means you have more opportunities for those systems to fail. It can also be wishful thinking to think that doubling up on website platforms (in this case, Squarespace + Shopify) will allow you to have your cake and eat it too. In reality, both platforms have their pros and cons and while my expert opinion is that Squarespace is the best choice for small business eCommerce websites, there may be some specific use cases where it pays to connect the two via the Shopify Buy Button.
Example Use Cases:
Adding another subscription to the mix needs to make sense and there have to be compelling reasons to do it. At face value, it would seem that the Shopify Buy Button is kinda pointless; Squarespace offers eCommerce and Shopify allows you to build a website. But there are exceptions. If you really want to stick with your Squarespace website but are dealing with any of the following issues, the Shopify Buy Button may be a good solution for you:
You use a specific accounting system or POS that only connects to Shopify
You use a third-party logistics company that only offers a Shopify integration
You have multiple locations you need to either ship or sell in person from
As you can see, the reasons to connect Shopify & Squarespace usually have to do with some sort of limitation of a third-party platform and have nothing to do with any perceived limitations to Squarespace’s commerce abilities. It’s also worth noting that Squarespace has accounting, POS, and 3PL options as well so before trying to force a Squarespace/Shopify integration you may also want to just consider other third-party software that plays nice with your website platform of choice instead of the other way around.
Ok. Now that I’ve sufficiently tried to talk you out of this, here’s how to do it! 😂
About the Shopify Buy Button
The trick to connecting a Shopify shop to a Squarespace website is the Shopify Buy Button. It allows you to basically embed your Shopify shop on any Squarespace page using a small bit of code. You have the option to embed just one product or show entire collections.
The Cost
In order to score Shopify Buy Button capabilities, you’ll need to spring for the Shopify Starter plan which is $5/month. (Side note: since you won’t be needing all the commerce features on the Squarespace side of things you can probably get by with the Business plan there.)
Limitations
Important things to note if you’re considering this duo as an option:
You cannot use any apps from the Shopify app store in conjunction with the Buy Button so if one of the reasons why you were eyeing Shopify was to expand your Squarespace commerce capabilities via a third-party app or extension then this will not work for you.
Although you can provide checkout links via social media with the Buy Button and also add Facebook Messenger as a sales channel, this isn’t the same as having a fully shoppable social media or Instagram like is offered on a full Shopify plan.
How to Get Started
Adding the Buy Button Sales Channel and Creating a Buy Button in the Shopify Admin
If you’d like to give the Squarespace + Shopify combo a try and have your site ready to go on Squarespace, here’s an overview of all the steps at a high level:
Start on Shopify by signing up for a free trial here. You’ll then need to subscribe to the Shopify Starter plan as directed (don’t worry you won’t be charged until after your free trial ends).
Add your products to Shopify (Products > Add Product)
Enable the Buy Button sales channel and then follow the steps to create and style your Buy Button code
Copy the Buy Button embed code provided on Shopify anywhere on Squarespace using a Code Block!
2 Ways to Embed Your Shopify Code Into Squarespace
There are two ways to go about embedding things from Shopify and which one you choose will determine how you treat inventory on your Squarespace site:
Embed entire collections (Collection Buy Button) - You can embed entire collections onto Squarespace in one fell swoop. This tends to work best if you have a large shop because it automatically includes all products and all variants of those products.
Embed individual products (Product Buy Button) - Alternatively, you can generate embed codes for individual Shopify products one at a time. With a Product Buy Button, you are given the option of including all product variants or selecting just the product variant(s) you want to include.
Styling Shopify Buy Buttons to Match Your Squarespace site
Before generating your Shopify embed code, you are given options to customize how it will look and how it behaves on Squarespace. You can control:
Button Color
Button Size
Button Font
What happens when the button is clicked & whether it opens in a new browser window or not.
It’s important to customize the button to match the style and look of your Squarespace as closely as possible to create a seamless experience for your customers. You can preview and test how your Buy Button will look by clicking preview. Note that once your code is embedded, you cannot make changes to how it looks or acts so if you make changes you’ll need to start over to create a new button and then replace the old embed code on Squarespace with the new one.
Layout Options
There are three layout options you can select from for your Buy Button. The difference between them basically boils down to how much information is included with the embed:
Basic Layout - the embed code will just create a button for the product you choose. There won’t be an image included. This is useful if you have product images on Squarespace and then just want to put “Add to Cart” buttons below each of them to make them shoppable.
Classic Layout - this will generate an embed code that includes a product image and price next to a Buy Button. Since this doesn’t include any product details, it would probably only be useful for embedding on pages where you want to offer a quick overview of a product instead of a more complete shop page. (Just like Squarespace’s Product Block.)
Full View Layout - this will create a layout that most closely emulates a full product details page. It includes the product image, price, and description in addition to the Add to Cart button.
Bottom Line
For most sellers, there’s no need to try to connect Shopify and Squarespace. You should be looking instead at choosing which platform is best for you and going all-in on it. But for some specific use cases, the Shopify Buy Button is a great way to have a great-looking Squarespace website powered by a Shopify back end for commerce.
