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

3 tips to taking your ecommerce site headless, smarter

January 25, 2021

Written By Steve Sewell

Headless ecommerce has has a lot of buzz lately, and for good reason! It's a new way to speed up your ecommerce site, increasing conversions and driving bottom-line growth.

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. We actually recommend taking the iterative migration path, where you prove initial ROI for the headless site over the legacy experience and then port over content over time, focusing on your high impact pages first (homepage, category pages and product page) - more about this below.

Our team has been building headless ecommerce sites since 2014, and we've assisted many others in the transition 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.

You don't have to invest 6+ months to re-write your entire site, you can start small, test and iteratively migrate your ecommerce site to a headless architecture.

Tip: use your ad platforms to split the traffic from the same ad to your headless and legacy pages

We would recommend starting by taking one page on your current site and creating a headless version of it. There are tools on the market, such as Builder.io, that make this easy to do with minimal development effort.

Then, use the ad platform of choice to quickly run an A/B test by sending traffic from the same ad to your current store page vs. your new headless page. If you are using Builder, our A/B feature can split traffic at the edge so the split itself doesn't impact performance.

Finally, measure the difference in conversions between your blazingly fast headless page and the legacy page to see if the performance boost is improving your bottom line, and to what extent.

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

To make the migration to a headless ecommerce site easier, it's important to realize there are ways to create content that work for both headless and legacy 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 the 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 to. You can start using certain modern tools today, which makes testing and moving headless so much easier.

Read our detailed walk through of headless commerce and how to avoid the potential risks of going headless.

If you have any questions, or would like to schedule 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

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