Unpacking the tech stack behind headless e-commerce

By Ten Squared, posted on the 12th of September, 2021 · 5 minute read

If you’ve been keeping up to date with the latest in e-commerce trends, you’ll know that headless e-commerce is the way of the future. When standing out on the online space there are a few things that are important, one of those things is making sure your website is fast, secure and ready 100% of the time to take orders. This means no downtime, no crashing and certainly no security alerts from browsers. So what platform offers all of these at an affordable price of $0.00 more than Shopify? Of course, the answer is Gatsby JS a platform that is loved for all of those things, and now it is viable to use Gatsby JS to create the eCommerce store of your dreams.


If you’re not familiar with what headless architecture is, let’s break it down for you. Essentially you are decoupling the backend of your site, that houses your product information, content, and payment providers from the frontend that is presented to your end consumers. This allows for finer grain control over a user’s experience on your site. Additionally, by separating these two different parts of your site, you end up with a faster, more secure website that will further improve the experience of your users.


At Ten Squared, we fully acknowledge that headless e-commerce is the way of the future, and as such need to begin planning on how to best tackle our first build. What better way to do this, than to unpack what’s already been done? We are in the process of researching hundred of headless eCommerce sites to work out the good, the bad and the ugly. As with anything new there are some companies that are paving the way, overcoming the hurdles and harnessing the power of headless structures to dominate their industries.


So let’s take a deep dive into some well-known brands, and how they’ve tackled headless e-commerce.


Liquid I.V. is a health-science nutrition and wellness company that provides natural rehydration beverages, based out of El Segundo, CA. They offer a single product but do so very effectively by using new web technologies.


Frontend Web Framework: Gatsby JS.

There are no surprises on this front, Gatsby JS is one of the most well known React-based static site generator frameworks out there. Supporting sourcing from a variety of content providers, including Shopify. This is achieved with gatsby-source-shopify, which allows you to query your products, collections, and other content silos housed with your Shopify store - in addition to being able to manage your cart and checkout via Shopify.

CMS: Contentful

Whilst Shopify is used to manage products and orders, contentful is used to manage the on-page content. This is a great solution for website CMS's as it allows website owners to have complete freedom over design whilst simultaneously reserving the ability to customise and update content. A CMS like Contentful works by linking to the content that is on your page, unlike WordPress, the website itself is not built on Contentful, but rather the information such as copy and images is requested from Contentful to populate the sections on the website.


Host: Netlify

Netlify is a great hosting platform that allows you to leverage the full power of Gatsby JS sites. They have a range of different plans for all sizes of business ranging from Starter at $0.00 per month to business and enterprise from $99.00 USD per month. This allows your hosting to scale with your business and ensure you always have a fast and secure website that your customers will love!

Loyalty, Rewards, Reviews: Yotpo

Yopto was used to integrate a loyalty and review platform into the Gatsby website. This is a great sales tool and helps give your brand the social proof that it needs. Additionally, you can boost the number of reviews by offering small incentives for reviews such as 100 points towards your next purchase. You can also style Yopto to fit the feel of your brand so your entire site can follow one seamless design!

Email Markting: Klavyio

Klaviyo has long been crowned one of the best email marketing platforms around. It can help you get into contact with all the right people at the right times. Automating marketing flows and ensuring you get the most conversions from your customers. The best part is that it will work seamlessly with your headless eCommerce website.


Instagram Feed: Covet.pics

Getting an amazing looking Instagram has become increasingly difficult over the years, on new technology like Gatsby JS this can be even more difficult. However, with Covet.pics this has finally become something that is not only doable but is easy! You can now present your glorious Instagram feed on your incredible website with no hassle at all.

If you are thinking about getting started with a headless e-commerce store, get in touch with us as we would love to be one of the first Melbourne web developers to deploy an incredible headless e-commerce store.