3 tips to go headless, smarter

By Steve Sewell

Headless commerce has has a lot of buzz lately, and for good reason! It's a new way to speed the heck out of your site, increasing conversions.

But it's important to know that replacing your entire site frontend is a big change, and doing it in one fell swoop isn't always the way to go about it.

Our team has built headless sites since 2014, and we've assisted many others in the transition ever since.

Here are our top tips for going headless, safely:

1. Start with small tests

Many will tell you the only way to go headless is in one fell swoop - rebuild the whole site and launch it!

This couldn't be further from the truth. You can start by building just a single page at a time and measuring the ROI early, without the upfront cost of a full site build.

Tip: use your ads platform to A/B test a headless page vs your current site

We would recommend starting by taking one page on your current site and creating a headless version of it. Some tools, like Builder.io, can even make this easy to do with minimal development effort.

Then, use your ad platform of choice to run an A/B test sending the same ad to your current store page vs. your new headless page. Measure the difference in conversions to see if the performance boost is improving your bottom line, and to what extent.

2. Move incrementally

If your initial test goes well, now it's time to start moving more of your site over.

Tip: use redirects to move one page of your site at a time

Start by creating your headless site on a new subdomain. For example, if you are shopaholic.com, try creating a shop.shopaholic.com site that is your new, headless storefront.

Now you can update your current and new site with a tiny snippet of code that knows what site to redirect users to as they browse the site.

Show Code Example

3. Build smarter

To make the migration even easier, it's important to realize there are ways to create content that work for both sites at once.

Tip: use tools that also work on both legacy and headless sites

For instance, using a no-code headless CMS like Builder.io, and/or a platform agnostic coding framework like JSX Lite, means you can continue to create and update optimized content for your current site, and your headless site, at the same time.

As you continue to make content for your headless or legacy site, all content can be applied seamlessly to both at the same time, making it easy to move back and forth any time.

This advice works great for those who are not ready to go headless, but would like to have the option, too. You can start using certain modern tools today, which makes testing and moving headless so much easier.

How do I start?

For a free consultation with our team to see if going headless is a smart strategy for you, say hi

Visually editing a headless store in Builder.io