GUIDEHeadless Shopify with Gatsby: 9 Key Benefits for Your Business

Over the last months commerce has completely changed. Disrupt or be disrupted.

What We Are Going to Explore

The hype about Headless Commerce has held up for some time now. But what is this “headless” anyway? And what’s all the fuss about?

In this guide, you will learn what Headless is, what its advantages and gotchas are, and what it could mean for your business. We will look at one combination, Shopify in combination with Gatsby as a frontend, specifically and will go through a general side-by-side comparison of traditional and headless Shopify stores. We will discuss as well whether and when you should consider switching to a headless setup.

Why You Should Care

Headless has been a myth for some and a revelation for others. After the changes the pandemic has accelerated, 10 years of e-commerce growth in 3 months, it is clear though, that you should try to count to the latter group.

Why?
Because Headless Commerce improves many of the most important metrics for you and your customer and because the space is becoming increasingly more competitive:

Logo of organization

As legacy wholesalers go online and global retail giants like
Walmart expand their ecommerce initiatives, digital competition is
heating up. Likewise, competitors in product categories not
traditionally in demand online are also competing for ecommerce
shoppers.

Shopify

The Future of Ecommerce Report 2021

You surely don't have to become an expert, but you should try to understand what implications a switch to the right headless stack could have for your business or for your competitor's business.

Logo of organization

61% of retailers surveyed they are either currently leveraging or planning to leverage a headless commerce architecture in 2020.

Yottaa

2020 Ecommerce Leaders Survey

What does "Headless" mean?

"Headless" means the separation of the front-end (the head and visual UI) and the back-end (the body and the logic) of your store.

This decoupling allows you to choose technologies for the front-end of your store that can bring major business benefits with them.

Why are people so excited about it?

The advantages and disadvantages of course differ depending on what technologies you decide to use for your front-end. In this guide, we will look at a specific combination that people are excited about, namely the JAM-Stack or specifically Gatsby.
This combination is the Shopify back-end with frameworks like Gatsby or Next. Let’s take Gatsby as an example and go into the advantages frontends created with it provide in combination with Shopify.

1. They are fast. Like really fast.

Site performance is important and if a page is slow that’s bad for your bottom line. Most people understand that. What they mostly don’t understand is how important it is.
Google and Deloitte made a study about it in 2020. The title? “Milliseconds Make Millions”.
If you are serious about your eCommerce business, you should have a look at it. As a small teaser: a 0.1-second improvement in page speed can lead to 8% more conversions. 0.1 seconds.

Combine that with 50% of customers abandoning a website if it takes more than 3 seconds to load and 20% of those never returning.

Logo of organization

Performance is about improving conversions.

Retaining users is crucial to improving conversions. Slow sites have a negative impact on revenue, and fast sites are shown to increase conversion rates.

For Mobify, every 100ms decrease in homepage load speed worked out to a 1.11% increase in session-based conversion, yielding an average annual revenue increase of nearly $380,000. Additionally, a 100ms decrease in checkout page load speed amounted to a 1.55% increase in session-based conversion, which in turn yielded an average annual revenue increase of nearly $530,000.

When AutoAnything reduced page load time by half, they saw a boost of 12% to 13% in sales.

Retailer Furniture Village audited their site speed and developed a plan to address the problems they found, leading to a 20% reduction in page load time and a 10% increase in conversion rate.

Google

Why Speed Matters

The front-ends that are produced with Gatsby take speed to a whole new level. The pages created are precomputed/prerendered, but nevertheless interactive and alive (you are using a site made with Gatsby right now). This means that as much work as possible is done upfront so that the customer's browser doesn't have to do it.

Those static sites are delivered via global Content Delivery Networks (CDNs) to the customer. Whether you are in Frankfurt or Hong Kong, you will get the fastest possible connection. That means that you don’t run a server as you might do with f.e. WordPress that is only sitting in one country and connections to it might be slow and from far away. With a CDN your site gets spread out all over the world and because the site is static and there is no computation by a server necessary, it loads much faster on the user's device. Linked pages are also preloaded if the user might click on them. Like that sites with JavaScript added can all of a sudden be faster than plain HTML without that JavaScript.

Logo of organization

Other fashion brands benchmarking against Victoria Beckham Beauty want to understand how it’s so much faster.

Ryan Foster

at Fostr for Victoria Beckham Beauty

Here is a video comparing StriVectins Headless Shopify storefront with Gatsby with their previous store using Magento:

The shift to mobile is accelerating the need for speed. Back in 2014, the split has been still 70% desktop and 30% mobile. Now in 2021 that split is at 47% desktop and 53% mobile.

This matters a lot because on mobile your customers are much more likely to have a bad internet connection and won't be more patient.

The probability of a bounce also increase drastically with every second added to the page load:

Logo of organization

Competing on customer experience also requires a lightning-fast mobile experience, with 50% of global ecommerce sales happening on mobile devices. Even prior to COVID-19, mobile commerce accounted for 92% ecommerce growth. Research indicates 53% of consumers will abandon a site that takes longer than three seconds to load on mobile. Worse yet, mobile bounce rates are consistently higher than desktop.

Shopify

The Future of Commerce Report 2021

Logo of organization

We're seeing this rapid shift and it's not just ecommerce. It's everything. Our consumers are demanding speed and efficiency, no matter what you're doing.

Margo Hays

Principal of Digital Strategy, TSG

As if that were not enough, Google just recently made performance an even bigger part of ranking, which alleviates its importance further.

