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

This page was made in Builder!

‹ Back to blog

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

Read more on the blog
How to speed up your Shopify store to boost conversions
Introducing Theme Studio 2.0 - the ultimate no-code solution for Shopify
4 common headless commerce mistakes to avoid

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service