Headless Shopify Vs. Shopify's Native Liquid Templates - Choosing the right approach for your brand

A brand's online presence plays a pivotal role in its success, so when considering which front-end development approach is right for your brand, it comes down to two approaches: Shopify Headless using a React Hydrogen framework, or the more traditional Shopify Native Liquid Template.

In this article, we explore the differences between these two approaches, what they are, and which might be better for your brand.

What is Headless?

In the context of Shopify, Headless commerce is an e-commerce architecture where the front end presentation layer is separated from the back end functionality. Shopify uses a Headless architecture powered by React Hydrogen. It involves decoupling the front end from the back end, creating a clear separation, giving a brand unparalleled flexibility and customisation options.

We’d like to dispel some common misconceptions and arguments against Headless, emphasising that the decision to go Headless should be based on your project's specific functional requirements, not because Headless is a buzzword for “the future of front end development”.

1. URL Structures: One clear advantage of Headless is the flexibility to change URL structures, which can be crucial for preserving organic ranking when migrating a site heavily reliant on existing SEO. This is not possible with Shopify Native.
2. Amazing Performance: While Headless can lead to remarkable performance improvements, native Shopify themes can also achieve excellent page load times with the right optimisations. Badly built headless solutions can however have awful load speeds, so much so that you wish you’d built on a native Shopify theme.
3. Unrestricted UX: The flexibility to introduce any UX is easier in a Headless approach, but it's not impossible to achieve within Shopify themes using technologies like VueJS or React.?
4. Content Management: Headless excels at separating content management from theme management, but Shopify's native theme sections and third-party apps like Shogun and Syncio provide viable alternatives for managing rich content.

Brands love this architecture because it unlocks the creative freedom to build unique storefront experiences that are typically not possible on monolithic platforms. Developers are eager to go Headless because it offers a unique level of development control and gives them the freedom to build stores with much more flexibility and tech-stack control.

It’s important to consider the downsides of a Headless approach though too:

1. Loss of control: Moving to Headless might result in a more specialised development stack and a potential loss of control over the theme and CMS. However, due diligence, maintaining ownership of architecture, and trusting your Shopify Agency will go a long way to mitigate this.?
2. Loss of App Functionality & Shopify Updates: Going Headless can limit your ability to easily install Shopify apps. Shopify updates can still be applied to the back end but not to the front end, so apps that work seamlessly with Shopify themes may not work with a Headless front end.
3. Complexity: Headless can introduce more moving parts, but it doesn't necessarily make the project more complex; it depends on the nature of the project itself and the quality of the build.
4. Agility: There might be a loss of agility in smaller changes due to the need for more planning and coordination, but Headless can lead to quicker deployment of larger features and better agility on a larger scale.
5. Cost: While the initial build of a Headless store can be more expensive, the total cost of running a Headless solution is all dependent on the tech stack. The total cost overtime can become more favourable due to development efficiency, code reuse, and reduced risk of code degradation, but only really if you plan to continuously invest in your tech stack, new feature rollout and innovation to stay ahead of the rest.

“Shopify covers 80% of our needs, and I think that’s common across all merchants. It’s that next 20% where Headless comes in and where we really spend our time. What we’re trying to do is let Shopify handle the stuff they do so well, and we can focus on what makes us unique. That’s where we’ve really gone with our thinking around being headless.”

— Benjamin Sehl, Co-founder of Kotn

What is Shopify Native Liquid Templates?

The traditional eCommerce model relies on an integrated platform that combines the front end user interface with the back end infrastructure and database. Within this architecture, the front end code, templates and design elements are intricately connected with the back end code responsible for handling checkout processes, payment transactions, inventory management, and other core functionalities.?

When shoppers visit a product page, the front and back end code collaborate seamlessly, extracting data from the database to dynamically render the page. The templating system and content management tools provided by Shopify’s native platform facilitate easy customisation of site content without the need to delve into the core code.

However, this architectural approach comes with a tradeoff – brands find themselves confined to the templates and functionalities dictated by the chosen eCommerce platform.

So what are the advantages of a Traditional Commerce approach like Shopify Native Liquid Templates?

1. Easier to Set Up and Implement: The primary advantage of traditional eCommerce platforms lies in their provision of an out-of-the-box solution that can be swiftly set up. Equipped with pre-built templates and integrations, most brands can establish basic online stores within weeks, even without extensive coding expertise. Shopify’s Native eCommerce platform offers a rapid and uncomplicated solution to establishing an online presence quickly, enabling businesses to capitalise and expand in the eCommerce market.
2. Integrated Content Management System: Thanks to the built-in CMS, content changes and updates are also straightforward with Shopify’s traditional eCommerce approach. Merchants can use drag-and-drop editors to modify content without the help of a developer. This simplifies marketing efforts like launching campaigns, creating landing pages, and optimising product descriptions for SEO.
3. Large Community of Developers and Solutions: The maturity of traditional platforms means there is a thriving ecosystem of developers, partners, and apps on Shopify’s marketplace. Merchants can enhance functionality by incorporating plugins and apps to scale their ecommerce business

There are always advantages and disadvantages to any approach, so here are some cons for a Traditional Commerce approach:

1. Limited Design Freedom: The primary drawback of the traditional eCommerce approach is the restricted design flexibility. Brands find themselves working within the confines of available templates and components. Visual customisation of a Shopify Theme is feasible, achieving highly distinctive experiences requires custom theme development or HTML/CSS overrides which often lead to constraints on overall UI.?
2. Challenging User Experience Customisation: Beyond design constraints, traditional eCommerce platforms present challenges in customising the complete user experience and journey. Brands encounter difficulties in experimenting with innovative layouts, implementing personalised recommendations, or tailoring flows according to their specific needs. Consequently, merchants find themselves reliant on the UX capabilities provided by the platform, with advanced personalisation requiring a custom development approach.
3. Reliance on Platform Provider: Due to the tight coupling of the front and back end, brands utilising traditional eCommerce platforms are heavily dependent on the core platform provider. Swapping out components or connectors is not easily accomplished, often leading to migration complexities. Moreover, the provider holds control over the development roadmap. In cases where a feature crucial to the brand is discontinued, the options are limited, forcing the brand to either accept the change or undergo the challenging process of migrating to a different platform.

In summary, there are a lot of considerations surrounding this topic, particularly in determining the best implementation for each brand’s specific project requirements.

The comparison between traditional and Headless eCommerce reveals two distinct technological approaches, each with its own merits and drawbacks. There is no universally superior choice; the most suitable option hinges on aligning with specific business goals, resources, and capabilities.

Smaller brands often find traditional commerce platforms advantageous for their quick online establishment, while larger brands, aiming for advanced flexibility and omnichannel personalisation, tend to lean towards the headless approach. This also could be down to the costs involved in taking the Headless approach.?

As eCommerce technology continues to evolve, both options are likely to become more customisable and business-friendly, making both approaches equality important to consider in equity weight.?

The crucial takeaway is that brands need to thoroughly evaluate their unique circumstances to determine whether traditional or Headless best positions their business for innovation and growth in the present and future.

By aligning goals and capabilities with the appropriate model, merchants can construct the optimal foundation to meet current customer needs and continually enhance experiences in the years to come.

If you’ve still got questions, and are looking for advice or an agency partner to assist you with your next eCommerce project feel free to email [email protected] or book a meeting with me.