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.
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!
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
window.ec = window.ec || Object(); window.ec.config = window.ec.config || Object(); window.ec.config.store_main_page_url = "http://www.example.com/store.html";
- 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
When a merchant uses a storefront widget placed on another page of a website, you should use the
window.ec.config.store_main_page_url 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
window.ec.config.store_main_page_url variable and then Ecwid will show the search results on that page.
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.