Headless

What Does it Take to Go Headless with Shopify?

September 29, 2020

Consumer expectations for online brands are at an all-time high.

For one, customers have become incredibly experienced with technology –– and expect things to just work, intuitively. 

You are hard-pressed these days to find anyone who can’t offer an opinion on an online experience. They might not use the industry standard UX or UI nomenclature, but they know good design, good flow and good experience when they see it. 

The desire for even better, faster, more personalized online experiences has been the catalyst behind headless commerce.

In this article, we’ll talk about this newer technology stack and how you can use it with Shopify.

What is Headless Commerce?

Headless commerce is an ecommerce technology approach that decouples the frontend (the part visitors see and interact with) from the backend (the behind-the-scenes administrative functions) of the online store. 

In other words, headless commerce allows brands to completely customize their online storefront experience for customers, while taking advantage of ecommerce platforms like Shopify or BigCommerce that make payments, product catalog management and so much else incredibly easy. 

graph depicting headless commerce connecting to a Shopify Plus store

When talking about this tech architecture, it’s also worth mentioning progressive web apps.

What is a Progressive Web App?

A progressive web app (PWA) is a type of headless commerce. It’s not quite a native app and not quite a responsive website — instead, it combines the best of each technology, creating a mobile web experience that looks, feels and performs like a native app. You also get some of the same functionality with a PWA, such as offline mode and push notifications, no app store download required.

The bottom line: Progressive web apps are next-generation technology that run much faster than traditional websites.

The beauty of headless commerce and PWAs is that you only need to build one storefront. This storefront is then accessible across all devices — mobile, desktop, you name it — where consumers can make a purchase online.

And a fast, seamless shopping experience is becoming increasingly important.

The State of Ecommerce in 2020

The global pandemic of 2020 has changed ecommerce forever. For one, it’s sped up consumer adoption of purchasing nearly all items online. 

A study by SAP in summer of 2020 confirmed these results:

  1. In the first eight weeks of 2020, online order volume was consistent with 2019. COVID-19 had begun spreading in China at this time, but the rest of the world was still relatively pandemic-free. 
  2. Early indicators: During weeks eight through 11 of 2020, the U.S. began seeing an increase in demand. Order volume increased 11% during these weeks, compared to 1.9% decline in 2019 for the same time period, and order volume jumped to just under 21% during week 10.
  3. The World Health Organization declared COVID-19 a global pandemic on March 11, 2020, triggering panic purchasing in the United States: Order volume jumped to 40% by week 13. Compared to the same period in 2019, there was a slight increase of 3%.

Now, more than ever, consumers are picky. And they are not patient. 

Especially when it comes to mobile shopping.

The Case for Headless Commerce & PWAs

“Half of all web traffic comes from mobile,” wrote Daniel An, Google Global Product Lead, Mobile Web.

He continued, “Mobile conversion rates are lower than desktop. In short, speed equals revenue.” And the data supports this: 

page load time survey data from google
Image source: Think with Google

This is only accounting for the speed side of the online shopping equation. The web experience is another –– and many brands are looking to provide something that delivers a unique, individualized experience, which helps consumers remember a brand and come back to it time and again. 

It’s a delicate balancing act. Because, often, as you better the web experience, site load time increases. 

You can’t really create robust experiences (think, detailed interactivity or animations) with themes or a coding language like Liquid. You’ll need to custom code for that. Traditional websites are built using HTML with JavaScript layered on top — JavaScript is the part that makes pages interactive. The old-school model adds it as an afterthought and bloats the pages, adversely affecting page load time. 

This is just one driving factor for headless commerce, which leads us to the next section.

5 Benefits of Headless Commerce

The benefits of headless commerce are many –– though they focus primarily on content management, site speed and UX. The success of headless commerce comes through in KPIs like: 

  • Digital and mobile conversion rate increases
  • Improved SEO rankings and increased organic traffic
  • Agility of content management
  • Improved LTV:CAC 

Here are a few ways those KPIs come to life.

1. Internationalization- and Localization-Enabled Online Storefronts

Clients with a global presence want a different site experience for each country they operate in. They want the correct content and currency to dynamically display depending on where the visitor is located — so, an online store that automatically shows blog content in the Spanish language and prices in the Euro for consumers in Spain, for example.

Ecommerce platforms are pretty deficient for managing the complexities that come with content management for multiple storefronts, which makes headless a big driver.

2. Increased Site Customization and Personalization Opportunities

One of the main reasons brands look to headless commerce is to provide a unique online experience for their customers. Ecommerce platforms like Shopify weren’t built for incredibly high-quality content experiences, which are becoming more and more table stakes for online brands. 

Imagine, for instance, a Shopify catalog for rings. Maybe a marketer wants to build out an online experience that takes users out of a collection page (which could be overwhelming as a shopping experience) and instead, allows customers to build their own ring by pulling on custom attributes from the catalog. This is an enterprise-level request that’s not possible out of the box on Shopify. But all the data is there to make it so. 

