Headless Shopify builds: Is additional technical skill required?

As the operator of an e-commerce store, you shouldn’t necessarily need additional technical abilities or personnel to manage the day to day e-commerce operations of a Headless Shopify store (in contrast with a theme-based Shopify store). More on that here.

But the team you select to develop or maintain your Headless store will require a different set of skills, and should have experience in the full breadth of technologies that these builds typically utilize. 

Headless Shopify is very different from “just” Shopify. It’s not like a feature you can just turn on, nor is it comparable to building a traditional store on Shopify. Headless e-commerce stores are broadly custom stores, that happen to use a specific backend or e-commerce engine to source data and send it to. But data is just that: data. The entire user experience, on-site personalization, and how end-users perceive and interact with your store is built from the ground-up, usually in JavaScript.

Frameworks (like Hydrogen) and starters (like Vue Storefront) exist to help speed up the development process, but it’s still custom—this is not a game of apps and mere templating.

The development, technical servicing, and ongoing maintenance of a headless build is a very different process from that of a traditional Shopify store. While theming and configuring a standard Shopify store has a fairly accessible barrier to entry, headless Shopify builds require a deep understanding of full-stack JavaScript development, GraphQL queries and mutations, and generally — complex system architecture.

Based on our past client experience, this type of project is less about custom-skinning Shopify, and more about solving an entrenched business challenge that traditional e-commerce platforms only help to perpetuate. Most of our clients choose headless as a route to addressing their complex needs and the unique requirements of their store, above anything else.

There are (of course) some similarities shared by traditional & headless builds — Shopify will remain a primary backend application for certain storefront data and functionality. However, a large proportion of store development & ongoing maintenance will be moved away from, or exist outside of, Shopify.

What are the technical skills required to build a Headless Shopify store?

The required skill-set to build a complete and production-grade Headless Shopify store differs quite a bit in comparison to a cookie-cutter storefront powered by a combination of Liquid templating and Shopify Apps. Headless builds are starkly different in terms of architecture and system/stack design, and involve working with a much wider spectrum of technologies overall.

With a standard theme-based store, your agency or development team is typically working solely within the Shopify platform itself to conduct the majority of development and maintenance-related tasks. Perhaps some additional technologies such as Github (for source control of the Shopify Liquid theme and any custom Shopify apps), and Figma (for design of the storefront) will be used, but the store itself will be built primarily with Shopify platform serving as the overarching component of the "technology stack".

This contrasts with a headless build, where developers will be spending far more time outside of Shopify, working with a variety of different tech. Usually this will be made up of a JavaScript frontend framework, its server (if it has one, like Next.js does), a headless CMS, continuous delivery tools, S3 buckets (for static file storage), and various other microservices.

Since headless builds also tend to utilize a variety of additional integrations for the delivery of specific features, (like on-site search, product configurators, monitoring, edge delivery, authentication, etc), a lot of API work is also involved in a headless Shopify build. This API work doesn't just revolve around Shopify's own APIs, but also applies to any additional APIs related to other microservices within the build, such as the CMS, an external search platform, an integrated CRM that sends data from the frontend, etc.

We're the experts in Headless Shopify.

Your search for answers ends here. Discover our services.

Explore Headless Shopify Services

To develop a headless build, you'll need a team who is competent in a range of different technologies and infrastructure services — JavaScript, API development, complex content modelling and cross-application integrations are just some of the key requirements.

Assembling a team of the right people can be challenging, which is why we’ve made it easy — contact us to discuss moving to Shopify Headless.

Stack technologies & associated technical skill required

Naturally, headless builds can vary in complexity, and there's a huge range of potential technologies that can be used to create them. When seeking solutions from an agency or software solutions provider, you're likely to receive proposals that recommend the integration of multiple technologies into the build. These recommendations will differ between agencies & development teams — usually a result of differing experience between agencies and dependent on the tools they believe will deliver the best results.

Within a headless Shopify build, you can expect the following minimum components for a tech stack. When seeking an agency, development team, or solutions partner, ensure that they have sound experience in the following areas.

The Shopify platform

Every headless build has a different relationship with Shopify, with some utilizing the platform for all backend activities, and others only partially. Nonetheless, solid experience with Shopify, its APIs, and its lifecycle as a platform is a worthwhile prerequisite.

What to look for in a development team: 
Experience in Shopify at both the platform and API level, as well as strong knowledge of GraphQL and an understanding of Webhooks. This will likely form a large part of the build, contributing directly to its success.

Headless CMS

Headless builds with Shopify usually involve a separate Headless CMS—development and implementation of which requires certain skills and past experience.

There are numerous candidates for a potential CMS, and it genuinely does take prior hands-on experience to be able to effectively identify a best-fit headless CMS for the given project requirements and objectives.

Working with a Headless CMS will generally involve content modelling, schema creation, media management, and overall application architecture. This is in addition to various configuration-related tasks such as access and permissions management, API settings, and environment configuration. You can also expect the need for provider/adapter development, S3 bucket (or equivalent) configuration, and potentially the hardening of the CMS if self-hosted.

