They say that static sites are the future of web, and we couldn't agree more. They’re fast, secure, and scalable by design. For that reason, the best digital agencies and developers are looking at static sites as a great alternative to their database-driven projects. They are realizing that ecommerce is not that dynamic and that their sites would benefit a lot from going static.
There are plenty of guides out there showing how to use static site generators (SSGs) for basic ecommerce stores — with most of them using Snipcart to add shopping cart functionalities to a simple product catalog.
The question is: are static sites a good alternative for enterprise-level ecommerce as well?
We definitely think so, and this tutorial aims to prove just that.
By reading this guide, you will learn how to build a static site ecommerce with enterprise-level features. The resulting demo site will be a multi-country, multi-language online shop with the following characteristics:
Instead of diving into the technical details, we will focus on the site architecture and development workflow. After learning the big picture, we recommend you explore the source code and follow the step-by-step guide that is available on GitHub.
To build our demo site, we selected some of the best tools, one for each piece of the site architecture:
It's worth mentioning that we are going to manage all content with Contentful, including the product information, categories, and catalogues. Unlike traditional platforms, Commerce Layer is a purely transactional engine that leaves content management to the CMS. This approach lets creatives and content editors design any customer experience, without locking them into any site structure or template system.
The picture below outlines how the tools fit together in the overall architecture. As you can see, each tool is dedicated to a specific step of the pipeline, contributing to the content editing and publishing workflow.
Let's have a look at each step of the diagram:
The second step of the workflow is where content editors manage the product catalogue in Contentful. This is a key step that determines how the site works. The diagram below outlines the content model that we designed to support the multi-country, multi-language structure:
Let's describe each model, their roles and relationships:
Our static site ecommerce is made of three types of data that need to be refreshed as they change: code, content, and commerce.
When code changes, developers push the changes to Github, triggering a new build on Netlify. The build command fetches all published content from Contentful (
jekyll contentful) and builds the static site (
When content changes, content editors hit the publish button on Contentful. To trigger a new build for each publishing, we need to create a build hook on Netlify...
...and link it to the publish webhook on Contentful:
The market in scope determines the right price list, inventory model, promotions, payment and shipping methods as defined by the merchant within Commerce Layer. As a developer, you just need to use the right access token to get country-specific commerce data and let customers place orders without errors.
Being a static site, all pages are plain HTML files served by Netlify CDN. The only dynamic information is provided by Commerce Layer API as displayed by the graphic below (red boxes) for each relevant page.
As you can see, not all pages require the same kind of data from Commerce Layer:
Considering that prices generally don't change very often - unless you have some adaptive pricing mechanism in place - we could also import prices into Jekyll as YAML files and leverage Commerce Layer webhooks system to trigger a new deploy on each price change.
This would further improve the website speed by reducing the number of client-side requests to the Commerce Layer API. Pages, like the category overview page, could be almost completely static (apart from the shopping bag preview) as we wouldn't need to fetch the prices dynamically.
When customers proceed to checkout, they are redirected to the Commerce Layer hosted checkout application, where they can add all the required information and place the order.
This is the easiest solution to reduce the time-to-market and start selling as soon as the content catalog is ready. That said, Commerce Layer also provides APIs to create a custom tailored experience on your own site. Just keep in mind that this would require us to add some server-side components to our static site, at least to manage the authentication and safely store its
Static sites are a great alternative to database-driven websites. They are fast, scalable, secure and cost-effective. All amazing features that can make your ecommerce shine.
In this article, we described how some of the best tools could be combined to build the perfect stack - a.k.a. JAMstack - for static ecommerce. The separation of concerns between code, content, and commerce is pretty clear. The work of developers, content editors and merchants is perfectly orchestrated.
From a features perspective, we just scratched the surface of what we can do. There are a lot of great services that would perfectly fit in our diagram, making our static site even more dynamic.
Other than the fully branded checkout experience, our static site ecommerce could be improved adding the following features: