NAV

Add Ecwid to the site

Add Ecwid storefront to your website

<div id="my-store-1003"></div><div> <script type="text/javascript" src="https://app.ecwid.com/script.js?1003" charset="utf-8"></script><script type="text/javascript"> xProductBrowser("categoriesPerRow=3","views=grid(3,3) list(10) table(20)","categoryView=grid","searchView=list","id=my-store-1003");</script></div>

This is the most important Ecwid widget. It shows and includes a full-featured shopping cart with products, categories, catalog, checkout pages, etc.

To add an Ecwid store to the website, use the code example on the right. The 1003 is the ID of an Ecwid store. Make sure to specify your desired store ID in order to show your store!

Set main storefront URL for widgets

When you add store widgets, like search, minicart, categories menu, to a site page separate from the storefront widget, the storefront will open in a pop-up. This pop-up contains the whole store and works just fine. But in some cases it is more convenient to open the store on another website page instead of the pop-up.

You can do this with the help of the ecwid_ProductBrowserURL option.

‘Tell’ Ecwid widgets that storefront is located at “http://www.example.com/store.html”

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

How Ecwid works by default

  • if a visitor uses the “minicart/vertical categories/search box” widget and a storefront is added on this page, all actions (go to cart, to category, etc.) will be made in that storefront widget
  • but if a storefront widget doesn’t exist on the same page page, a pop-up window with the storefront will be created on this page to complete the action

How Ecwid works with this option

When a merchant uses a storefront widget placed on another page of a website, you should use the ecwid_ProductBrowserURL option. If it’s set up, Ecwid works in such way:

  • if a visitor uses the “minicart/vertical categories/search box” widget and the storefront widget isn’t added on this page, they will be redirected to the URL speicified in the code and then the necessary actions will be performed there

For example, if a customer searches for a product on the page without a storefront, they will be redirected to a URL specified in ecwid_ProductBrowserURL variable and then Ecwid will show the search results on that page.

How to set up this option

In order to use it, you need to add the following JavaScript code to all pages, where Ecwid widgets are installed:

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

where PB_URL is the full URL of the page where your product browser widget (i.e. your Ecwid store) is installed.

For example:

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

Embed or remove storefront on demand

Dynamic embedding of Ecwid storefront widget

<div id="my-store-1003"></div>
<script>
window.ecwid_script_defer = true;
window.ecwid_dynamic_widgets = true;

   if (typeof Ecwid != 'undefined') Ecwid.destroy(); 
   window._xnext_initialization_scripts = [{
        widgetType: 'ProductBrowser',
        id: 'my-store-1003',
        arg: ["categoriesPerRow=3","views=grid(3,3) list(10) table(20)","categoryView=grid","searchView=list"]
      }];

  if (!document.getElementById('ecwid-script')) {
      var script = document.createElement('script');
      script.charset = 'utf-8';
      script.type = 'text/javascript';
      script.src = 'https://app.ecwid.com/script.js?1003';
      script.id = 'ecwid-script'
      document.body.appendChild(script);
    } else {
      ecwid_onBodyDone();
    }
</script>

In some cases it is necessary to dynamically create and destroy Ecwid widget within the HTML page. This is useful for dynamic sitebuilders that switch to online store page without actually reloading page (e.g. making it visible).

You should use window.ecwid_dynamic_widgets variable to enable dynamic widget creating in Ecwid. See the example on the right that shows how to create and destroy Ecwid widget through the JavaScript functions.

Please note that this method allows to embed the storefront widget only. If you need to embed other widgets dynamically, please, use the code for deferred widget initialization

Delayed widget initialization

Delayed widget initialization

<div id="my-store-1003"></div>
<div id="productBrowser"></div>
<script>
  window.ecwid_script_defer = true;

  var script = document.createElement('script');
  script.charset = 'utf-8';
  script.type = 'text/javascript';
  script.src = 'https://app.ecwid.com/script.js?1003';

  document.getElementById('my-store-1003').appendChild(script);

  window._xnext_initialization_scripts = [
      { widgetType: 'ProductBrowser', id: 'productBrowser', arg: [
          '"categoriesPerRow=3","views=grid(4,4) list(10) table(20)","categoryView=grid","searchView=list","style=","responsive=yes","id=productBrowser"'
      ] }
  ];
</script>

Sometimes it is necessary to delay widget initialization while the website page finishes the initialization procedures. This is useful when the website is built dynamically using libraries such as ReactJs.

See the example of delayed initialization of Ecwid widget on the right.

Increase widget loading speed

DNS Prefetching of Ecwid’s resources

<link rel="dns-prefetch" href="//images-cdn.ecwid.com/">
<link rel="dns-prefetch" href="//images.ecwid.com/">
<link rel="dns-prefetch" href="//app.ecwid.com/">

To increase the loading speed of an Ecwid store, you can start loading Ecwid resources even before a customer opens the store page by the means of so-called prefetching (prerendering) browser feature. Not all browsers support this at this moment though.

Prefetching and prerendering of storefront page

<link rel="prefetch" href="http://www.example.com/store/"/>
<link rel="prerender" href="http://www.example.com/store/"/>

You can also add your storefront page to preload and prerender in the background for further increase in loading speed for browsers that have this feature.

Feel free to learn more about these techniques in https://css-tricks.com/prefetching-preloading-prebrowsing/