Static ecommerce for small businesses

The lockdown has highlighted the importance of having an online presence, many businesses at risk of closure have adapted and have found more or less creative solutions to continue their online business. The requests for eCommerce have increased, with the main need to have it in the shortest possible time and at an appropriate cost.
However, on the development side, there are no lean and economical solutions to build an eCommerce, for a series of factors such as the choice of the server, the choice of the CMS or the construction of an ad hoc solution, etc. Between backend development and frontend development months of work go by.

Back-end

It would be the “behind the scenes” of the site and therefore everything that makes the interface work, but that the user does not see.
Traditional CMS, also called monolithic, are software systems that include everything, are installed on a server and have a single data presentation context, the web pages, which are created by creating a connection to the database and querying it to retrieve the necessary data.
A Headless CMS is a content management system that makes content accessible via a RESTful API for viewing on any device.

There are a number of CMSs with this stack:

Many of these are offered as Software as a Service, so the content publisher will have to log into one of these web applications and the data is stored on a Cloud back-end. Others can be installed on your own server.

There are also static site generators such as:


Cases of use of a Headless CMS:

  • Web sites
  • Web applications that use Frameworks Javascript like React, Vue.js, Next.js, Angular, Nuxt.js, Gatsby
  • Native Mobile Applications 
  • eCommerce

Front-end

The front end is the visible part of the site, the interface through which we browse, see photos and videos, read texts or carry out other activities.
In a monolithic system, the front end is tied to the back end and they must both reside in the same place.

In a Headless system, front-end and back-end communicate via endpoints. They can therefore reside on different servers and be optimized for their respective tasks.
Separating the front-end and back-end allows greater flexibility in the presentation of data, and allows the use of modern technologies such as ReactJS, Vue or Angular. Another advantage is that it increases security because the backend is even more hidden from the public.
As for eCommerce, you can make use of third-party services to which the management of the cart and payments is delegated. One of them is https://snipcart.com/

https://snipcart.com/

Snipcart is one of those solutions that allow you to quickly integrate an electronic shopping cart into your site, regardless of the platform and programming language used.
So it integrates perfectly both on a traditional CMS and a Headless CMS, or on a static site.

It is fully customizable and responsive. Using Snipcart you have access to an electronic shopping cart in HTML / CSS, injected directly into your website. You can basically turn any link into a visible purchase button on your product page. These buttons bring up the electronic shopping cart. The shopping cart can be customized based on the site’s graphics, and customers never leave your website.The product catalog and products continue to be managed by your CMS or static site generator. The electronic shopping cart administration panel is hosted on Snipcart and the site owner, by logging in, can set up his account and monitor sales, payments and shipments and manage product inventory. Basically, a minimal knowledge of HTML and CSS is required to use Snipcart.


Obviously, it is not a suitable solution for all needs, but it can be an excellent solution for those merchants who need an electronic shopping cart on their website quickly.

I have prepared an example of static HTML website + Snipcart reachable at this url: https://ecommercestatic.netlify.app/index.html

The HTML template is taken from:

https://www.free-css.com/free-css-templates/page193/bootstrap-restaurant

Published by Roberto Di Marco

Wordpress plugin and theme developer. I have a degree in Psychology, which prompted me to become interested in aspects related to the usability and user experience of digital products.