That team could use a headless commerce solution to make this come to life –– and do it in a way that loads quickly for each and every customization.

Headless commerce tools like Shogun Frontend enable developers to build page sections for your site using JSX and CSS, and then allows anyone on your team to insert those sections to build high-quality page designs and UX that ensure consumers won’t soon forget the experience. 

Shopify was built for — and is amazing at — taking payment, managing a product catalog and all the other technical necessities of running an online store. Site customization and personalization, however, aren’t something the platform does well at this point in time. 

3. Reduced Development Costs by Empowering Marketing Teams to Make Adjustments Without Impacting Backend Processes

Your marketing team is known for trying out and testing the next new thing. After all, the early bird to new technology gets the worm (or the most revenue), as we all learned from the early days of Facebook advertising. 

It pays to be the first to market with new ideas, tools, technologies and online experiences. But, so many marketing teams are roadblocked to innovating on the frontend because of the backend.

As an ecommerce experience platform, Shogun Frontend empowers marketers and merchandisers to build pages visually and make sitewide content changes quickly with these two out-of-the-box features:

  1. Experience Manager: A content management solution that allows you to build pages visually. You can insert pre-built page sections; edit text, images and video content; and rearrange content sections without writing code, giving a true-to-view visual preview of what the page will look like.
  2. Content Management System (CMS): A system that allows you to make sweeping, sitewide content changes from a single location without going into the experience manager.

By empowering merchandisers and marketers to build pages without funneling requests through engineering — which can be more time- and cost-intensive — you’ll save money and have the ability to make changes quickly.

4. Scalability, So the Frontend Can Receive a Surge in Traffic Without Impacting the Backend

Virality –– it’s something brand marketers covet, and so few know how to make a reality. Yet, there are so many channels through which a brand can see a surge of traffic. 

  • An influencer posts about you on Instagram
  • Something goes viral on TikTok
  • Maybe you appear on “Shark Tank”
  • Or, more reasonably perhaps, your traffic spikes for a holiday campaign you are running

This is fantastic news for brand visibility, and hopefully for overall brand revenue. Yet, historically, many brands have experienced the downsides of these spikes. 

Ecommerce platforms like Shopify claim 99.999% uptime. But the .001%? That’s usually due to a spike in traffic, which means none of those folks heading to your site can checkout. 

This is where headless commerce can help.

Sites can get overloaded due to a surge in traffic, and knock out both the front and backend of the site. Headless helps offload this, better balancing out traffic on the website and traffic trying to check out. 

Because all requests are served at the CDN level and nothing touches a database, it's extremely difficult to knock the site offline, even with a huge surge in traffic. Whereas if there's a huge surge in traffic to your Shopify store, a lot of those requests could end up hitting their database and slowing things down.

With headless commerce, you’ll get a faster site load time — even during traffic spikes — and keep your store up and running.

It’s a win all around.  

5. Reduced Time to Market

Like just about any new system, getting up and running immediately can take time. That is most often because of a brand's own team. You want to make sure the design and the UX is right. Otherwise, what’s the point?

But connecting a headless frontend, like Shogun Frontend, with a Shopify backend takes no more than a few minutes. And, once you have your headless frontend connected, you can create a variety of them –– using IP addresses to serve different frontend experiences to different consumers no matter where they are in the world.

graph depicting shogun frontend connecting to your shopify platform for your store

And when they check out, they’ll all pass through your single Shopify backend, where you collect data and use it as your single source of truth. 

In this case, it’s truly easier done than said. 

What Does Traditional Headless Commerce Architecture Look Like?

All right — so you’ve made it all the way here and likely have one major question still outstanding: 

For all of the great benefits above, why do so many people still get so nervous about headless? 

Well, because traditional headless commerce architecture is a pain –– and requires development talent, regular upkeep and steep pockets to maintain it.

You typically need the following tech stack to build a headless setup:

  1. Storefront: A JavaScript framework, such as React.js or Vue.js, to build the PWA.
  2. Server-Side Rendering Framework: An SSR framework, such as Gatsby.js or Nuxt.js, that renders pages on your server before sending them to the end user’s browser, which results in faster page load times.
  3. Headless CMS: A system, such as Contentful, Prismic or Sanity, for codeless content management.
  4. Content Delivery Network: A CDN, like Netlify, to shorten the distance between your users and servers.
  5. Middleware: This software connects your PWA frontend to your ecommerce platform backend to pull information such as product data and inventory numbers.
  6. Third-Party App Integrations: Often custom coded, you can connect your site with all your third-party applications, such as Yotpo, Klayvio and Nosto, etc.

And then, of course, you’ll have your backend admin like Shopify. 

Beyond the technology investment and development expertise needed to keep something like this up, these types of headless commerce experiences — while they load fast — make it incredibly difficult for marketers to make any changes on the site. 

graph of what a traditional PWA build looks like

