Made in Builder.io

Watch the biggest Figma-to-code launch of the year

Builder.io logo
Talk to Us
Platform
Developers
Talk to Us

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

‹ Back to blog

Ecommerce

4 common headless ecommerce mistakes to avoid

February 1, 2021

Written By Steve Sewell

Headless ecommerce is gaining a lot of momentum, and for good reason! It's a modern way to significantly speed up your site, increasing conversions and bottom-line growth. If you still aren't sure what headless commerce is, check out our detailed explanation of what headless commerce is and how it drive growth.

Most people may know that headless sites are faster, but they don't know that there can be some major drawbacks to going headless, if you don't follow best practices. In fact, by going headless you can actually increase first loads and add dependencies to your workflow if you aren't careful.

Here are four common pitfalls you should aim to avoid as you take your storefront headless.

1. Going headless in one fell swoop

Despite what some may say, headless ecommerce sites don't need to be built and launched in one fell swoop -- this is a big misconception. Instead, you can incrementally migrate over, following Martin Fowler's Strangler Pattern. This way you can run an initial test to measure ROI quickly and cheaply by making just one page headless at a time.

We created a guide on how to migrate your site in a smart and incremental manner, and measure ROI as you go.

In short, we recommend you:

  • Migrate to headless ecommerce incrementally, focusing on high-value pages first
  • A/B test headless vs legacy pages to calculate ROI
  • Create content that can be delivered on the legacy and headless website

Migrate incrementally

A/B Test ROI

Share Content

Your CMS is what lets non-developers create and edit content and pages across your site. What many don't know is, there is quite a bit of difference in terms of what each CMS option leaves you capable of.

Using the wrong headless CMS may make you overly dependent on developers to create, manage, and optimize content on your website, which can hinder your business' efficiency and growth.

Unfortunately, most headless CMS's are very limited in what you can do with them without a developer.

But there is hope here - some headless CMS's, such as Builder.io headless CMS for ecommerce, were built to solve exactly this problem, striking an optimal balance between non-developer autonomy and developer customization and control.

Creating content with forms in limited headless CMS

Visually editing a headless ecommerce website with Builder.io

Going headless means you are building your ecommerce storefront in a more modern and performant way. But sadly, this doesn't mean every tool you want to use on your website was built in such a fashion.

As a rule of thumb, always use API integrations and avoid Javascript integrations.

Today's Javascript integrations were built for legacy sites, and can harm your site's performance in a lot of ways, including blocking page load, downloading large and slow code, and in general just not being optimized for a headless ecommerce website.

The downside, though, is API integrations can have developer overhead to setup and maintain. For an easy and powerful fix, check out HeadlessApp.Store, an upcoming library of fast, API-side ecommerce integrations.

There is a dangerous trend we have noticed in the world of headless commerce -- people preaching that there is only "one way" to build a headless site, or preaching that only some ways are "true headless" and others are not. This is not true. Headless commerce simply means decoupling the frontend presentation layer from the backend logic, and connected the two via APIs.

As long as the end result in an API-based application, it will be headless. You can get there in steps with incremental migration, or all at once with a full re-write. It is up to you to decide how you migrate to a headless commerce architecture.

Our recommendation: do your own research, and talk to multiple sources.

There are a lot of great resources out there, and if you'd like our recommendations as a data point, reach out to us.

Share

Twitter
LinkedIn
Facebook
Hand written text that says "A drag and drop headless CMS?"

Introducing Visual Copilot:

A new AI model to turn Figma designs to high quality code.

Try Visual Copilot
Newsletter

Like our content?

Join Our Newsletter

Continue Reading
Web Development8 MIN
Material UI: Convert Figma Designs to React Components
WRITTEN BYVishwas Gopinath
March 27, 2024
Web Development6 MIN
Qwik’s Next Leap - Moving Forward Together
WRITTEN BYThe Qwik Team
March 26, 2024
Visual Copilot5 MIN
Announcing Visual Copilot 1.0: General Availability, Bring Your Own Components, And More
WRITTEN BYSteve Sewell
March 13, 2024