How To Integrate Shopify and Squarespace for E-Commerce
Squarespace is a user-friendly, drag-and-drop website builder, and while it includes online store functionality, it’s best for small businesses with a low number of products. If you plan to add a lot of products or need more advanced features for selling or checkouts, you might consider combining Squarespace with Shopify to combine the benefits of both into one website.
In this step-by-step guide, we’ll share how to connect Shopify to Squarespace using the Shopify Buy Button.
Affiliate disclosure: Some of the links in this article are affiliate links, marked with an asterisk (*). Studio Founded may receive a commission from qualifying purchases made through these links, at no additional cost to you. You can read our full affiliate disclosure here.
Why Should You Combine Shopify and Squarespace?
Shopify* is the leading e-commerce platform. It powers 31.6% of e-commerce sites and includes advanced e-commerce tools like:
Advanced inventory management
More shipping and fulfilment options
International storefronts and multi-currencies
Bundles and preorders
Wholesale and B2B
However, its templates aren’t fully flexible, as Shopify doesn’t have a drag-and-drop builder like Squarespace*. The templates can be difficult to customize without experience with Liquid, Shopify’s coding language.
Combining the two gives you the best of both, using Squarespace to manage the front-facing website (the pages, design, and content), and adding the Shopify Buy Button to sell your products through Shopify’s checkout system.
How Does the Integration Work?
You’ll build your website, store, and product pages in Squarespace.
In Shopify, you’ll handle your product catalogue and checkouts. For each product, you can then generate the Buy Button embed code, and paste it into a code block in Squarespace, anywhere you’d like the Buy Button to appear.
Let’s walk through the process:
I. Sign Up for Shopify
Start by visiting Shopify and signing up* for a paid plan. You can trial up to three days for free.
II. Add Your Products to Shopify
In the Products tab in the left-hand panel, add each of your products. Remember to include:
Product titles
Product descriptions
Images
Pricing
Shipping options
Stock levels
III. Add the Buy Button Sales Channel
In Shopify, go to Settings > Sales Channels and select the Shopify App Store.
Search for the Buy Button and install it, if it isn’t already installed.
IV. Set Up Your Button
In Sales Channels, go to Buy Button and choose Product Button > select the product you want to create a button for.
V. Customize Your Button
Customize your button styles, including:
Choose a thumbnail
Choose the action when people click (add product to cart or go straight to checkout)
Customize your button colors and styles
Customize your button font and text size
VI. Generate Your Shopify Buy Button
From your Shopify dashboard, go to Products > Select the product you want to generate a button for > select More Actions > Embed on a website.
It will generate a code snippet. Select Copy Code to copy it to your clipboard.
VII. Embed the Buy Button in Squarespace
Open the Squarespace page where you want products to appear.
Add a Code Block by entering Edit Mode, hovering on the page until you see the Add Block button. Select it, then choose Code Block from the block menu. Paste in the Shopify HTML snippet, and save your changes.
You won’t see your button right away, as it doesn’t appear in Edit Mode. View your page in Live Mode, to see your button:
VIII. Test Your Checkout Process
Remember to test your buy button and checkout process. Browse your site, use each of your Buy Buttons in turn, and go through a test checkout to make sure it’s all working.
FAQs
Do I need to pay extra for the Shopify Buy Button?
No, the Buy Button is included with your Shopify plan.
How are payments processed through the Buy Button?
Payments will be processed through the payment gateways you connect to your Shopify store.
Can I put the Shopify Buy Button in the Squarespace product details area?
Yes, but you’ll need some JavaScript code to append the Buy Button to the product details area. This code depends on your layouts so there isn’t a one-size-fits-all solution, but you can get in touch if you’d like support with your code.
How do I hide the Squarespace add to cart button?
To hide the built-in Squarespace add to cart button, you can copy the code snippet below and paste it into your custom CSS panel via Pages > Custom Code > Custom CSS:
/* Hide Squarespace 7.1 Add to Cart button */
.ProductItem-details .sqs-add-to-cart-button-wrapper {
display: none !important;
}
How do I hide the Squarespace quantity selector?
The Buy Button includes a quantity selector. You can hide the Squarespace quantity selector by copying the code snippet below and pasting it into your custom CSS panel via Pages > Custom CSS:
/* Hide Squarespace 7.1 Quantity Selector */
.ProductItem-details .product-quantity-input {
display: none !important;
}
Why can’t I create a Buy Button for my product?
When creating a product, make sure that under Publishing your product is published to the Buy Channel sales channel.
Why isn’t my Buy Button working?
If it isn’t appearing, make sure you’re viewing the button in Squarespace’s Live Mode, as it won’t appear while you’re in Edit Mode.
If the button is showing but you’re experiencing a problem, visit Shopify’s Buy Button troubleshooting guide.
Luchia: Squarespace Template for E-Commerce Stores
If you’re looking for a template, our Luchia Template is designed for online stores. It comes with 15 pages, including a Shop, styled product pages, and a Sales page, which can be combined with the Shopify Buy Button. You’ll also get a collection of tutorials, an extended 12-month Squarespace trial, and 25% off your first year with any annual Squarespace subscription.
Continue Reading
Shop the Template Library
