Customize behaviour

Ecwid storefront is an embeddable widget and you can control many aspects of embedding process: add custom JS file, delay widget initialization, change page contents and more.

Add Ecwid to the site

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 below. The 1003 is the ID of an Ecwid store. Make sure to specify your desired store ID in order to show your store!

<div id="my-store-1003"></div>
	<script type="text/javascript" src="" charset="utf-8"></script>
	<script type="text/javascript"> xProductBrowser("id=my-store-1003");</script>

Set main storefront URL for widgets

You can add different store widgets, like search, minicart to a page separately from the storefront widget. When you interact with them, the storefront area will open in a pop-up. This pop-up contains the whole store and works as usual.

But in some cases it is more convenient to open the storefront on another website page instead of the pop-up. You can do this with the help of the option. = || Object(); = || Object(); = "";

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, 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 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 variable and then Ecwid will show the search results on that page.

Adapt storefront layout to container width

By default, Ecwid is a responsive widget which adapts to the changing screen width. That's usually when the container for storefront changes its width also.

However, if the screen width stays the same but the container for storefront changes its width, you will need to call the Ecwid.resizeProductBrowser() function to adapt Ecwid's layout to this change.

Set storefront language for search engine crawlers

Ecwid allows several translations for the same page. That helps with creating multilanguage websites, but search engines could get distracted by same-looking pages. To help them index your website better, use our configs for automatic generation of the 'hreflang' meta tags.

Meta tags will be generated autoatically for the storefront if these two configs are added to website code: ec.config.storefrontUrls.enableHreflangTags and ec.config.storefrontUrls.internationalPages

  • enableHreflangTags enables generation of the 'hreflang' meta tag. Default value is false
  • internationalPages is used to specify URLs for different translations of your storefront in a "locale": "URL" format. Empty by default.

Examples of 'locale' values in Google Search Engine docs: link

Config example:

ec.config.storefrontUrls.enableHreflangTags = true;
ec.config.storefrontUrls.internationalPages = {
  "en": "",
  "fr": "",
  "es-mx": "",
  "default": ""