Some projects have particularly complex requirements, which may call for development of custom features and hooks within the headless CMS, or even a custom editorial workflow entirely. This is often the case when complex or nuanced data needs to be stored in the Headless CMS, such as product parameters that power an on-site product configurator.

A team who has experience in implementing production-grade content management experiences also plays a key part, as the headless CMS is likely to be used by your own team on an ongoing and frequent basis — and therefore needs to be intuitive in its content management workflow and ease of use. 

API related work will also apply for the headless CMS, which may be REST-based (such as Contentful's Delivery API), GraphQL-based (like Strapi's GraphQL API), or using some other proprietary query language as is the case with certain headless content management systems (eg Sanity's GROQ).

If the CMS is to be hosted on your company’s own servers (referred to as self-hosting), your dev team will also need a solid understanding of how best to secure the application (hardening) and implement protections against attacks or unintended data exposure.

What to look for in a development team: 
Look for a team with strong experience in a variety of Headless CMSs, as well as familiarity with data sourcing via APIs using REST, GraphQL, and proprietary query languages. Experience with complex content modeling, schema creation, and visual editing will go a long way. For very nuanced requirements, consider the team's experience in custom development, which may also be required to hook into the headless CMS to extend its functionality.

JavaScript

JavaScript replaces theming in headless Shopify stores, and forms the backbone of the frontend and any of its integrations. This makes user experience design a completely different beast for decoupled storefronts, and takes narrow expertise in order to realize. Languages such as Liquid and jQuery become completely redundant as they’re replaced with a more modern, progressive approach based on modular components and state-based interface management. Even simpler things such as building contact forms, styling the storefront, and optimizing it for performance will be done in a completely different way than you might be used to with Liquid templates and Apps.

Beyond the frontend, several JS frameworks also come with a server, as is the case with Next.js. Such servers are Node-based, which although very similar to JavaScript, has nuances and best practices of its own.

This entire JavaScript-first approach is a far cry from traditional Shopify theming.

What to look for in a development team: 
With a Headless Shopify build, you're looking for strong experience in JavaScript frontend frameworks and all that entails. This includes a combination of the following:

• JavaScript framework competence
• Experience in the development and maintaining of highly-reusable JavaScript components
• Optionally, but ideally, familiarity and preference for Typescript
• Experience in popular design, UI and component libraries for JavaScript frameworks (such as Tailwind, Antd, MUI, shadcn, etc)
• Experience in styling JavaScript frontends, which is often done differently in JavaScript builds than via manual CSS files
• Strong understanding of security best-practices when working with features like user authentication and data retrieval via API to prevent vulnerabilities occurring from the frontend, particularly where this involves the client-side
• Knowledge and experience in optimization and performance auditing of JavaScript frontends
• Strong grasp of the various available rendering methods, and when each should be utilized for best performance, given the build's requirements
• Familiarity and experience with resolving complex Javascript dependencies and maintenance

The Javascript frontend is perhaps the most crucial part of the tech stack for a Headless Shopify build, because it's the primary touchpoint by which customers will engage with your store. Experience in Shopify alone just won't cut it if you're looking to implement a headless build, but rather requires experts in JavaScript and API integration. The other components of the stack can be potentially "cobbled together" by someone with less experience, but issues with the storefront could lead to drastic impediment on engagement and sales. It's therefore crucial to the project's success. 

Given that many Headless CMS's are also based on a combination of JavaScript and Node.js, and therefore a large proportion of your stack, JavaScript prowess is a strong prerequisite. 

Informal chat? Works for us. 🤘

Contact Cocoon for a no-cost, no-obligation consultation.

Let's talk Shopify

Platforms & Pipelines

It’ll usually be the case that each individual service within the headless tech stack is given its own build & deployment pipeline. This allows each component to be built according to its own environment and dependency requirements, and to be deployed independently to the most suitable destination. For instance, Vercel is an obvious choice for a Next.js storefront, while a self-hosted Headless CMS like Strapi would be better suited to a custom-configured Node.js environment hosted on a cloud platform like DigitalOcean.

Your development team should have knowledge and expertise in configuring and maintaining continuous integration pipelines, as these will form a key part of the infrastructure.

Without correctly configured pipelines, updates to the store may fail to reach production, and dependency issues may linger unsolved.

What to look for in a development team: 
Look for a development team with robust experience in the configuring and servicing of build & deployment pipelines, including how these will differ across the different technologies that make up your ideal stack. This includes experience in troubleshooting of dependency issues, as well as a host of potential build-related mishaps that can occur when something's awry.
 

For store owners and operators (Shopify Merchants)

Obviously, going headless with Shopify involves some pretty fundamental changes to your tech stack. And this can change how, and where, you manage specific elements of your store. If a headless CMS is introduced into the stack, for instance, you’ll be managing a lot more content over there when you may have previously done this through Shopify. If the frontend is static, there might also be a slight delay before content is published on the storefront. 

These are generally fairly minor changes to get used to, and your team is likely to acclimatize in just a few weeks. By choosing a solid development partner who understands the importance of stress-free day to day e-commerce management, you can save yourself a lot of headache with a workflow that ends up working better for you than before. Contact us today to discuss a Headless Shopify build.