Adding Ecwid online store to Squarespace

If you have a Squarespace-based website and want to add an online store to it, you can achieve it with Ecwid in a quick and easy way. 

Sign up for an Ecwid account (you can start with the Free plan) to get online admin panel, set up your store there and then add the Ecwid store integration code to a page on your Squarespace website. As a result, your Ecwid store catalog will appear on your site and buyers will be able to add products to the shopping cart and checkout there.

To add Ecwid store to a Squarespace site:

  1. Log into your Ecwid account.
  2. In Ecwid admin, go to All Sales Channels → Overview.
  3. Scroll down and click on Squarespace.
  4. Press the first button Copy Code to Clipboard — you’ve copied the first part of your store integration code that you will need to add to a Squarespace page:

the first HTML code

  1. Log in to your Squarespace account.
  2. In the Home Menu, click Pages and select the page (or add a new page) where you want your store to appear:

Squarespace Pages

  1. Hover over the page area and click Edit:

Edit Page

  1. Click the + button in the top right corner to add a new content block:

Add block to the page

  1. Select the Embed block:

Embed code

  1. Click the </> icon to manually add the code:

Embed code manually

  1. Paste the code copied on step 4 in the Embed Data window in Squarespace, click Set, then Apply, then Save:

Embed Data window

If you want to add store extensions like Category Navigation menu, Additional Shopping Bag and Product Search box besides the store to your site page, you can copy extensions’ codes in Ecwid admin and add them in this block, too (or add them in separate Embed blocks). They will appear on the page in the same order as their codes are added.
You may want to add a certain category or a product page instead of the entire store to your web page. In this case, use one of the codes below as the first part of the Ecwid integration code:
<div id='my-store-1003' data-default-category-id='2222'></div>
<div id='my-store-1003' data-default-product-id='1111'></div>
Remember to replace 1003 with your store ID, 2222 and 1111 with the respective category or product ID.
  1. Now let’s add the second part of store integration code. In Ecwid admin, go to All Sales Channels → Overview → Squarespace again and press the second button Copy Code to Clipboard to get a script code that you will need to add to your site footer:

the second script code

  1. Return to your Squarespace account. In the Home Menu, navigate to SettingsAdvancedCode InjectionFooter and paste the code that you’ve copied on step 10:

Code injection in footer

If you’re adding the store along with store extensions like Category Navigation menu, Additional Shopping Bag and Product Search box, the script code will be slightly different. In this case go to this page, specify there your store ID, then select what extensions you want to add to your site along with the Ecwid store, copy the generated script code (it starts with <script>) and add it to your site footer.
  1. Click Save in the top left corner.

Good job! Now you can see your Ecwid online store in the site preview:

Ecwid store on Squarespace site

Was this article helpful?

Awesome! Thanks for your feedback!

Sorry about that! We are here to assist you by email or chat.

Contact support