Rethinking Headless commerce

Rediscovering Shopify's power

Rediscovering Shopify's power

Alexine Maurin

7 minute read11 Dec 2023

Ecommerce is a sector of endless evolution, and Shopify definitely leads the way. With a bold investment of $1.503 billion in research and development just in 2022, Shopify is constantly setting new standards. Within this ever-changing landscape, our agency has adapted and evolved. Going headless once stood as the innovative and right choice for many, crucial for managing extensive, dynamic content and reaching into multi-regional markets. Our agency has been at the forefront, pioneering headless solutions since early 2018, meeting complex needs head-on.

However, the narrative is evolving. New features like Shopify Markets and metaobjects have brought Native Shopify to become a robust choice for a broader range of needs. There was a time when our default choice for brands selling in more than three languages was headless commerce. However, since the introduction of Shopify Markets, we've pivoted towards Native Shopify as our primary approach. By “Native Shopify”, we mean the classic version of the Shopify platform (in its integrated and unmodified form). It's no longer an obvious choice between headless and native; it's about finding what fits just right for each unique brand, considering their needs and budget.

In the upcoming sections, we'll explore both architectures in detail. We'll examine the key factors influencing this important decision and explain how our approach has evolved.

But keep in mind, with Shopify's relentless innovation, the conversation is far from over. We're here to cut through the noise, guide you through this shifting landscape, and arm you with the know-how for the exciting road ahead.

Headless and Native: Understanding the basics

In the realm of Shopify ecommerce development, understanding the difference between headless and native setups is crucial. Headless is all about flexibility, where the front end—or the user interface—functions independently from the backend. This isn't just a structural change; it's a strategic move. By detaching these elements, merchants get the potential to employ various frontend frameworks, such as React, Gatsby.js, or Next.js. This allows for the creation of unique and engaging customer experiences that surpass the limitations of traditional ecommerce platform frontends. Previously, headless was the go-to choice for brands looking to integrate the latest web technologies, manage content across diverse channels, or develop highly personalized user journeys, all powered by the robust capabilities of a platform like Shopify.

Yet, the ecommerce world doesn't stand still. The once-clear divide between headless and native Shopify is blurring. As the technologies evolve, so does our approach.

Switching focus to native Shopify architecture, known for its seamless and unified approach, we see a different narrative. It integrates the front end and back end into a unified whole. Shopify Plus emerges as a standout within this realm, especially appealing to high-volume businesses. It takes what's standard and elevates it, offering enhanced customization through exclusive APIs, advanced security, and sophisticated tools like Shopify Flow. This setup is designed to handle the complexities of global ecommerce operations and to offer extensive scalability.

So, where does this lead us in the ongoing headless vs. native debate? As we continue to witness rapid changes in the ecommerce landscape, we must ask: Is headless still the crown jewel of ecommerce, or is native Shopify closing the gap? Stick around as we delve into this topic further, putting headless architecture under the microscope against the innovation in Shopify's built-in capabilities.

Is Headless still the gold standard for ecommerce? 

As the ecommerce landscape evolves, we're seeing a reevaluation of headless architecture's once-clear dominance. Headless commerce, famed for its flexibility and performance optimization, still holds appeal for businesses needing deep customization and integration with advanced web technologies. However, the gap between headless and native Shopify functionalities is narrowing.

This year, we saw big names like Mr Beast and Glossier shifting to native Shopify from a previous headless setup, a testament to the platform's evolved functionalities. Their moves highlight Shopify's expanded appeal, offering advanced customization and operational efficiency, once exclusive to headless setups. Similarly, Naduvi, a key name in the home and living space, recently made this shift, reflecting Shopify's capability to adapt to a spectrum of business needs.

This emerging trend among diverse brands points to a broader industry shift towards more streamlined, efficient, and cost-effective ecommerce solutions. More and more businesses are choosing no-code and low-code platforms, valuing how they simplify operations and free up teams to focus on strategy and content. This change shows a growing desire for simplicity in ecommerce, where teams can prioritize creative and strategic growth over technical details.

As we witness this tendency towards streamlined ecommerce solutions, it's crucial to understand the nuances of the available architectures. Next, we'll present a detailed checklist, highlighting the advantages and disadvantages of both headless and native Shopify, to provide a clearer perspective for your business strategy.
Shopify's advancements, particularly in its ability to manage multiple languages and currencies, are changing the game. With the roll-out of features like metaobjects, enhanced metafields, and Shopify Markets, native Shopify has stepped up in recent years. This shift is crucial for businesses considering the costs and complexities associated with maintaining a headless setup.

Rethinking Headless commerce: Rediscovering Shopify's power Rethinking Headless commerce: Rediscovering Shopify's power

Headless vs. Native: A comparative checklist

Headless Architecture:

