Headless to Native Shopify Migration

Headless

A native Shopify theme suits most direct-to-consumer and B2B brands.

It costs less to run, your team can edit it, and most Shopify apps work with it. Keep headless if you serve several front ends from one catalogue, or have a large in-house engineering team.

You do not leave Shopify. Products, customers and orders stay where they are; only the front end changes. When we moved Cannaray, the native site was faster than the headless one it replaced.

Case studies

Headless and native Shopify compared

Front end

Headless uses a separate framework such as Hydrogen or Next.js, hosted on Oxygen or elsewhere. A native theme is hosted by Shopify.

Editing content

Headless often needs a separate CMS, and developers for layout changes. Native uses Shopify’s theme editor, sections and metaobjects.

Apps

On headless, apps that use theme app extensions need custom work. On a native theme, most apps install and work.

Running costs

Headless means developer time, and often a CMS licence and hosting. Native means your Shopify plan plus theme upkeep.

Best for

Headless suits several front ends and large engineering teams. Native suits most D2C and B2B brands.

What the move involves

01 Audit

We list every feature, integration, app, content type and URL on the headless site. Each is rebuilt natively, replaced by an app or Shopify feature, or dropped.

02 Theme build

An Online Store 2.0 theme with sections your team can edit, using metafields and metaobjects for structured content.

03 Content migration

We move content from your headless CMS into Shopify pages, blogs and metaobjects. For Cannaray we rebuilt its content hub on native Shopify.

04 SEO

We map every old URL with 301 redirects, keep titles and structured data, and track rankings after launch.

05 Launch and handover

We test, launch and train your team. Allbirds’ Canada and South Korea teams now run their sites themselves.

Signs it is time to move

If two or more of these sound familiar, a native theme is worth a look.

Your marketing team waits on developers for routine changesAdding an app means a development projectYou pay for a separate CMS and hosting as well as ShopifyThe front end costs more each year, but conversion has not risen with it

Allbirds

Two stores moved off headless.

Allbirds wanted to serve Canada and South Korea through local distributors. Both stores ran on a headless set-up that the local teams could not edit themselves.

We made localised design changes for each country, then built a native Shopify Plus theme that both teams manage in the theme editor, with metafields and metaobjects in place of custom code, and set up Shopify POS for their shops.

Allbirds case study

Headless moves

Allbirds

Canada and South Korea moved from headless to native Shopify

Cannaray

Headless to a faster native Shopify site, with rankings kept

all case studies

Results

What the move changed.

Cannaray: a faster native Shopify site, built from April to July 2024. It kept its search rankings and gained subscriptions, a new content hub and site search, then stayed with us on a retainer for nearly two years.

Allbirds: Canada and South Korea moved to a native Shopify Plus theme with Shopify POS, run by the local teams.

Case studies

‘We ran ahead of time throughout the project and were able to make changes without difficulty.’

Zara Akhtar, Senior Ecom Manager, Cannaray

Red flags

Signs a headless plan is not ready.

The agency recommends headless before asking who will maintain it.Every feature is rebuilt as custom code, when a Shopify feature or app would do.No plan for moving content out of the headless CMS.No URL mapping, although headless and Shopify URL patterns usually differ.

FAQs

A native Shopify store uses a Shopify theme for its front end, hosted and served by Shopify. A headless store uses Shopify for products, checkout and orders, but serves the front end from a separate framework, often with a separate CMS.

Rarely. Most custom features can be rebuilt with theme sections, metafields, metaobjects, apps or Shopify Functions. We agree what happens to each one before the build starts.

Not if the move is planned. We map every URL with 301 redirects, keep titles, descriptions and structured data, check canonicals and track rankings after launch. Cannaray kept its rankings.

We move it into Shopify pages, blog posts and metaobjects, so your team can edit it in the Shopify admin. You can then stop paying for the separate CMS.

Yes, on Shopify Plus, which includes B2B catalogues and company pricing and connects to ERPs. We check your catalogue and variant counts against Shopify’s current limits during the audit.

It depends on how much custom functionality the headless site has. Cannaray’s project, which also added subscriptions and a new content hub, ran from April to July 2024. We give you a timeline after the audit.

Use our total cost of ownership calculator to compare running costs, then talk to us about the build.

All FAQs