Shrimpton Agency

Headless is a buzz word right now. But it's far from a new concept. Headless implies the decoupling of two or more web frameworks, one a backend, an API, the other, the front-end, the website itself that your users interact with.

A headless e-commerce system can be built from scratch by developers using whatever code base they chose (Node.js, React, Vue.js, Ruby On Rails, Laravel ) although Shopify has introduced its own framework known as HYDROGEN, tailored specifically for React developers. Built upon the principles of flexibility and scalability, HYDROGEN empowers React developers to rapidly create storefronts and immersive web experiences while seamlessly integrating with Shopify's robust backend infrastructure. However, by being React-only, Shopify may potentially exclude developers who prefer frameworks like Vue.js, or have adopted Next.js or Nuxt.js as their go-to SSR framework of choice, who's ecosystems have much wider support than the proprietary HYDROGEN.

HYDROGEN provides no boilerplate for this type of system outside of basic PLP's, PDP's and a cart, so how it works, what it does and why it does it would need to be part of a detailed system design process, and would typically be solely focussed on a clear set of end goals, goals that you and your dev team have decided are beyond the capabilities of a custom Shopify Theme. As a business, you're not going to be able to "sit with a freelancer developer" to achieve this type of end product.

However, there are notable trade-offs associated with going headless. By embracing headless architecture, businesses forfeit the simplicity offered by Shopify's native theme editor. This means relinquishing features like WYSIWYG editing, theme live previewing, native customer accounts, access to navigation link lists, CMS sections functionality, version control via different themes, and plug-and-play Shopify Apps.

Pro of going headless:

• You get your web experience, on your terms with your custom features.
• Third party apps aren't ruining the party all over your beautiful UI.
• Developers are joyous as they get to use the latest and greatest Javascript frame works and integrate with dozens of server-side APIs.
• You can finally provide your users with a feature rich customer interface, now they can even change their email address!

So how do you do all that stuff now you've gone headless? Typically a third party CMS could be used for this, either cloud hosted (eg. Prismic, Contentful, Storyblok) or self hosted (Wordpress, Craft). Whats that I hear you say, I need another CMS? Yep, your headless site no longer resides on Shopify but on a server somewhere, that might be as simple and cost effective as a static file server like Netlify, but depending on why you've gone headless in the first place, this probably means that your site is now hosted on a cloud server infrastructure (like Digital Ocean or AWS). What, I need a new server and a CMS now? Yep! Going headless is by no means a simple decision.

Thinking of going headless? Contact us to discuss why and how.