Ecwid for Weebly

Last updated

You can easily add your Ecwid online store to a Weebly website. Add the entire store, category pages or “Buy now” 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.

In this article:

Adding Ecwid catalog to Weebly website

You can add your Ecwid store to a Weebly website with the help of the app or the code. In any case, the store will work fine. The only difference is that the app is available on Weebly paid plans. Your Ecwid account can be on any plan. If you use the Weebly Free plan, add the Ecwid store with the embed code.

To add the Ecwid store to a Weebly website:

With an app

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

With a code

  1. First, get the code for your store: go to the Ecwid control panel → All sales channels → Custom website.
  2. Click Copy Code to Clipboard button.
  3. Now paste the code to your Weebly website: log into your Weebly editor.
  4. Open the page where you want to add the store.
  5. From the Build menu on the left, drag Embed code element and drop it on the page.
  6. Click on the new field and click Edit Custom HTML.
  7. Paste the store code that you got in step 3.
  8. Save and publish the changes.

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

Adding search, shopping bag, and menu with categories to Weebly website

When your store products are on the website, customers can already place orders there. You can help customers browse the store and find products faster if you add other store elements like a search box, shopping bag icon, and categories menu to the website.

To add search, shopping bag and menu with categories to a Weebly website:

With an app

  1. Log in to your Weebly editor and open the page with the store.
  2. Find the block with the Ecwid store and click Edit store appearance.
  3. Tick the elements that you want to show on the page.
  4. Click Save.
  5. Publish the changes.

With a code

  1. Get the code for the element that you want to add to the website: go to Ecwid control panel → All sales channels → Custom website.
  2. 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.
  3. Log in to your Weebly editor and open the page with the store.
  4. 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.
  5. Click on the new field and click Edit Custom HTML.
  6. Paste the code that you got in step 2.
  7. 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.

Showing products from one category on Weebly

If you get new products in the store that you want to show to all the customers or there are some products on sale that you want to feature on the Home page, you can do it with Ecwid. You will need to add that category of products using the embed code where you will specify the category to display.

To add a category of products to a Weebly website:

  1. Get the embed code for the category in the article Category displayed to first-time visitors.
  2. Log in to your Weebly editor and open the page where you want to add the category.
  3. 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.
  4. Click on the new field and click Edit Custom HTML.
  5. Paste the code from step 1.
  6. Publish the changes.

Featuring one product on a page on Weebly

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 so that they could buy it just while they are reading the article. That is absolutely possible with the Ecwid “Buy now” button feature.

To show a product on a page, paste the “Buy now” code to the page via the Weebly Embed code element. See the instructions on how to use "Buy Now" button tab.

Related articles

Store design and layout (video)
Category displayed to first-time visitors
Ecwid for custom website

Back to top
Has the article answered your question?

Awesome! Thanks for your feedback!

Please send us that question. We will be happy to help by email.

Send a message