Will we be able to tweak the CSS of our headless Shopify store?

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.

We're the experts in Headless Shopify.

Your search for answers ends here. Discover our services.

Explore Headless Shopify Services

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.

Bonus: If you really wanted to... here's how you could:

Let's assume you really wanted to be able to edit the CSS of your headless Shopify store. While not ideal for developers, this solution could potentially add value for your in-house, hands-on marketing team. 

Informal chat? Works for us. 🤘

Contact Cocoon for a no-cost, no-obligation consultation.

Let's talk Shopify

With a little ingenuity and JavaScript mastery, it could be made possible by provision of an input/textarea for overriding styles (let's say, in your headless CMS or a Shopify MetaObject), the value of which is fetched at frontend build time. Transforming the text response into a CSS file imported as the final stylesheet could provide a usable mechanism by which to make small CSS tweaks or design alterations, limited of course by the overarching DOM structure of the frontend.

In order for this to work, class names would need to be present on all elements in the DOM, even if initially styled using CSS-in-JS.

Have we done it before? Yes. Would we recommend it? It's not ideal, but it works.