Your eCommerce site isn’t performing. You’ve tried all the usual fixes. Conclusion: you need a different approach. Should you go with Shopify Online Store 2.0? What about headless? Headless is becoming more common thanks to new tools and hosting, but it’s still not for everyone. Or, in another scenario, maybe you already went headless but the way it was built resulted in a costly headache.
What’s the right move to make? Well, it depends. You have to understand your options, identify your priorities and constraints, and weigh the pros and cons.
A variety of PaaS flavors
If you’re thinking about migrating to Shopify or upgrading your existing Shopify site, you’re likely considering two options: a customizable theme using Shopify Online Store 2.0 or going headless. With headless, there are three basic strategies: Shopify Hydrogen, a third-party platform like Pack, or some combination of the two. Quick recap:
- Shopify Online Store 2.0: This is Shopify’s latest release of new features and feature improvements that make themes and theme apps easier to build, more flexible, and easier to maintain. It enables customization on every page, including product pages and landing pages. It also makes it easier and cleaner to integrate (and uninstall) apps in the storefront.
- Shopify Hydrogen: This is a framework and set of tools developers can use to make building headless storefronts easier, faster, and more cost-efficient, especially for merchants already on Shopify. It is completely separate from Shopify Online Store 2.0 and uses a different framework (React vs. Liquid).
- Third-party headless platform: There are solutions other than Hydrogen that integrate with Shopify and provide similar functionality. The additional benefit of some of these platforms is that they provide front-end infrastructure to make the headless storefront more user-friendly for eCommerce and marketing teams to manage.
- Hybrid approach: Hydrogen + third-party platform: A key benefit of headless is its flexibility, enabling brands to customize their tech stack. For example, brands that are already using Hydrogen or a web framework like Remix can choose to host Hydrogen in any environment with a third-party CMS or within a platform like Pack.
Tip: Who says you have to go “all-in” on headless or not? You don’t! You can migrate to Hydrogen incrementally; for example, first targeting product detail pages (PDPs), collections, and/or unique feature sets (i.e., product compare).
The headless value-prop: The myth exposed
We would like to end a common misperception about headless: headless has no particular advantage for customizing your storefront design. You can get the control you want over your storefront design using a much simpler-to-implement, customizable Shopify Online Store 2.0 theme. The key benefit of headless (implemented correctly) is – hands down – speed and performance. (The second most important benefit is total flexibility to integrate whatever technologies and tools you want to use.)
In our opinion, headless should only be implemented if it solves specific business problems or supports specific business goals. It’s important to weigh the trade-offs and potential additional costs. Some good business cases for headless may include increasing conversions, controlling customer experience and content everywhere to enable an omnichannel strategy, and the ability to better customize your tech stack to maximize efficiency and lower costs.
The technology you choose – whether you go headless or not – should be supported with solid analysis and a projection of what the return on your investment will be.
Shopify Online Store 2.0 vs. Headless: The Pros and Cons
Following are some key pros and cons of Shopify Online Store 2.0 and headless that you will want to consider.
👍 Pros of Shopify Online Store 2.0:
- Lower upfront costs
- Intuitive for non-technical users to use and manage the storefront
- Apps easily extend features on the site
- Easy integration of theme-based Shopify updates
- Fewer technical issues thanks to regular Shopify platform updates
👍 Pros of Headless:
- More choices for tech stack
- More flexibility for developers to build with different tools and languages
- More flexibility to integrate preferred features and tools
- More modular component system
- More performant site
- Greater ability to optimize the codebase and site for SEO and performance rankings based on Google Lighthouse recommendations
- Greater control over URL structures
👎 Cons of Shopify Online Store 2.0:
- Less control over tech stack
- Less performant and less control over performance
- Fewer options to optimize the codebase and site for SEO and performance rankings based on Google Lighthouse recommendations
- Highly dependent on third-party apps/integrations for building complex or highly personalized experiences (which can slow down the site)
👎 Cons of Headless:
- More choices for tech stack may mean more chances to make the “wrong” choice
- More development is required upfront
- More time is required to integrate third-party integrations into the headless framework using APIs (vs. installing an app)
- Not as user-friendly for non-technical users to manage the storefront
- No platform updates like on Shopify (except for Checkout)
- No Shopify server-side tracking functionality unless using Shopify Hydrogen
- Support required to ensure API requests remain compliant (Shopify does four API updates/year; some of them can require code updates for the site to continue working)
Identifying your priorities
You can have a gorgeous, customized, and fast site that delivers amazing customer experiences and higher conversions with either Shopify Online Store 2.0 or headless. What you choose depends on a number of different factors. Use the checklist below to think through your goals, priorities, and constraints to start to identify which approach might make more sense for your business.
|
|
If you have more checks on this side, consider Shopify Online Store 2.0 | If you have more checks on this side, consider headless |
Talk to your agency
Now that you have background information on options and have done some preliminary thinking, you’re ready to dive deeper. Do your due diligence: define your current challenges (e.g., slow site, high maintenance costs, headless implementation not working out) and analyze the business case for implementing one or the other approach. Then it’s time to talk to your agency partner – like us! We’re happy to help you choose the best solution for your specific business, whether it’s Shopify Online Store 2.0, Shopify Hydrogen, a third-party headless platform, or a hybrid solution.