Advantages:

  • Performance optimization: Using front-end technologies like React (Next.JS) enhances site speed and efficiency.
  • Custom CMS integration: Allows for more robust content management systems beyond Shopify's scope, catering to specific roles or market content needs.
  • Flexibility in frontend development: Freedom to use various frontend technologies for tailored customer experiences.
  • Composable ecommerce stack: Offers the freedom for rapid feature development and variant creation.
  • Improved site speed: Significant improvements in page loading times, leading to better user experience and higher conversions.
  • Hireability: Easier to find developers skilled in popular technologies like React, compared to specialized Liquid developers for Shopify.

Disadvantages:

  • Higher costs: Substantial investment required for development and maintenance.
  • Dependency on technical team: Not necessarily an in-house team, but costs can escalate if maintained by an agency.
  • Higher technical overhead: The need for constant updates and security fixes.

Native Shopify Architecture:

Advantages:

  • User-friendly: Integrated, easy-to-use platform, ideal for businesses prioritizing simplicity.
  • Cost-effective: Reduces the need for extensive custom development and maintenance.
  • Seamless integration: Offers cohesive front and back-end integration.
  • Ongoing Shopify support: Benefits from continuous updates and improvements by Shopify.
  • Advanced features in Shopify Plus: Enhanced customization, security, and workflow management tools.
  • Simplicity for clients: Easier for clients to maintain and update their website post-delivery.
  • Scalability: Particularly with Shopify Plus, suitable for high-volume merchants.
  • Easy App integration: Seamless integration of Shopify apps into the frontend.

Disadvantages:

  • Limited advanced customization: While any design can be built in both headless and native, new technologies like server-side rendering are mainly possible in a headless setup.
  • Dependence on Shopify's roadmap: While both native and headless are influenced by Shopify's updates and features, native setups may have less flexibility to create workarounds for limitations.
  • Potential for slower performance: May not match the speed optimizations possible with headless setups.

Our current position on Headless

At Ask Phill, our stance on headless commerce is dynamic, aligning with the evolving needs of our clients and the capabilities of Shopify. We've seen headless architecture drive success for clients like Mr Marvis, where the need for high performance and specific customizations justified the transition. Their move to headless resulted in significantly faster site speed and an impressive boost in conversions, a topic we delve into with their ecommerce manager in our podcast here.

On the other hand, for clients like FEST and No Label, the shift from headless to native Shopify was a strategic choice based on a desire for more streamlined, cost-effective solutions. These transitions were not only about cost savings but also about aligning with their operational capabilities, as we discuss in detail in our case study on FEST here.

Our current approach at Ask Phill involves a nuanced assessment of each client's unique needs and capabilities. As Shopify custom development experts, we're focused on finding the right balance between headless and native Shopify solutions. Key considerations in our decision-making process include:

  • Whether the client has a dedicated technical team.
  • The client's preference between using their own CMS system and Shopify's integrated solutions.
  • Any pre-existing preference or plan for a headless setup.

While we recognize the value of headless commerce for performance, customization, and specific technical requirements, our strategy has evolved. Post the introduction of Shopify Markets, Native Shopify has become our primary recommendation for brands operating in multiple languages. However, we still consider headless solutions in situations where:

  • Native Shopify can’t fulfill certain unique feature requirements.
  • There's a need for an external CMS to provide role-specific content editing, not offered by Shopify’s native tools.
  • The client has a team skilled in front-end frameworks other than Shopify’s Liquid.

In conclusion, while headless commerce remains a powerful tool for certain scenarios, the advancements in Native Shopify are making it an increasingly attractive choice for a wider range of our clients.

Rethinking Headless commerce: Rediscovering Shopify's power Rethinking Headless commerce: Rediscovering Shopify's power

Looking forward

Looking ahead, we've identified critical enhancements in Shopify that could greatly diminish the need for headless commerce. The enhancements we're eagerly waiting for to redefine Shopify are:

1. Enhanced CMS capabilities: Expanding Shopify’s CMS functionalities to better support diverse languages and specific roles per market, allowing for more targeted content management.

2. React for front-ends: Introducing the ability to develop front-ends using React alongside Liquid, broadening design and interaction possibilities.

3. Streamlined A/B testing: Incorporating efficient, built-in A/B testing capabilities for more data-driven optimizations.

4. Server-side personalization: Bringing in server-side rendered personalization for different customer groups.

Such advancements would catapult native Shopify into the forefront, rendering headless options redundant for most ecommerce needs. At Ask Phill, we’re excited about these potential developments and remain committed to guiding our clients towards the most innovative and efficient ecommerce solutions.

Want to know more?

For the latest in Shopify ecommerce development trends, sign up to the Ask Phill newsletter below. It’s a monthly roundup of what’s hot right now from right across the industry, delivered directly to your inbox.

Do you want to
stay updated?

Yes

Stay ahead

Subscribe to our newsletter for a roundup of the latest in ecommerce, straight to your inbox.