Customizing Ecwid Storefront
Storefront customizations allow you to add new useful features to Ecwid storefronts. However, merchants expect these benefits at no cost to loading speed or store functionality — find out how to achieve that using this guideline.
Table of Contents
- Use caching and CDN for your app assets
- Use JS frameworks in
non-conflict mode - Use JS API to interact with storefront
Use caching and CDN for your app assets
If your app adds any type of file to storefront, this will influence the loading speed of the Ecwid storefront for end users. Make sure that your files are loaded quickly and contents are cached depending on the content. This way, if store has many similar apps, the store continues to load quickly.
If your files do not change often, apply these headers to them:
Read also:
Use JS frameworks in non-conflict mode
Ecwid can be embedded into any website, which means it can already have jQuery or other popular libraries you may be using. Design your app with these conditions in mind so it works well in any circumstance. As a result, you will encounter less issues with new users and provide them with a better experience.
If you decide that you need to use a library like jQuery or React in your storefront script, design it to reuse existing resources when they are available. For example, if a website already loads jQuery, chances are you don’t need to load your own jQuery library there. Alternatively, you should load your libraries in
Read also:
Use JS API to interact with storefront
Ecwid provides Storefront JS API to interact with a storefront. Make sure to use it whenever you can to avoid getting data directly from DOM elements or modify page URL manually. This will
Storefront JS API allows you to perform many actions, like: open a page, add product to cart, get information about logged in customer and their cart details. You can also subscribe to different events, like: customer opened a new page, customer’s cart was updated and other events.
Make sure to keep the focus on the user’s goal, not the settings or your app.
![]() | ![]() |
Get cart total via Ecwid JS API | Get cart total from DOM element |
Read also: