Headless Shopify & Shopify Plus

This is actually a surprisingly common question, because most brands have internal marketing teams who may want to tweak things from time-to-time.

Headless Shopify storefronts are built on modern Javascript-based stacks, integrating with Shopify via API. Often, they also call other data sources such as a separate headless CMS, personalization engine, and on-site search engine.

Because headless builds don't use a "theme" in quite the same sense as a standard Shopify store, updating or modifying their design, styling, and layout involves a slightly different approach than you might be used to with a Liquid theme. Typically this will involve modifying the source code of the headless frontend via the JS framework itself (such as Next.js or Hydrogen).

Modern Javascript best-practice favors different approaches to styling, which may be unfamiliar for those who're used to editing a CSS or SaSS file directly to control website styling. Popular approaches include CSS-in-JS, and libraries such as Tailwind, which is utility-first and compiles styling at build time.

Switching out the styling for a headless Shopify storefront post-build is easy enough for a developer who's confident in the tech stack, but might involve a few more hoops to jump through for a site owner or someone who's less technical. You'd need familiarity with Git, understanding of how the styling is implemented, and a good understanding of Javascript best-practice in a way that committing the code changes wouldn't wreak havoc on the build or cause build errors.

For this reason, the codebase powering the headless storefront should really be left for your developer or agency partner to update. Making changes can be risky if you don't know what you're doing and might result in a failing build. Unless of course, you have an in-house tech team proficient in the stack with a strong  understanding of the preexisting codebase and its implementation.

Key takeaway: Modifying the CSS or styling for a headless Shopify storefront isn't usually as straightforward as making tweaks to a CSS file, like you might be used to with Shopify's standard Liquid theme engine.

Will our store still use a theme if we go headless?

No. If your store goes headless, you will no longer use your Liquid-based Shopify theme. The frontend will instead be served by a Javascript-based frontend framework, hosted elsewhere. It will still be designed and built according to the project's aesthetic requirements, and in that sense you could say it will use its own "theme". But this won't relate in any way to your existing Shopify theme powered by the Liquid templating engine.

Are pre-made themes available for Shopify headless?

Eh, not really. You can get "starters" depending on the Javascript framework being used, but they're all pretty ugly and none are going to do your storefront justice. We'd advise scrapping the idea. With most of our headless Shopify builds, a comprehensive redesign is usually commissioned, either in-house by our design team, or by your external design agency partner, unless we're incorporating the preexisting store design rebuilt into the headless storefront.

Let's talk Shopify.

We build modern digital experiences for disruptive brands.

Tell us about your project, and we'll get back to you with details on how we can make this happen.