As core web vitals and page performance become more crucial to conversion and page rank, headless ecommerce is becoming the top option for brands looking to maximize their DTC online experience. Headless ecommerce breaks up the interdependence between the front end technology, what users visually see, and the backend, which is composed of databases, servers, and processes. With a headless setup, you’re using technologies that work independently, but remain connected through the use of API’s. This means you can freely make changes to the front end without worrying about what impacts it may have on the backend.
Customization is the top reason we hear clients requesting a headless stack. Many worry about their website looking like every other Shopify website, and rightly so, many brands opt for a premade template in order to save costs. With the release of Shopify 2.0, this allows for even more flexibility on the front end. While Shopify does have a rigid URL structure with collections, blogs, products, and checkout, they’ve made content-editing more flexible with page-level blocks available on all pages. Understandably so, this may still not be enough for brands looking for deeper customization. This is where headless ecommerce comes in, and if you’re not entirely sure of all the benefits, and some of the cons, read on for our thoughts and recommendations.
Benefits of Headless Ecommerce
User Experience
Having a headless ecommerce experience means having total control over the front end, including sitemap and URL Structure, page templates, and content authoring. With a monolithic approach to Shopify for example, you are contained to their page-level requirements for products, collections, blogs, and checkout. By decoupling the user experience, developers have total control over the look and feel of the website. This is a critical factor for companies who don’t want to be boxed in with the limitations of a single CMS.
Lightning quick Page Speed
Page speed will make or break a site experience. Google knows this too, and they’ve made Core Web Vitals, which measures your page performance, a primary signal for search rankings. Website visitors expect pages to load instantly these days. Conversion rate is directly tied to page performance. In fact, studies have shown that your conversion rate can drop an average of 4.5%, for each additional second of load time. You can test your page speed here to get an idea of your performance. With a headless ecommerce site, you can take advantage of server-side rendering. This allows for pre-populating data directly on the server, instead of making multiple server calls to load your images, videos, and information. The result is having pages that load almost instantly upon click. Compare that to the lag time and the white flash you get as components and content stagger to load in. It’s a much more seamless experience. Another popular rendering method is static site generation. Our favorite static generator is Gatsby.js, which is a react-based framework. Gatsby.js works nicely with GraphQL to layer in your data and other API's. Craft CMS and Shopify are both platforms that leverage the GraphQL query system. You can view an example of how to setup Craft CMS + Gatsbyjs here.
Richer Experiences
Websites are no longer just brochureware, and creating a branded experience that’s robust, dynamic, and smart is no easy task with a monolithic platform. This creates a heavy burden on the developer to find alternative solutions for displaying content without impacting performance. Sure there are ways to get around heavy loads, like lazy loading and script deferrals, but this can get complicated when pages have a lot of content. With the use of server-side rendering or a static site generator, it’s a moot issue.
Increased ROI
Page performance is a major variable when calculating your conversion rate, along with other key performance indicators such as bounce rate, clickthrough rate, page rank, returning visitors, average duration, etc. Google prioritizes pages with faster loading times, thus increasing your search visibility and keyword positions. Users can also navigate the site faster, check out faster, and ultimately accomplish more with websites that are statically rendered. Less time is spent on loading, and more time is spent shopping and researching. At the enterprise level with high transaction websites, shaving a second off load times can translate to millions of dollars in additional revenue.
Heavier upfront costs for Headless Ecommerce
While headless ecommerce can accelerate your growth, it doesn’t come without its share of downsides. The biggest negative impact of headless ecommerce is the increase in costs for developing and maintaining a website. You’re essentially paying additional for every platform and technology that’s bundled in your headless build. This can add up to hundreds, if not thousands of dollars in third party costs on a monthly basis. A decoupled experience means additional hosting overhead for the frontend. Secondly, development costs are likely to double or triple due to complexity of the build. Vercel, Netlify, and Gatsby Cloud are some of the most popular platforms for deploying and previewing a static website. These platforms make it easy to deploy a headless website very quickly. Shopify recently launched Hydrogen, which allows you to launch a Shopify build using react components in just a few clicks.
Lack of native app integrations
Since the experience is not being built in with the native CMS templating engine, third party applications can get a little more complicated. This means every integration requires custom coding and developer knowledge of API frameworks. Every technology has its own unique documentation and API tooling to learn and implement, where this would normally be done at the click of an ‘install’ button within your CMS.
Best Headless stack for Shopify
There are several different ways to stack a headless Shopify website. Some our favorite front-end libraries used with a headless Shopify build include:
Here are a few real world examples:
Contentful + Shopify Plus
Staples Canada
Contentful + Shopify Plus
Gatsby.js + Shopify
Rachio
Gatsby.js + Shopify
Nuxt.js + Netifly + Sanity + Shopify
Recess
Nuxt.js + Shopify
Gatsby.js + Netifly + Sanity + Shopify
Off Limits
Off Limits
React.js + Shopify
Rothy’s
Rothy's
