ā°
Use Cases
Pricing
Blog
Ć
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ā°
Made in Builder
3 tips to taking your ecommerce site headless, smarter
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.
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 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.
How do I start?
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