Selling on Weebly with Ecwid

Weebly is an easy-to-use site builder. It lets you create and publish responsive-design sites or blogs, and add your Ecwid online store to it. Add the entire store, category pages, or Buy buttons to let customers place orders without leaving the website. The storefront will inherit website colors and fonts, so it will look like a seamless part of the website.

Weebly has two editors: drag 'n drop editor, and a new iframe-based Square one. In this article, you will find the instructions relevant for the first editor. If you use the Square editor, the only way to add your store is via iframe which we don’t recommend since some technical issues might occur. If you use the Square editor, you can add your Ecwid store via Instant Site on a subdomain.

Adding Ecwid catalog

You can add your Ecwid store to a Weebly website with the help of the app or the code. To add Weebly with the app, you have to be on one of the Weebly paid plan, as well as on any Ecwid paid plan. If you use the Weebly Free plan, you can add the Ecwid store with the embed code.

To add the Ecwid store to a Weebly website:

To use the app, you should have a paid Weebly account. If you use Weebly on the Free plan, add the store with a code.

Log in to your Weebly editor.
Open the Ecwid App at this link https://www.weebly.com/app-center/ecwid-online-store or go to Apps → and search for Ecwid.
Click Add button.
In the appeared pop-up, select a website where you want to add the store and click Connect.
In the other pop-up that will appear, double check that you have selected the right website and click Connect.
On the next page, log into your existing account or create a new account.
Open the page where you want to add the Ecwid store.
Drag and drop the Ecwid icon from the list of the installed apps in the left menu of the Weebly editor to the page.
Publish the changes.

First, get the code for your store: From your Ecwid admin, go to All sales channels → Website. Scroll down to the "Add your store to one more website" section and click Pick Platform → Other platforms and sitebuilders.
Click Copy Code to Clipboard button.
Now paste the code to your Weebly website: log into your Weebly editor.
Open the page where you want to add the store.
From the Build menu on the left, drag Embed code element and drop it on the page.
Click on the new field and click Edit Custom HTML.
Paste the store code that you got in step 3.
Save and publish the changes.

Your Ecwid store will appear on the page and customers will be able to place orders from there.

Adding search and shopping cart

You can help customers find products faster if you add a search box and a shopping bag to your website.

To add search and a shopping bag to your Weebly website:

Log in to your Weebly editor and open the page with the store.
In the menu on the left, in the "Installed apps" section, find Ecwid Product Search and Ecwid Shopping Cart blocks:
Choose the place where you want to add the search and the shopping cart and drag&drop the Ecwid blocks to the page.
Click on the inserted shopping cart block to set the shopping cart border, layout, icon and position:
Save and publish the changes.

Get the code for the element that you want to add to the website: From your Ecwid admin, go to Website. Scroll down to the "Add your store to one more website" section and click Pick Platform → Other platforms and sitebuilders.
In the “Store extensions” section, click Add button next to the element that you want to add to the website. The code will be copied to clipboard.
Log in to your Weebly editor and open the page with the store.
From the Build menu on the left, drag Embed code element and drop it on the page to the place where you want the element to display.
Click on the new field and click Edit Custom HTML.
Paste the code that you got in step 2.
Repeat the steps for each element to add the search, menu and shopping bag.

You can choose the appearance of the shopping bag icon that you add to the store with a code. For example, you can have just the icon or the icon with the number of items in it. See how to modify it in the article Customizing Shopping Bag icon style.

Setting default store category

You can create different product categories in your Ecwid store. For example, New arrivals, or Products on sale. You can show any category with products on your home page. To show the category on the main page, you need to set that category as the store default category that will show to customers when they open your store.

To add a category of products to a Weebly website:

Log in to your Weebly editor.
Open the page where you added the store or add the store following the instruction above if you haven't done so.
Click on the store block and specify the Default category ID:
Publish the changes.

Get the embed code for the category in the article Category displayed to first-time visitors.
Log in to your Weebly editor and open the page where you want to add the category.
From the Build menu on the left, drag Embed code element and drop it on the page to the place where you want to display the category.
Click on the new field and click Edit Custom HTML.
Paste the code from step 1.
Publish the changes.

Featuring one product on a page

Let’s say you have a separate page on your website devoted to a certain product in your store. And you want customers to buy that product without leaving the page. That is absolutely possible with the Ecwid Buy buttons feature.

To show a product on a page, paste the Buy button code to the page via the Weebly Embed code element. See the instructions on how to sell with Buy buttons.

Adding a specific category to a webpage

Was this article helpful?

Awesome! Thanks for your feedback!

Thanks for your feedback!

Sorry about that! What went wrong?

These instructions didn’t work
I found this article confusing or unclear
I didn’t find the answer to my question
I don’t like how the feature works
Other

23 out of 31 found this helpful