If you ever tried to develop a Shopify theme you know how ridiculously neglected the official Shopify tooling is. I'm not exaggerating here. I spent countless hours searching for a way to set up a development environment, navigating through abandoned or deprecated Shopify projects, and reading comments from fed up devs.
In the end, I said: "Fine, I'll do it myself". That's pretty much how the Shopify Theme Lab project started. Of course, the road to the finished product was a little bit more complicated, but that's another story.
The Framework
So what exactly is Shopify Theme Lab? It can be summed up in one sentence:
It's a highly customizable Shopify theme development environment, with great developer-experience and modern tooling.
Once you use Shopify Theme Lab you'll see how incredibly simple and enjoyable the process of developing themes can be.
What can it do?
First and foremost it's probably the easiest way to get up and running with Shopify theme development. And that's the most difficult part.
Some other notable features include:
- It's highly customizable
- You have modern tooling at your disposal. Out of the box, it comes with Vue and Tailwind CSS
- Remote reloading during development
- Preprocessor support for SASS/SCSS, LESS and Stylus
Get to work
Head over to the Shopify Theme Lab repo on GitHub and build something awesome 💪🏻
Top comments (1)
Shopify Theme Lab looks like a solid escape from the officially-neglected tooling maze — the Vue + Tailwind combo with remote reloading is exactly the kind of DX that makes theme work enjoyable rather than painful.
One thing worth wiring in once you have a theme scaffold like this: navigation prefetching. On hover, you start fetching the next page in the background, so by the time the click lands the page is already in the cache. The perceived navigation speed improvement is dramatic on product-heavy stores, and since it runs on hover (not on load), it doesn't touch your Lighthouse scores at all.
I built a Shopify app called Prefetch (apps.shopify.com/prefetch) that does this automatically — I'm the developer, so full disclosure there. It's the kind of thing that's straightforward to add as a snippet to any theme build.