When we think of eCommerce, a few things immediately come to mind — Shopify, Magento, BigCommerce, WooCommerce, and maybe Squarespace and Wix. But these have been around for long and the eCommerce Industry is due for a revamp!
We need websites that are faster, secure, flexible, and just sexy!
Enter Headless eCommerce and JAMstack — The new kid on the block. Headless eCommerce promises the benefits of using traditional e-commerce platforms with the speed and agility of modern frontend frameworks such as React and Vue.
Today, the entire eCommerce industry is talking about headless e-commerce, and no wonder, JAMstack is often involved.
First, some history :)
A long time ago, in a land not so far away, there were websites built on static web pages. You created a simple HTML page, wrote the bare minimum code to make the page attractive, strung up a bunch of these pages together, and you were ready with a website.
But we wanted more than just simple pages, and so we built CSS, and then, when that was not enough, we built entire sites on PHP using Server-Side Rendering. Dynamic web pages became the norm and people slowly forgot the advantage that static pages had — Speed!
But like any good story, there were a small group of developers who believed that they could get the best of both worlds :)
And lo and behold, we have JAMstack!
What is JAMstack?
JAMstack is a radical new way to approach how one goes about building apps and websites. What is means is that you:
- Pre-render and Build your site/app as much as you can beforehand
- Deploy the same on CDNs rather than traditional servers and
- Call the data needed dynamically through APIs!
JAMstack is a treat for developers since it offers better performance, higher security, and cheaper scaling.
JAM stands for 3 of the pillars on which JAMstack is built:
- Javascript: The browser programming language that helps provide the interactive bits.
- APIs: Reusable APIs that handle all the server-side functions or database actions.
- Markup: This is a presentation layer of your website, usually a static site generator.
Since the pages are pre-rendered, there is a considerable reduction in the time it takes to load and navigate between webpages since our requests no longer have to go to and from a database.
Some of the most JAMStack friendly CDNs are Netlify, CloudFare, and Akamai. Less complicated development also translates to reduced costs.
This is why JAMstack is the perfect solution to build a headless e-commerce application.
Now the question may arise:
What is headless e-commerce?
When you separate the front end and back end of an application, you get headless e-commerce. The front end, or the “head,” which in most cases is the template or the theme — has been de-coupled and removed, leaving the backend separate.
Thus the front-end can be built with frameworks such as GatsbyJS, VueJS, ReactJS (not a framework), Angular, and more. The backend (APIs) can still be your traditional Magento, Wordpress, Shopify, BigCommerce, or modern API-based eCommerce tools such as elasticpath. Alternatively, we also suggest upcoming frameworks such as Saleor and Reaction Commerce.
If you do have a clear idea about the website you are planning to build, here is our quick guide which will help you build a successful product.
In the meantime, here is our pick of the top 10 e-commerce websites built on JAMstack:
1. Louis Vuitton
The Louis Vuitton apparel webpage is a great example of an e-commerce website built using JAMstack. The web page is divided into different categories, such as “Men,” “Women,” and “New.” Browsing through the pages is a breeze, and checkout can usually be done within three clicks.
Front-end Framework: VueJS
CDN: Akamai
Web Server: Apache
2. Easyship
Easyship is a shipping platform that can be used by e-commerce sites across the world. With 250 plus shipping partners, the company claims that it can provide up to 70% savings in shipping costs.
The Easyship website is a comprehensive project built using JAMstack, with multiple sections such as “Features,” “Customers,” “Pricing,” “Resources,” and a “Login” page. For new visitors to the site, there is a “Sign up” button as well on the homepage.
The site features a bunch of useful tools such as “Shipping Rates Calculator” and “Duty and Taxes Calculator,” all accessible from the “Resources” section in the home page.
The major technology stack is as follows:
Front End Framework: Node.js
CDN: Cloudflare
Web server: Google Cloud
3. Fishtripr
Fishtripr is a guide and booking platform for fishing experiences, which extensively uses the JAMstack for its website. The site is quite comprehensive, with different sections for “Fishing,” “Hosting,” and “Scouting.” Booking a fishing trip is easy, and once you specify details in a couple of forms, such as the duration of your trip, destination, and the number of people, you are good to go.
The site also offers potential guides a way to meet and host people looking for fishing experiences. The conversational form means that you fill in the details, and you are ready to host within a few minutes!
If you are an avid photographer and want to help spread the word about Fishtripr, you can head on over to the “Scouting” section, where Fishtripr gives you a chance to chronicle your fishing journey, while getting paid to do it.
The technology stack is as follows:
Front end framework: Express
CDN: Cloudflare
Payment platform: Stripe
4. Advensure
Advensure is an online reservation system for adventure activities and rentals, built entirely using JAMstack. The site lets you convert an activity or a tour into an adventure package, and then sell it to prospects all around the world.
This e-commerce website is divided into three sections called “Features,” “Built For,” and “Pricing.” The three cornerstones that the site specializes in are “Sell,” “Scale,” and “Serve.” Each cornerstone has a separate page dedicated to it, where the visitors are taken through the buyer journey, and the page explains how they will benefit from Advensure.
The “Built For” section is further divided into “Activities,” “Rentals,” “Tours,” and “Customized Solutions.” Each of these pages lists the various services that Advensure provides and how the buyer will only have to make a few decisions before inviting their first client.
The technology stack used is:
Front End Framework: Laravel
CDN: Cloudflare
Database integration: Segment
5. Koala mattress
Koala mattress is a website for an Australian company that also donates some of its proceedings to, well, helping Koalas! This PWA is built using the JAMstack. The Website has a neat, free-flowing design, where you either scroll down to see all their offerings or choose from one of the three sections on the top.
The three sections that the site is divided are the rooms you can place your Koala mattress in, namely, “Bedroom,” “Living Room,” or a combination from both these sections called “Bundles.” The checkout process is quite simple, and you can complete your transaction within four clicks.
The tech stack used is:
Front end: Node.js
Analytics: Quantcast
CDN: Amazon Cloudfront
Web server: Amazon Web services
6. Secrid
Secrid is a premium leather accessories maker whose e-commerce store is built using JAMstack.This Netherlands based company started in 1997, has a neat e-commerce store that caters to loyal customers all across the globe. There are two primary product groups, called “Wallets” and “Collections.” The website also has three supporting pages titled “About,” “Stores,” and “Service.”
The browsing experience is smooth, and the wallets can be bought online with a few clicks. There is also an option to choose your country based on your location, and the international website gives you information about the closest secrid store.
The tech stack used by the website is:
Front end framework: Node.js
Web server: Nginx
7. Ingmarson
This UK based cloth retailer has built a beautiful website using JAMstack. The offbeat web design has irregularly placed sections such as “Scarves,” “Men,” “Women,” and “Popular” scattered around the main page.
The shopping experience on the website is as simple as they come, and you can have an item in your shopping cart in a matter of two clicks.
The tech stack used by the website is:
Frontend framework: Gatsby
Web Server: Apache
Content Management system: Netlify
8. Teaquinox
As the quirky name suggests, Teaquinox is an e-commerce website that sells tea and is built using JAMstack. The website is quite informative and aims to educate the reader by providing detailed explanations about the various kinds of tea that are available on the site.
There are various categories of Tea on the website that you can browse, including “Black,” “Green,” “White,” “Matcha,” and “Herbal.” Clicking on each category leads you to a collection of sub-categories, such as “Chun Mee,” and “Buncha” for the Green Tea.
The checkout option is a bit complex, but once you get used to the interface, it flows smoothly.
The tech stack used by the site includes:
Front end framework: Bootstrap
Web server: Nginx
9. Peloton
Peloton is a NewYork based fitness company that primarily makes exercise bikes and treadmills. They have used JAMstack to build their website and their e-commerce shopping site. Their impressive website jumps at you with a red and black theme that has three distinct sections — “Bike,” “Tread,” and “App.”
Click on the “Bike” section, and you are guided to a page that has “Overview,” “Classes,” Reviews,” “Financing,” and “Accessories.” There is also a bright red button that nudges you gently towards the e-commerce site.
Shopping on Peleton is easy and intuitive, and you can choose one of the four packages they have to offer. Within two clicks, you are out of the shopping page and entering your card details.
The major tech stack used in the site are:
Frontend framework: React JS
CDN: Contentful
Web server: Netlify
10. Flamingo
Flamingo is a women’s grooming brand that has an impressive e-commerce presence thanks to JAMStack. The home page consists of three clear sections named “Shop All,” “About Us,” and “Wax Guide.”
The “Wax Guide” is an interesting page that has a visual guide to help you get through the waxing process. Quick and painless!
The “Shop All” page contains all the products that flamingo sells, and, within two clicks, you are entering your card details in the checkout section.
The major tech stack used on the website are:
Frontend Framework: ReactJS
CDN: Contentful
Web server: Amazon Web Services
I hope you found the list helpful to get a gist of what can be achieved with headless eCommerce. If you would love to get a site as fast as ours — get in touch :)
