Headless commerce do's and don'ts: agency edition

5 min read
November 8, 2021

If you’ve been following eCommerce closely, you’ve likely heard the term “headless commerce.” And while buzzwords generate a lot of conversation, the discussion around them doesn't always convey depth or detail. On the other hand, someone seeking information about headless commerce might be met with an abundance of write-ups that talk about headless in a way that’s unique to that company or product, coloring the picture.

For folks just starting to look at this exciting new(ish) approach to building eCommerce experiences, this one’s for you! We want to provide some lessons learned as an eCommerce agency with experience helping merchants go headless. Here’s our round-up of do’s and don’ts.

Don’t assume your tech stack decisions are going to be limited to a CMS and a frontend framework.

At Vaan, “headless commerce” has been one of the most frequent topics that clients and prospects inquire about. Oftentimes inquirers demonstrate research and knowledge of some of the benefits of a headless site like site speed, modularity, and the concept of “future-proofing.”

However, as attractive as these benefits are, the complexities and particulars of a headless build need to be understood. An agency partner can help demystify these details and explain the process. To understand the entire tech stack, it’s crucial to do a deep dive on all the features, data flows, and design innovations that the new site can require, especially if your team is looking to make improvements in these areas.

Key Requirements May Include

  • Design and Creative

  • Functional, Feature, and Compliance/Regulatory

  • Data Flow and Schema

  • Marketing Integration

  • Analytics

  • Shipping & Fulfillment

  • Migration

Do understand that for many merchants, going headless is a highly technical project that is as much about understanding and planning as it is execution.

Headless commerce requires careful consideration to manage complexity and cost. Content model configuration and optimization, managing static page build triggers, and controlling API calls to meet rate limits are just the tip of the iceberg of what a headless implementation can be. Leveraging technical expertise, deep systems knowledge, and valuable technology partners to simplify the implementation can be the key to success.

Common Software Types and Key Considerations

  • Content Management System (CMS)

    • Ease of use

    • Who’s using it (i.e marketing, product, etc)

    • Content model restrictions

  • Frontend Framework

    • React and Vue are leaders

    • Hosting provider may be relevant for framework choice

  • Integration Layer

    • Headless requires integrations to multiple platforms and data sources/targets

    • Data normalization is essential for a consistent frontend experience

Don’t migrate to headless commerce just because people are saying it’s the next big thing.

Just because everybody is talking about headless commerce doesn’t mean it’s right for your brand at this time. Yes, it can improve site performance significantly. Yes, it can allow you to create more customized experiences that may not have been possible before on a monolithic platform such as Shopify Plus or Salesforce Commerce Cloud. But like a luxury car, headless commerce requires upkeep and know-how in order to maximize ROI.

Not all businesses are a good fit for a headless commerce solution right now, and some are actually better served by keeping their current eCommerce setup and dedicating their resources elsewhere to grow. Here are some of the headless qualification questions we typically ask.

Qualifiers

  • What’s your annual eCommerce revenue?

  • How many site visitors do you have? YOY growth?

  • Do you have in-house technical resources?

  • Why do you want to go headless (i.e: new experiences; golden metric/biggest KPI)?

  • What’s the ideal outcome post-launch?

  • What is your budget for ongoing maintenance?

  • Do you understand what it means to have third-party integrations?

Do understand that implementing a headless commerce architecture will require more resources, management, and time than most merchants who use monolithic solutions are used to.

As the name suggests, headless commerce indicates that you are decoupling just about everything. Unlike monolithic platforms such as Shopify Plus, where most things can be managed from a single portal, going headless means it will now all be separated.

There are many benefits that come with that separation, but it also means when managing a store on a headless commerce platform there will be more strategy and planning, both for yourself and your development team. So before you dive in, think deeply about how you can prepare your business to manage the complexities of a headless commerce setup.

Also note that a headless commerce solution such as Nacelle will not require re-platforming, and you can keep aspects of your current tech stack that you like such as Shopify Plus for your commerce platform, OMS, PIM, and checkout. That said, with this solution, you will be moving away from monolithic and towards a modern commerce stack with a best-of-breed ideology and it will require more resources and management as discussed above.

Don’t assume that your tracking, testing, and analytics configuration will all stay the same.

What’s convenient about a monolithic setup is that a lot of tracking is baked in, and when you need to add additional tracking, it’s all relatively easy and simple to do. Going headless means some things will become custom, which might include testing and tracking. Testing platforms' default implementations may not work well with static site generation, and other potential challenges could be present.

Additionally, tracking a headless frontend isn’t always straightforward either. Whether static site generation is being used or server-side rendering, the setup and configuration of tracking will be different from the site setup of a monolithic platform. Furthermore, implementing tracking on a progressive web application (PWA) may require consideration of additional metrics or other configuration changes.

Many merchants choose to tap a vetted eCommerce agency to help navigate these important aspects while you enjoy the benefits of your headless build.

Do take the time to understand and map out your analytics when everything goes live.

If you can’t be confident in the data you’re getting after launch, then you may never trust any numbers you see from your analytics platform. That’s why during the build of your headless commerce site, it’s important to take the time to map out everything you want to be tracked and make sure it gets recorded properly.

The common issues we’ve seen include duplicate tracking of pages, misleading data on page speed, page paths and titles that don’t match up, not all pages getting tracked, and ghost referrals. Take the time to understand the intricacies of tracking and make sure that all data gets properly validated before launch. The ability to evaluate the ROI on your headless investment will be important in order to gauge its benefits right away.

Headless commerce is simultaneously a return to older paradigms in technology (disparate systems linked together to achieve goals), and the advent of a new frontier (API-driven microservices to optimize each feature to its peak).

This evolution promises exciting advances in interactions and UI, site speed and performance, and a deeper understanding of consumer behaviors. But to realize all of this potential, there are challenges and room for missteps. The aforementioned “do’s and don’ts” are certainly not comprehensive, but hopefully, they’ll get you started with thinking through whether headless is right for you, who you should partner with, and what the road ahead may look like. Good luck on the journey!

Read the Headless Commerce 101 Guide

Receive our latest blogs directly into your inbox