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

  1. Use caching and CDN for your app assets
  2. Use JS frameworks in non-conflict mode
  3. 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: Cache-control: public, max-age=31536000; Vary: Accept-Encoding. If your files change often, add ETag header to them. Always minify your CSS and JS files for quicker browser processing. Make sure your files load fast from different continents — CDN services can help with that.

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 non-conflict mode to avoid any collisions with different websites your app will be added to.

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 future-proof your app for any changes to existing pages.

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 APIGet cart total from DOM element

Read also: