Hey there, fellow developers, e-commerce store owners, and anyone who’s ever spent way too late tweaking their online shop’s templates—let’s talk Liquid. For those who don’t know, Liquid is that flexible, logic-driven template language that powers Shopify and so many other platforms, right? It’s my go-to tool for customizing storefronts without breaking a sweat, and as someone who’s been part of a small team building Liquid-compatible tools for the past three years (shoutout to the late nights troubleshooting edge cases), I’ve seen first-hand how key it is to pair Liquid with the right frameworks. Today, I wanna walk you through some of the most popular frameworks that support Liquid, why they work, and how they can level up your work—whether you’re a solo dev or a team scaling a big brand. Let’s dive in. Liquid
First off, let’s get one thing straight: Liquid isn’t just for Shopify. Yeah, Shopify was the original big player that made Liquid mainstream, but over the years, devs have built frameworks to extend Liquid’s functionality to other use cases, from static site generation to headless commerce. That’s where the fun starts. I’ve lost count of how many times a client has come to me saying, “I love Liquid but I need it for something outside Shopify”—and these frameworks are exactly the answer.
Let’s start with the most obvious one that everyone already knows but should probably mention first: Shopify itself. Wait, hold on, I know what some of you are thinking—“Shopify’s not a framework, it’s a platform.” Hear me out. Shopify gives you the Shopify CLI, which is basically a framework for building Shopify themes, and it fully supports Liquid. The best part? It’s optimized for Liquid. If you’re building a Shopify store, you don’t have to fight Liquid here. The CLI gives you hot reloading, so when you tweak a Liquid tag or a snippet, you see the changes in real time without refreshing the whole page. I’ve used this for small boutique stores and big brands alike—last year, we worked with a surf apparel brand that needed a custom collection filter, and we built it with Shopify CLI and Liquid, and it saved them weeks of dev time. The only downside? It’s tied to Shopify, so if you’re looking for something cross-platform, you’ll wanna keep reading.
Next up, Jekyll. Oh man, Jekyll is a static site generator that’s absolutely crushing it with Liquid support. A lot of people don’t realize Jekyll uses Liquid as its default template engine—like, built-in, no extra setup required. If you’ve ever built a static site with Jekyll, you know how easy it is to use Liquid variables for things like page titles, post dates, or custom content blocks. I used Jekyll for a personal travel blog a couple years ago, and I loved how I could reuse Liquid snippets for navigation footers across every post. But why is Jekyll a big deal for those coming from Shopify? Because if you’re a Shopify dev, you already know Liquid syntax, so switching to Jekyll means you don’t have to learn a whole new templating language. It’s perfect if you wanna build a marketing site or a blog that syncs with your Shopify store—you can pull product data from Shopify into Jekyll using their API and render it with Liquid, so your brand assets stay consistent across both. The only thing I’ll say is Jekyll is for static sites, so if you need dynamic content that changes per user, it’s not your best bet—but for static stuff, it’s unbeatable.
Moving on, there’s Gatsby. Gatsby is another static site generator, but it’s built with React, which makes it a lot more flexible than Jekyll for dynamic use cases. And guess what? Gatsby supports Liquid through plugins. Wait, let me clarify—Gatsby doesn’t use Liquid by default, but there’s a super popular plugin called gatsby-source-shopify that pulls Shopify data into your Gatsby project, and you can use Liquid-like templating with it? No, wait, actually, let me correct that—recently, Gatsby added support for using Liquid templates alongside React components, or you can use a plugin like gatsby-transformer-liquid to parse Liquid files in your Gatsby project. I’ve been playing with this lately for a client that wants a hybrid site: parts of it are static, parts are dynamic product pages. We built the product pages using Gatsby, pulled the product data from Shopify into Liquid templates in Gatsby, and it worked seamlessly. The best part is Gatsby’s performance—static sites built with Gatsby load super fast, which is huge for e-commerce conversion. If you’re looking to move beyond basic Shopify themes and build something a little more custom, Gatsby is a solid pick.
Another one that’s been blowing up lately is Eleventy, or 11ty, as everyone calls it. Eleventy is a static site generator that’s designed to be lightweight—no bloat, no unnecessary dependencies. And like Jekyll, it supports Liquid natively. In fact, Eleventy supports over a dozen templating languages, but Liquid is one of the most used, especially by devs coming from Shopify. I love Eleventy because it’s so flexible—you can mix Liquid with other templates like Nunjucks or Handlebars if you wanna, but if you stick to Liquid, you get all the same syntax you’re used to from Shopify. Last quarter, we used Eleventy to build a custom documentation site for a client’s Shopify app, and it was way faster to set up than Jekyll or Gatsby because of its minimal setup. The hot reloading is great too, and it works perfectly with GitHub Pages if you wanna host your static site for free. If you’re into lightweight, no-fuss tools, Eleventy is definitely worth checking out.
Wait, let’s not forget about headless commerce frameworks. A lot of people are moving to headless these days, where the storefront is separate from the backend. One popular headless framework that supports Liquid is Next.js? No, wait, there’s also Shopify Hydrogen, but wait—Hydrogen is built on React, but it has support for Liquid? Actually, no, Hydrogen uses JSX, but there’s a tool called Liquid.js that’s a standalone Liquid implementation for JavaScript frameworks. Oh right! Liquid.js is a big one. It’s a lightweight, open-source implementation of Liquid that works with basically any JavaScript framework—React, Vue, Angular, you name it. I’ve used Liquid.js with Vue for a custom client portal that pulls data from Shopify, and it’s been rock solid. The best part is that it’s not tied to any platform, so you can use Liquid outside of Shopify entirely. For example, if you’re building a custom admin dashboard for your Shopify store, you can use Liquid.js to render the templates, so your team can tweak the dashboard layout without needing a dev to update the code every time. It’s also got great support for custom filters, which is a huge plus—you can build your own Liquid filters for things like currency formatting or custom date handling, which makes it way more powerful than the native Liquid in Shopify.
Let’s talk about some underrated ones too, because I don’t wanna just list the big names. There’s Middleman, another static site generator that supports Liquid. Middleman is a little more mature than some of the newer tools, and it’s super reliable if you’re building larger static sites. I used Middleman for a big e-commerce landing page for a Black Friday campaign a couple years ago, and the Liquid snippets made it easy to reuse promotional banners and countdown timers across multiple pages. It’s not as hyped as Jekyll or Gatsby, but it’s a great option if you want something stable that’s been around for a while. And then there’s HubSpot? Wait, HubSpot uses a template language called HubSpot CMS HubL, but it has some Liquid compatibility for migrating from Shopify. A lot of clients come to us looking to move their Shopify stores to HubSpot’s CMS, and the Liquid support there is solid—you can rewrite most Liquid tags to HubL without too much hassle, which saves a ton of time. It’s not perfect, but it’s a good middle ground if you wanna switch platforms but keep using Liquid syntax.
Now, let’s be real—no framework is perfect, and I wanna call out the tradeoffs so you don’t get burned. For example, Shopify is great but it’s locked into their ecosystem. Jekyll is easy but not great for dynamic content. Gatsby is powerful but can get bloated if you’re not careful. Eleventy is lightweight but has a smaller community than Jekyll or Gatsby, so finding answers to problems can be trickier. Liquid.js is flexible but you have to build everything from scratch, since it’s not tied to a platform. That’s why I always tell clients to pick a framework based on their specific use case, not just hype. If you’re building a basic Shopify store, just use Shopify CLI—no need to overcomplicate it. If you wanna build a custom site that syncs with Shopify, go with Gatsby or Eleventy. If you’re looking for a standalone Liquid tool, Liquid.js is the way to go.
Wait, let’s also touch on why Liquid is such a big deal in the first place, for anyone who might be new here. Liquid is simple enough that non-devs (like store owners or marketing teams) can pick up the basics, but powerful enough that devs can build complex functionality with it. It uses a combination of tags, objects, and filters, so you don’t have to write a ton of messy code to get things done. That’s why so many frameworks support it—because it solves a real problem for teams that need a templating language that’s both user-friendly and flexible.
I wanna share a quick story to make this real. A few months back, we worked with a small candle brand that had outgrown their basic Shopify theme. They wanted to add personalized product recommendations based on customer browsing history, but their existing theme was too clunky to customize. We suggested using Gatsby with Liquid.js to build a custom storefront that pulled product data from Shopify, and used Liquid to render the recommendation widgets. The store owner, who’s not a dev, was able to tweak the recommendation layout using Liquid snippets without us having to make code changes every time. They saw a 15% increase in average order value within a month of launching, and that’s all because we paired Liquid with the right framework for their needs. That’s the kind of win that makes all the tweaking worth it.
Now, let’s talk about common mistakes I see people make when using Liquid with these frameworks. First, not testing Liquid code across different environments. For example, a Liquid filter that works in Shopify might not work exactly the same in Eleventy or Liquid.js, because each framework implements Liquid a little differently. I always tell teams to test every custom tag and filter in the framework they’re using before deploying. Second, overcomplicating Liquid snippets. It’s easy to write a 20-line Liquid tag when you could split it into smaller, reusable snippets. That makes code easier to maintain, especially if multiple people are working on the project. Third, not using version control. I’ve seen so many teams lose hours of work because they didn’t push their Liquid templates to GitHub or GitLab—always commit your code, no exceptions.
At the end of the day, frameworks that support Liquid are here to make your life easier, whether you’re a solo dev building a personal site or a team building a multi-million dollar e-commerce store. The key is to know what you need: do you want something tight with Shopify, something lightweight, something flexible for custom projects? Once you figure that out, the right framework is out there.
If you’re a store owner or a dev looking to integrate Liquid into your next project, or you need help picking the right framework for your specific use case, our team is here to help. We’ve worked with all of these frameworks and more, and we can help you build something that’s custom, efficient, and easy to maintain. Whether you need to tweak an existing theme, build a custom storefront, or migrate your site to a new platform, we’ve got the expertise to get it done. Hit us up to start a conversation about your project—we’re ready to help.
VAPME References:
- Shopify Developer Docs – Liquid and Theme Development
- Jekyll Official Documentation – Templating with Liquid
- Eleventy Docs – Liquid Templating Support
- Liquid.js GitHub Repository – Standalone Liquid Implementation
- Gatsby Official Docs – Integrating Shopify with Gatsby
Boostvapes Wholesale
As one of the most professional liquid manufacturers and suppliers in China, we’re featured by quality products and good price. Please rest assured to wholesale bulk liquid in stock here from our factory. Contact us for more details.
Address: Room 2, 3/F, Ruby Commercial Building, 480 Nathan Road, Kowloon, Hongkong, China
E-mail: judy@baishvape.com
WebSite: https://www.boostvapes.com/