With an ecommerce experience platform like Shogun Frontend, the traditional headless commerce architecture is flipped on its head.

Instead of needing six different technologies, you need only two: Shogun Frontend and Shopify. 

Here is what that looks like:

graph of what the shogun frontend build looks like for shopify users

This solution makes headless more streamlined and efficient to operate for your team, and produces a superior user experience for your customers.

3 Examples of Headless Commerce on Shopify Plus

Headless commerce is only growing in popularity as brands need to give their marketing teams the ability to create the absolute best online experiences, while simultaneously giving their development teams and security teams clear control over checkout, customer data and more. 

So, let’s look at a few brands already up and running with headless commerce on Shopify Plus to give you a good idea of what this looks like in practice — not just theory. 

1. Koala Headless Commerce Case Study

“All our energy goes into understanding our customer’s worries, then creating an experience that makes everything easy,” Dany Milham and Mitch Taylor state on Koala’s About page

Koala isn’t alone in this. The need for high-quality online experiences hits ever-higher bars as consumer expectations increase seemingly month over month. This is especially true in the months and years following the COVID-19 pandemic, in which online shopping became the norm.

“By decoupling the content from the code, we have been able to free the content from the engineers so that they can focus on code, while writers focus on content,” said Richard Bremner Head of Technology, Koala, in an interview with Shopify Plus

Bremner went on to tell that team that the speed at which Koala can test, develop and launch solutions that increase their revenue and give them a leg up on competition is 3x that which he’s seen at any other company. That, he says, is thanks to headless commerce which allows various teams to focus on their core skills.

As told to Shopify:

“Our speed is achieved by the confluence of a well-thought-out design system, component library, page template generator, and CMS,” Bremner says. “They all come together seamlessly to make generating a new page like our recent sustainability page both simple and effortless. This allowed our sustainability manager to focus on writing the content, and not be blocked waiting on engineers or designers.”

Importantly, going headless has also allowed Koala to strip out unnecessary features that slow online storefronts and negatively impact the customer experience. 

2. Grass Roots Farmers’ Cooperative Headless Commerce Case Study

Grass Roots is another headless commerce solution using Shopify Plus as its backend checkout technology. On the frontend, the company uses a headless CMS which allows them to provide best-in-class user experiences for their consumers. This includes:

  • Incredibly quick page load times and speed
  • Custom designed experiences based on location 
  • Beautiful reading experiences and overall UX often not possible on an ecommerce technology frontend (that wasn’t what those were built for, after all). 

“Providing the best customer experience to Grass Roots means everything from raising the highest quality meat possible to having experts available when questions come up and to making the ordering experience as seamless as possible,” reads the AOA case study. “When Grass Roots decided to rebrand, they knew they wanted a headless solution on Shopify Plus. This solution has allowed them to be on the cutting edge of technology while creating the best user experience.”

3. Inkbox Headless Commerce Case Study

Finally, Inkbox is yet another headless commerce solution using Shopify Plus as the backend technology. Here is what its build looks like:

The company’s goal was similar to Koala: Build a site with a fantastic UX, while not having to worry about the complexities of a custom-built backend solution. After all, Shopify Plus is one of the best solutions on the market for checkout. 

Instead, use Shopify Plus and invest development resources into a fully custom frontend experience that blows consumers away and makes Inkbox an early adopter of all new technologies. 

How Shogun Frontend Benefits Your Business

This investment isn’t necessarily right for every business, but could be for you if:

  1. You are Mobile Focused. If your brand or client has high levels of mobile traffic, you can see significant increases in conversions when you decrease your page load time. This is especially true if your mobile conversion rate is lower than desktop.
  2. You Spend a Lot of Money on Ads. Page speed has a direct impact on ad performance. Slow-to-load landing pages affect your Quality Score and Ad Rank, ultimately increasing your advertising costs.
  3. You Have Notable Annual Revenue. If your brand or client makes more than $5M USD in annual revenue, the payoff becomes clear based on improved performance.
  4. Have Robust Content Management System Needs. Shogun Frontend is an ideal solution if you’re running up against the limits of the native content management features of your ecommerce platform and exploring headless content management options like CMS and DXPs.

And here's the thing — you don’t have to go the traditional headless commerce route, either. Shogun Frontend was built specifically for brands who want to go headless, but don’t want the added headache of managing a massive tech stack. 

Instead, with Shogun Frontend, you use only two technologies: Shopify and Shogun Frontend. That’s it. 

It’s easy. It’s flexible. It puts the power back in your brand’s hands.

Sign up for a demo of Shogun Frontend today and experience the future of the ecommerce storefront.

Share

Push your storefront further.

Deliver sub-second load times to all of your customers on any device, anywhere.

Tracey Wallace

Tracey Wallace is director of marketing at MarketerHire. Previously, she was the global editor in chief at BigCommerce.

Push your storefront further.

Deliver sub-second load times to all of your customers on any device, anywhere.