2. They are great for SEO

As mentioned Gatsby sites are static/server-side rendered. That means that their content is easily crawlable, which combined with their incredible speed means that search engines will love them.

In May 2021 Google made the core web vitals a key part of their ranking signals. In addition to mobile-first indexing, this means that performance will not only influence your bottom line because of consumer behavior but also because it determines how visible your store and all your content are to the public.

3. They are secure

Because the sites generated are static and are served worldwide via a CDN, there are no servers involved that run a backend. That means the site is a (still very dynamic) brick. You can not hack into it, because there isn’t anything to hack into. Automated malware won't stand a chance.

There is no comparison with traditional setups like WordPress & WooCommerce.

The CEO of Netlify (a leading San Francisco-based cloud computing company), Mathias Biillman, provided the common thread regarding security issues and traditional shops:

Logo of organization

At Netlify we get around 60 million requests every month starting with "wp-admin" even though you can not put a WordPress site on Netlify. And it’s just from crawlers and automated malware looking for holes in WordPress and automatically infecting. I think by now it is save to say, that if you take any normal WordPress site with a few plugins, you put it on a host and then you don’t update it, the time it will take from when you put it live until something bad happens to it is probably down to 11 days or something like that.

Mathias Biilmann

CEO and co-founder of Netlify

4. Flexibility

Drag & Drop page builders, templates, and premade storefronts tend to be nice until they aren’t. First, the time & financial investment to get a site up and running is little and effortless. But if or better to say when you run into unforeseen challenges it’s often not easy at all. You are locked into your limited user interface and issues that arise can be hard and expensive to solve. With a custom front-end built with Gatsby (which is basically React, the most popular JavaScript library), you have almost no limitations in what you can do and what can be changed. That makes it a great long-term choice for store owners that mean serious business. You would also use an external Content Management System like Sanity.io, Prismic, or Contentful to manage all the Content for your site. This additional flexibility is wonderful because it allows you to choose the very best system for your use case and aspirations. You could then also use that CMS to feed your data to an Android or iOS app and if you outgrow a specific provider at any point, you can simply make a switch.

A headless approach allows businesses to take control over their customer's shopping experience and avoid lock-in by rigid drag & drop systems.

Logo of organization

Because eCommerce is constantly changing as the technologies around us evolve, retailers must be agile to adapt their strategies — not as a response, but as a forethought. We work with brands all over the world, and the top initiatives we are currently seeing include headless commerce, mobile, and personalization.

Bridget Fahrlandhead

Digital Strategy, Astound Commerce

5. Low hosting and maintenance costs

What would you say to cutting your monthly server bills of thousands of dollars in half? European shopping mall leader Klépierre did just that. “We realized: you could cut your hosting costs in half if you take a Jamstack approach,” said Jonathan Bobo, CTO of former Proximity (now RAPP) that helped Klépierre archive those results.

Also, server maintenance and the associated costs aren’t a thing anymore and you don’t have to worry about one of your employees or a college breaking your database.

6. They are future proof

Gatsby uses React and React is the most popular JavaScript framework by far based on their download count of 11 million / week. And JavaScript is by far the most important programming language for the web and by far the most widespread programming language worldwide. That means you will always be able to find developers, get things fixed, or move your platform to the next level.

7. They can scale indefinitely

Before you might have been worried about your campaigns becoming a little too successful. Using a classic server setup, that perfectly rolled out Instagram campaign might lead to a traffic spike and that traffic spike might lead to your server going down. No more with serverless. You can now run a Superbowl ad and not worry about the traffic spike where you before had to had all hands on deck to fight the fires.

Logo of organization

Traffic spiked immediately after the Super Bowl ad aired, and we saw a high number of simultaneous uses. I remember watching and seeing we had 3,000 simultaneous users, then 10,000, then a few seconds later it was 15,000 — and we just didn’t have to worry. Because we built with Gatsby, we knew we had the performance to handle the traffic without even thinking about it.

Andrew Smith

Application Architect, Little Caesars

That global CDN doesn’t care all that much how much traffic you receive. The network handles it. There is no single server that might be too weak.

8. They allow you to stay ahead of the competition

Covid-19 has lead to dramatic changes in both offline and online commerce. McKinsey calls it "the Leap". 10 years growth in 3 months.

Combine this incredible acceleration with the fact that according to McKinsey also 75% of US consumers have tried different stores, websites, or brands during the crisis and that of those 60% expect to integrate the new brands and stores into life after the pandemic.

The market is not slowing down and competition is increasing as commerce has been pushed online including many players that haven't had their main focus in the digital realm so far. Disrupt or be disrupted.

Logo of organization

If you're waiting for this to end, you say we're gonna be back to normal in two months, that we're just biding our time and getting through it, then you're gonna be screwed.

Jill Manoff

Editor in Chief, Glossy

9. They improve your bottom line and expand your margins

The points above accumulate and they clearly influence the most important of goals. Your business goals and your bottom line. Higher performance means higher conversions, which means that you make more money with the same amount of traffic. Which means higher growth and more opportunities in all other aspects of your business.

Should you go headless?

Getting a custom frontend developed is an investment with a clear ROI and your online store is one of your most crucial profit centers. But of course it also has to be the right time to make that investment. If you are only starting out and don’t have any cash flow or capital available, it might not be that time. Going headless is an investment for business owners that want to reach new heights, that want to accelerate their growth, and compete at the highest levels. If that’s you, then yes, headless might well be what you are looking for.