Headless vs. Hosted Shopify
The Shopify landscape is vast. Where do our learnings fit into the larger ecosystem of theme development?
We’ve been focusing on Online Store 2.0 Themes using Liquid, also known as a Hosted Theme because it’s hosted on Shopify’s servers, get it?
Before 2.0 launched, Headless CMS sites were actually more popular and flexible, but they were hosted on external servers (not Shopify). What does that even mean? Here’s a breakdown of all the different store types:
01 — Embedded iFrame
Although it’s been discontinued, you still might encounter old sites using Shopify Lite. This is an iframe version of a Shopify store that lets you add product pop-ups to any other website, such as Squarespace. More info here.
02 — Hosted Store
Hosted stores are managed and edited on Shopify’s websites with the Theme Editor. This is what we’ve been focusing on throughout the entire course. Hosted stores can be broken into two types based on the currently published theme:
1.0 (Vintage) Theme - You’re way past this in skill level, but you can work on these if you want! They won’t support sections on pages other than the home page, however, and app integrations will be limited.
2.0 Theme ← What we’ve been working on! This skillset covers full theme redesign using Dawn (or any other 2.0 theme) as a base.
03 — Headless Commerce
Headless Shopify stores are typically written in ReactJS and are much more complex and technically advanced than a Hosted Store. The backend (Shopify) connects to the CMS (of your choice), which is important for stores with content editing needs outside of what you can accomplish with Shopify alone.
Take a look at Sanity CMS for an example of a Sanity-hosted CMS system. Some clients may request a setup like this (or one of the many other headless CMS frameworks out there). Just be aware that due to the increased technical difficulty, project prices are typically 2-3x that of hosted sites, and ongoing maintenance fees will be higher as well.
Also, we didn’t cover this skillset at all in the course! You’ll have to use Shopify APIs and be well-versed in server setup and deployment. These skills are definitely more on the side of a traditional software developer.
So... which one should you use?
I mean, we’re biased because the Shopify ✹ Course covers Online Store 2.0! 👏
If you look at the feature set and new capabilities with 2.0 themes, you’ll see that they cover most of the content problems that Headless CMS solved—with less dev time. We’re already seeing the tides shift towards 2.0 Hosted Themes, and we’re betting they’ll keep on shifting in the years to come.
There will still be a place in the market for Headless commerce—but it’s likely going to be reserved for extra large merchants with extra large budgets.
If you’re just getting started as a Shopify freelancer, it’s more realistic for you to specialize in Online Store 2.0 themes—like the ones we cover in this course! These themes are packed full of features that will cover most merchant use cases, and the only code you’ll need to know is some HTML, CSS, and Liquid.