Ecwid widgets

Ecwid widget is a few lines of Javascript code that render the full-featured shopping cart directly in your website. You can quickly add online store via Ecwid widget to your site if you have access to your site's source code.

Ecwid has the main Product Browser widget and several additional widgets for useful store extensions - Navigation menu, Additional Shopping Bag and Product Search Box. Besides, you can generate codes for your product cards or for simple Buy Now buttons if you want to add them on certain site pages or inside your blog posts.

Product Browser

Product Browser (a.k.a. Ecwid widget, Ecwid integration code) is the main widget that adds a whole Ecwid store to a web page. The store includes catalog, shopping cart details, checkout process, search results, etc.

Store extensions

You can enrich your site with additional widgets:

Minicart / Additional Shopping Bag: displays items quantity in the shopping bag.
Navigation menu: displays product categories as a horizontal list with tabs.
Product Search Box: allows searching your products.


Single product: allows featuring one or a few products or adding simple Buy Now buttons on your web pages.

FAQ

When I click on the cart/search/menu extension, I see it in a popup. How to open it in the page instead of a popup?

It looks like you’ve added a store extension (navigation menu, shopping cart icon or search box) to your site page without adding the product browser to it. If there are only store extensions on a page and they are clicked - for example, a page visitor chooses a category from the navigation menu, clicks on a shopping cart icon or makes a search for a product on the page - Ecwid shows the results in a pop-up window.

In case you want to show only a store extension without your whole store on a site page and to open this extension as a regular page instead of a popup, you can use the ecwid_ProductBrowserURL parameter. After you set it up and a site visitor uses a menu/search/cart extension on a page that doesn’t include a product browser, the visitor will be redirected to the full size page where your whole store is located and then the necessary actions will be performed.

To open the store extension in a page instead of a popup, add the following line to the source code of your site page, it will tell Ecwid where to find the whole store:


<script>var ecwid_ProductBrowserURL = "PB_URL";</script>

where PB_URL should be replaced with the full URL of the page where you’ve added your store integration code.

For example, if your store is available at http://www.example.com/store.html page, the code will look as follows:


<script>var ecwid_ProductBrowserURL = "http://www.example.com/store.html";</script>

As a result, the store extension will see that URL and, instead of popping up, will open as a regular page.

 

When the cart is empty and I click the "Browse Store" button, it's not bringing me to my shop page. How to fix it?

It appears that you’ve added the shopping cart extension to a page that doesn’t include your store integration code, hence the cart opens in a pop-up which doesn’t know your store location.

To solve this issue, you can tell this page where the whole store is located (and make the shopping cart on it open in a full page instead of a popup). For this, add the following JavaScript code to the source code of that page:


<script>var ecwid_ProductBrowserURL = "PB_URL";</script>

where PB_URL needs to be replaced with the full URL of the page where you’ve added your whole Ecwid store.

Was this article helpful?

Awesome! Thanks for your feedback!

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

Contact support