Ricky Panzer, CEO

Dec. 24, 2020

When planning out your eCommerce site, you'll have to make a few high-level decisions from the beginning. The first — which eCommerce platform to use — is also the easiest: Shopify, given its position as the WordPress of eCommerce, has earned its place as the simple default choice. It commands 31 percent of the US eCommerce market, which means that it has the developers, community, and compatibility to make it the most sensible option for all but the most niche uses.

But out of the box, Shopify isn't without its challenges. Like WordPress, Shopify sites use server-side rendering: whenever you visit a page on a Shopify site, the HTML for that page has to be freshly generated on a server, and that HTML has to be sent to the client to be viewed in the browser. Think of server-side rendering like a calling a taxi: A rider phones the taxi dispatcher and gives them a set of instructions, the dispatcher radios the taxi driver and relays that set of instructions, and the driver follows those instructions and makes their way to the rider.

For websites, the result is that, without customization, Shopify is relatively slow, aesthetically limiting, less than totally secure, and expensive to scale. 

So how do you address the platform's shortcomings while still benefiting from all the advantages that have made it the market leader? You go headless.

What is a headless eCommerce site?

A headless eCommerce site maintains the same shopping infrastructure on the back end while using a completely custom static front end that is not rendered anew every single time a user visits the page. Instead, the site uses the Shopify API to retrieve inventory information and displays that information in the browser. Headless sites are less like taxis and more like modern ride-hailing apps: A rider opens Uber or Lyft, puts in an address, and the nearest of a set of drivers already available and ready to go near that location picks them up without the long intermediary step of the dispatcher explaining what to do.

You can go headless using technologies like Gatsby and Nextjs. If you do, there are some major advantages.

The pros of using headless eCommerce

No more Liquid templates

Shopify uses its proprietary language, Liquid, to create templates for users' sites. Liquid templates are like WordPress themes — they're specific to the platform, incredibly difficult to customize, and involve a high level of complexity for completing basic tasks. 

The difference is that unlike WordPress themes, which are a collection of HTML, CSS, and PHP files, Liquid is its own syntax specific to Shopify. That means the pool of experts who actually know how to use it is incredibly limited. The result is that you're more likely to clumsily edit ready-made templates than you are to create one bespoke to your site. You're liable to commit cardinal sins of web development by sticking a lot of !important tags next to your style rules to override default styles rather than building something from the ground up.

Further, Liquid is updated according to Shopify's dictates. The company has, for example, dropped support for Sass, forcing costly updates after entire themes were developed with it. Its rationale at the time was that Sass is slow and, by deprecating it, Shopify sites would be zippier. Luckily, there's a way to have you Sass and your speed, too — in fact, speed is a cornerstone of headless ecommerce.

It's blazing fast

In not waiting on the server to render an entire page and then send it to the client, headless eCommerce sites are able to reduce load times to a fraction of what they are using Shopify's Liquid templates.

That's important for two reasons.

First, visitors are less likely to grow impatient and bounce from your site, and more likely to convert into buyers, newsletter subscribers, and so on. 

Second, it allows you to load heavier assets into the site. That means high-definition graphics and animations load quickly and easily, and sites can be richly interactive without sacrificing speed. Lottie animations, which would drag Shopify sites built with Liquid to a crawl, barely affect headless sites. Here's one example from our experience building a headless eCommerce site for Sway, an energy drink company. Sway's site is packed with Lottie animations, and feels like a fully dynamic, rendered site. But looking at its Lighthouse scores, it still loads at top speeds:

Scores of 90 and up are usually seen among less rich sites, but that's because most of them are server-side rendered. By going headless, you get your dynamism and your speed without compromising on either.

Your SEO team will thank you

Search engines don't just index based on page content and references — they also look at whether your site functions properly, including whether users will be tapping their feet waiting for pages to load. The faster your site is, the friendlier it will be to search engines, and the higher it will rank in users' results.

It's more secure

When sites use server-side rendering, attackers can essentially follow the breadcrumbs left by the requests between the client and the server in the process of with one another. More interactions with the server mean more pores for problems to leak through. In removing this communication, static sites greatly reduce the surface area for security vulnerabilities — there's simply nowhere for attackers to go but the page they're on. This is a core pillar of the Jamstack (a nebula of technologies that includes JavaScript, API's, and Markup) and is one of the most mission-critical reasons for going headless.

Scaling up won't break the bank

Since server-side rendered sites have to generate pages every time users visit them, scaling up your operation has a linear cost curve: more users means more compute power, and when your site reaches 100,000 visitors a day, you can require multiple dedicated servers and foot massvie hosting fees. But static sites only need to handle sending the information to the visitor, meaning that even with high-volume traffic, cost increases are minimal.

The Cons of using headless eCommerce

Going headless still comes with some caveats. They're nothing that can't be worked around, but they're worth considering if you decide to veer off Shopify's beaten path.

Third-party plugins are more limited

Just as abandoning WordPress places the platform's thousands of plugins out of reach, going headless with Shopify means your site will require some custom solutions to integrate the same out-of-the-box functionality. Most of the plugins that Shopify offers work for front ends built with Liquid, and if you use a solution like Nextjs or Gatsby, they'll be incompatible. 

But all is not lost. Plugins that display shipping bars that track whether a user has filled up their cart enough to qualify for free shipping only work with Shopify front ends. But it's not hard to custom build, and we've done it before. And plenty of plugins do work: Yupto, for example, is a plugin for user reviews on products and has an API that lets you use it with full functionality and not have to resort to Liquid templates. It might not be a one-click solution, but it's not too far off. 

It could cost $2,000/month — but it doesn't have to

If you leaving Liquid behind, Shopify will try to make sure you pay for Shopify — $2,000/month, exactly. But that's only if you want certain bells and whistles that come with the normal Shopify experience. Shopify Plus lets you go headless and lets you keep two things: custom domains for your checkout pages, and multipass authentication. The first means that your checkout page will be your own domain, rather than yourdomain.shopify.com. The second lets people go from your own site to the checkout page with a single user account, something that's important when you have return customers who want to store billing and shipping information, accumulate rewards points, and all the other details that come with regular customers.

But neither of these are necessary to go headless. Most people won't notice or care that your checkout-page domain exists under the Shopify banner, and auto-fill features on browsers mean that even if people don't have customer accounts, they can fill in all their info easily anyway. For cultivating customers with rewards systems, it still might pay for shell out for Shopify Pro, but if you built an entire, successful eCommerce site without it, you wouldn't be the first. 

Head towards headless

If you're looking to go headless, give us a ring. We have plenty of experience transitioning companies (like Elegance Brands, Gorilla Hemp and Bevmart) away from the burdens of Liquid templates to solutions that are faster, cleaner, and simply more interesting than what you're likely to build within Shopify's own default toolkit.