Selling on Squarespace with Ecwid

Squarespace is a popular website builder with pre-built templates and drag-and-drop elements to help you create and modify web pages. You can add an Ecwid online store to your Squarespace site to start selling online.

Essentially, Ecwid and Squarespace are two different things. Ecwid is an e-commerce solution that you can use to create your online store from scratch. Once signed up for an Ecwid account, you can embed your online store to your Squarespace website, so your customers will be able to add products to the shopping cart and checkout there. Later you can extend your store to other sales channels like Facebook, Instagram, or Amazon.

Adding a store to Squarespace

To add Ecwid store to Squarespace:

1. From your Ecwid admin, go to Overview → Squarespace.
2. First, copy the integration code by clicking Copy Code to Clipboard:
   

   

3. In your Squarespace account, open the Home menu, click Pages and select the page where you want your store to appear, or add a new page:
   

   

4. Hover over the page area and click Edit:
   

   

5. Hover your mouse over the page and click Add Section to add a new content block to this page, then select the Add Blank + option on the left-hand side:
   

   

6. You will see a block added to the middle of your page. Hover your mouse over the block’s center. Click + Add block to see the block content options and click </> Code.
7. In the pop-up, delete the sample code and add your Ecwid store code that you’ve copied on step 2. It will be saved automatically. Make sure you select HTML in the right upper corner of the popup.
8. Resize the code block to make sure your store appears in the proper size.
9. (optional) You can add store extensions like Category Navigation menu, Additional Shopping Bag, and Product Search box to your store page. To do so, go to your Ecwid admin → Overview → Squarespace, scroll down to Store extensions, choose the extension you want to add, and copy the code to the Code block on Squarespace where you have previously added the Ecwid integration code. They will appear on the page in the same order as their codes are added. Make sure to resize the block so that your content fit the page.
   To add a certain category or a product instead of the entire store, use one of the codes below as the first part of the Ecwid integration code:
   <div id='my-store-0000' data-default-category-id='1111'></div>
   <div id='my-store-0000' data-default-product-id='2222'></div>
   Replace 0000 with your store ID. Replace 2222 and 1111 with the respective category or product ID.
10. Now you have to add the script code from Ecwid to Squarespace. From your Ecwid admin, go to Overview → Squarespace again and click the second Copy Code to Clipboard to get a script code that you will need to add to your site footer:
    

    

11. Return to your Squarespace account and In the Home menu, navigate to Settings → Developer Tools → Code Injection.
12. In the Footer section, paste the script code that you’ve copied on step 9.
13. Click Save in the top left corner.

Done! Now your Ecwid online store is embedded in your Squarespace site.

Adding two stores to Squarespace

If you run two stores that have separate inventories in two locations, or if you want to set up a second online store in order to separate wholesale products and orders from retail ones, you can add two Ecwid stores to one Squarespace site.

There is no option to add two stores on the same page of your Squarespace site. Still, you can add Ecwid stores on different pages of your website. That way, you will have two stores on one site.

To add two Ecwid stores to your Squarespace site:

1. In your Squarespace account, open the Home menu, click Pages and select the page where you want your first store to appear, or add a new page:
   

   

2. Hover over the page area and click Edit:
   

   

3. Click Add Section to add a new content block to this page, then select the Add Blank + option on the left-hand side:
   

   

4. You will see a block added to the middle of your page. Hover your mouse over the block’s center. Click + Add block to see the block content options and click </> Code.
5. From your Ecwid admin, go to Overview → Squarespace. Copy both the Ecwid integration code and Ecwid script code to the Code pop-up in your Squarespace site editor. It will be saved automatically. Make sure you select HTML in the right upper corner of the popup.
6. Resize the code block to make sure your store appears in the proper size.
7. (optional) You can add store extensions like Category Navigation menu, Additional Shopping Bag, and Product Search box to your store page. To do so, go to your Ecwid admin → Overview → Squarespace, scroll down to Store extensions, choose the extension you want to add, and copy the code to the Code block on Squarespace where you have previously added codes. They will appear on the page in the same order as their codes are added.
8. Save the changes.
9. Repeat the above steps for the second store.

Done! Now your Ecwid online store is embedded in your Squarespace site.

If the store page is not linked to the navigation, make sure to move it to your site menu and start accepting orders online.

Adding a single product to Squarespace

You can turn your regular page on a Squarespace site to a selling channel by adding a Buy Button. Ecwid Buy Button looks like a product card with the checkout option and can be added to any website page. A Buy Button is also a great tool if you don't need to add the whole catalog to your site and only want to feature one product.

To add a Buy Button to your Squarespace site:

1. From your Ecwid admin, go to Overview.
2. Scroll down to the Buy buttons card and click Get Started.
3. Click Pick Product and use the search bar to pick a product you’d like to embed.
4. Pick a layout and choose what product details to show.
5. Click Generate Code, then click Copy Code.
6. Open your Squarespace dashboard, then choose the site where you want your Buy Button to appear.
7. Click Pages, select the webpage for a Buy Button and click Edit.
8. Find the element on the page where you want your Buy Button to appear, move your cursor over the Page Content area, and then click + Add block.
9. In the popup menu, select Code.
10. In the text field, paste the code you copied from your Ecwid admin. Make sure that the text field is set to receive HTML. Resize the block if needed to make the button the proper size.
11. Click Done to save changes.

That’s it! Now you have a product card embedded into your webpage. When a customer clicks the Buy Now or Add to Bag button, the product will be added to cart, and they can finalize their order without leaving your site:

Related articles

Got an order? Next steps
Tagging products on Instagram
Selling on Facebook
Selling on Amazon