Video Tutorial: How to integrate Shopify Commerce with your Squarespace website
Are you looking for the content creation capabilities/creativity Squarespace has to offer, but your business requires the powerful e-commerce ability of Shopify — look no more! You don’t have to compromise!
Follow this video to learn how to integrate Shopify into your Squarespace website:
Quick links:
1, Get the Squarespace Collection/Block Identifier Chrome extension here
2. Code snippet to hide buy button from footer (replace bold text with your specific block ID):
#block-48cc159a9d65c759f4b3 {display: none;}How to integrate Shopify into your Squarespace site:
STEP 01
Go to Shopify.
Get started by signing up for a free trial here. Subscribe to the Shopify Lite plan.
STEP 02
Add your products to Shopify.
Add product title, description, price, images, etc. Make sure to add inventory to your products.
STEP 03
Create a Buy Button.
Choose product and update the button style to match your brand.
Copy the embedded code.
STEP 04
Add embedded Buy Button to Squarespace.
Go to your Squarespace site. In edit mode, open up the content block menu, add a code block and paste the embedded Buy Button code from Shopify.
Save & test in preview mode.
STEP 05
To add the cart tab to every page of your website, go to your Shopify window and create a Buy Button.
This button will be universal throughout the site, so carefully update the button style to match your brand.
Copy the embedded code and go to your Squarespace window.
STEP 06
In Squarespace’s edit mode, scroll to the bottom of the page to Edit the footer.
In the footer, add a Code block and paste the Buy Button embedded code.
STEP 07
Add the Squarespace Collection/Block Identifier Chrome extension to your browser.
STEP 08
In Squarespace, navigate to Design > Custom CSS
Copy and paste the following code snippet into Custom CSS:
#block-48cc159a9d65c759f4b3 {display: none;}Click on the Squarespace Collection/Block Identifier icon to enable the extension.
Click on the code block ID of the Buy Button you added to your footer. This will copy the block ID to your clipboard.
Paste your code block ID to replace (bolded above) outdated Block ID text with your specific block ID.
Once you’ve added your block ID to the code snippet, click Save and verify that the Buy Button has been hidden from your footer.
Verify that the cart tab is visible on all pages of your website.
