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, follow the instruction below that consists of two parts — adding HTML code to Squarespace page and adding the script code to Squarespace footer.

You can add a code to a Squarespace site footer if you are on Squarespace Business or Commerce plan.

Step 1. Add the Ecwid integration code to Squarespace

  1. Log into your Ecwid account.
  2. From your Ecwid admin, go to Website.
  3. Scroll down to the "Add your store to one more website" section. Click Pick Platform and choose Squarespace.
  4. Click 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:

Adding_Ecwid_online_store_to_Squarespace__21_.gif

  1. Log in to your Squarespace account and follow the steps for your editor version:
  • In the Home menu, click Pages and select the page (or add a new page) where you want your store to appear:

Adding_Ecwid_online_store_to_Squarespace__18_.png

  • Hover over the page area and click Edit:

Adding_Ecwid_online_store_to_Squarespace__17_.png

  • Click Add Section in the middle to add a new content block to this page:

Adding_Ecwid_online_store_to_Squarespace__16_.png

  • Select the Add Blank + option on the left side:

Adding_Ecwid_online_store_to_Squarespace__15_.png

  • You will see a block added to the middle of your page. Hover your mouse over the block’s center. Click on the + sign to see the block content options and click on </> Code. Here is a screencast illustrating this step:

Adding_Ecwid_online_store_to_Squarespace__19_.gif

  • In the pop-up that you will see, instead of the sample code add your Ecwid store code that you’ve copied on step 4, then click Apply, then Done → Save:

Adding_Ecwid_online_store_to_Squarespace__20_.gif

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.

Step 2. Add the Ecwid script to Squarespace

Now let’s add the second part of store integration code:

  1. From your Ecwid admin, go to Overview → Squarespace again and click the second Copy Code to Clipboard button to get a script code that you will need to add to your site footer:

Adding_Ecwid_online_store_to_Squarespace__22_.gif

  1. Return to your Squarespace account.
  2. In the Home menu, navigate to Settings → Advanced → Code Injection.
  3. In the Footer section paste the script code that you’ve copied on step 1:

Adding_Ecwid_online_store_to_Squarespace__13_.png

  1. Click Save in the top left corner.

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

Adding_Ecwid_online_store_to_Squarespace__14_.png

Example for Squarespace 7.1

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

Related articles

Marketing checklist
Levels of changing store design
Got an order? Next steps

Was this article helpful?

Awesome! Thanks for your feedback!

Thanks for your feedback!

Sorry about that! What went wrong?
51 out of 93 found this helpful
We use cookies and similar technologies to remember your preferences, measure effectiveness of our campaigns, and analyze depersonalized data to improve performance of our site. By choosing «Accept», you consent to the use of cookies.
Accept cookies Decline