Static store pages allow generating a lightweight HTML snapshot of the home page or specific category/product pages. You can display that snapshot to users almost immediately and load a full-functioning Ecwid store in the background. This way you can dramatically increase the loading speed of the Ecwid storefront on your website.
If your website is based on Wix or WordPress site builders, use our official integrations: , . These integrations have static store pages enabled out of the box.
And if you build a storefront on another CMS or a custom website, use our Storefront SDK and Static code endpoints to set up static pages for your website.
How to use static pages
To start working with static pages, you need access to the HTML and JS code of your website. First, you'll need to receive the static page code with REST API request and display it on the website, then load a dynamic full-functioning storefront and switch to it.
Enable Storefront SDK on your website
Storefront SDK contains several pre-built methods for managing and switching static pages on the storefront with simple JavaScript calls. To enable it on your website, add a JavaScript SDK file to the website <head>.
When a user opens your home, category, or product page, request a static HTML code for that page through REST API. While GET requests for static code don't require access tokens, we still recommend using backend calls to avoid CORS errors. For example, using a separate PHP file for REST API calls.
Find endpoint descriptions by the following links:
// Import jQuery .js file to the website to enable Ajax requests
$.ajax({
// Call PHP file that requests static code for the home page
url: 'call.php',
// Parse response on successful call
success: function (data) {
var cssFiles = JSON.parse(data).cssFiles;
var htmlCode = JSON.parse(data).htmlCode;
var jsCode = JSON.parse(data).jsCode;
// Add received JavaScript store code to <head>
var jsCodeAppended = document.createElement("script");
jsCodeAppended.innerHTML = jsCode;
jsCodeAppended.type = "text/javascript";
document.head.appendChild(jsCodeAppended);
// Add received CSS stylesheet file to <head>
var cssFilesAppended = document.createElement("link");
cssFilesAppended.rel = 'stylesheet';
cssFilesAppended.href = cssFiles;
document.head.appendChild(cssFilesAppended);
// Add received HTML store code to a static code contained in <body>
$(document).ready(function () {
$("#static-ec-store-container").html(htmlCode);
});
}
});
In the example above, we call a PHP file that receives static code from REST API. On success, the script parses the $response and adds JS and CSS codes to the <head> and HTML code to the <div id="dynamic-ec-store-container"> inside website <body>.
As a result, the static page is displayed on the website.
Start loading dynamic code
With the static code loaded and displayed to website visitors, you can start loading the dynamic storefront. Load the code in a hidden <div> on the same page. As a result, there will be two <div>s with the store page code: static storefront (visible) and dynamic storefront (hidden).
There are two ways of loading dynamic code: default loading and lazy loading. We recommend using lazy loading as it should give better website performance scores.
In both cases, static page code gets automatically replaced with a dynamic storefront when it's ready. If you want to call the switch manually, replace the ec.storefront.staticPages.autoSwitchStaticToDynamicWhenReady = true; config with false and call StaticPageLoader.switchToDynamicMode(); when you are ready to switch.
Summary
Let's combine the examples above into a project with two files: a PHP file making REST API requests and an HMTL page code. Replace STOREID with your store ID in both files to test it locally:
