eCommerce is like an endless race to improve customer experience. Great online and mobile experiences stem from a vital requirement: speed and performance. While you may offer all the bells and whistles on your site, from personalization to live chat, if pages are slow to load, consumers will go elsewhere.
Therefore, from a technology standpoint, agility is critical – you need code that’s easy to maintain and update to accommodate new features and functionality as your brand grows and as consumer expectations change.
If you’ve been hearing about headless (and progressive web apps, aka PWAs), you may be excited about what this promises: fast, seamless app-like experiences; unlimited creative customer experiences; marketing flexibility; and more control over content management.
How do you know when it might be time to move from your Shopify theme to a headless infrastructure? eHouse Studio participated in a webinar, What the Heck is Headless Commerce?, with Searchspring and Pack Digital to explore this very subject. We discussed the burning questions many brands have about headless: what is it, should we do it, and if yes, how do we get started?
Following are some highlights from the discussion. For more, check out the webinar recording.
Defining headless commerce
Headless means using a different technology for your backend (e.g., inventory, content management) than for your front end (i.e., the “store” that the customer sees). “Going headless” for a Shopify merchant might mean no longer using a Shopify theme for the storefront but still using Shopify for some backend processes like inventory management and checkout.
This approach to building an eCommerce infrastructure has been termed “headless” because it “rips the head off” of an eCommerce platform like Shopify and uses a different technology as the presentation layer/front end. It also has been interpreted to mean that headless provides flexibility for different “heads” or touchpoints, including your website, app, in-store kiosk, etc.
“The vast majority of Shopify sites are not headless. But Shopify gives you the option – via APIs – to take a headless approach.” – Andrew Pizula, Co-founder, Strategy, Pack Digital
How does headless relate to progressive web apps or PWAs? When referring specifically to a headless eCommerce site, the solution is replacing the Shopify template with a progressive web app (PWA). (For more information about PWAs, read our blog post.)
“On one side, flexibility means you can build whatever you want, but the flip side is that the burden is on you to make sure you can manage it. We work with clients to help them navigate the waters of having that much flexibility.” – Andrew Pizula, Co-founder, Strategy, Pack Digital
Should we go headless?
Every brand will have a different journey as a Shopify merchant. While Shopify does make it extremely easy to scale, maybe you’re a Shopify brand trying to push the limits of what your site can do. You have a custom theme and you’ve added a bunch of apps, scripts, and tracking pixels. Eventually, your page load speed and performance take a hit.
To mitigate speed issues, you may be spending hundreds of hours on development in-house or paying an agency to push the speed. When you start thinking: How much more speed can we squeeze out? Are the tradeoffs we’re making worth it? Are we still seeing a return? That may be when you start discussing your options.
“You do hit a point where you can only squeeze out so much. At that point you have to look at other avenues to be able to provide all the bells and whistles that customers expect, as well as the speed.” – Aaron Quinn, CEO, eHouse Studio
However, just because you want speed and performance doesn’t mean you should jump right in. There are various factors, and pros and cons to consider. It’s important to consider how you manage your store, how you manage content, what is your staging environment, and what are your development workflows. All of these things – and the people who manage them – will be affected by a headless approach. The last situation you want to get into is to build a store that’s fast, but harder to manage.
“If you have a highly customized site, it gets slower and you’ll see the graph drop off. With headless coupled with PWA, you can get off that curve and into a space where you couldn’t play before.” - Will Warren, CTO, Searchspring
How to get started
When you remove the head, the burden is on the merchant to figure out what the head is – and how to build it so it is scalable and manageable for your team. However, striking out on your own is no longer a necessary risk. Similar to the changes SaaS has enabled, there are platforms available now that make headless realistic for many more brands.
“You absolutely need a platform for going headless. It’s the same reason you use Shopify – a platform reduces complexity and difficulty and makes headless more accessible for more brands.” - Aaron Quinn, CEO, eHouse Studio
To get a clearer picture if headless makes sense for your brand right now, first think about your goals. What are you trying to accomplish? Increased site speed? More flexible content management? Better development workflows? It’s important to define the goals and benefits to determine what system you want to build and justify the upfront costs.
Also, an overhaul like headless should be a team effort. You’ll need buy-in from all the stakeholders who will maintain and use the system, like eCommerce and marketing. Bring them in early, understand what their day-to-day looks like now and could look like with headless. Have them participate in vendor demos.