I Built a Tool to Catch the Silent Killer of Shopify Themes: A Broken theme.liquid

Pixelquil — Thu, 03 Sep 2026 17:55:17 +0000

If you've ever installed a Shopify theme, or built one from scratch, and had the Shopify admin start behaving strangely, apps not injecting their scripts, the theme editor showing a blank preview, checkout scripts missing, there's a good chance the actual cause was something tiny and easy to miss in theme.liquid.

Shopify only strictly requires two Liquid objects in that file:

{{ content_for_header }}
{{ content_for_layout }}

That's it. Everything else in theme.liquid, your <head> tags, your header markup, your footer, is structural HTML you control. But these two objects are non-negotiable, and Shopify won't always tell you clearly when one is missing, misplaced, or duplicated.

Why this breaks silently

content_for_header is what Shopify uses to inject scripts into your <head>, things like app embeds, tracking pixels, and Shopify's own required scripts for checkout and cart functionality. If it's missing, or placed somewhere other than inside <head>, apps that rely on it can fail without throwing an obvious error. You just get weird, hard to diagnose bugs.

content_for_layout is where Shopify renders the actual template content, meaning the specific page template (product, collection, page, etc) gets injected here. If it's missing, pages render as your theme shell with no actual content. If it's placed outside the intended content area, or duplicated, you can end up with broken or duplicated page content.

Neither of these failures comes with a clear Shopify error message. You just see something's wrong, and have to go hunting through theme.liquid line by line to figure out why.

What the tool checks

I built the Theme.liquid Structural Checker as part of Pixelquil's Shopify tools to catch this before it ships. Paste in your theme.liquid file, and it checks for:

Presence of both content_for_header and content_for_layout
Placement, specifically whether content_for_header is actually inside <head>, and whether content_for_layout is inside <body>, in a sensible content position
Duplicates, since having either object appear more than once is almost always a mistake
A handful of HTML best practices commonly missed in hand-rolled or heavily customized themes, like a missing <!DOCTYPE html>, missing lang attribute, or a missing viewport meta tag

It's a static check, entirely client-side, nothing is uploaded anywhere. You paste your code, it flags what's wrong, and tells you specifically where.

Who this is actually useful for

If you're building a custom theme from scratch rather than starting from Dawn or another Shopify base theme, it's easy to get this file wrong on a first pass, there's no scaffolding forcing you to include these objects correctly.

If you're debugging a theme you didn't originally build, maybe inherited from a previous developer or a client's old freelancer, this is a fast first check before diving deeper into more complex debugging.

And if you're learning Shopify theme development, this doubles as a way to actually understand why these two objects matter, instead of just copying them into a boilerplate file without knowing what they do.

Try it

It's free, no sign-up, and runs entirely in your browser.

🔗 https://pixelquil.com/shopify-tools/theme-liquid-checker/

Part of a growing set of free Shopify, SVG, and dev tools I'm building at Pixelquil. If you work with Shopify Liquid regularly, I'd genuinely like to hear what other structural gotchas trip people up, planning to add checks for more of them.

Tags: #shopify #webdev #liquid #ecommerce

I Built Pixelquil: Free Browser Tools for SVG, JSON, and Technical SEO (No Signup, No Uploads)

Pixelquil — Mon, 17 Aug 2026 12:03:06 +0000

I kept running into the same small problem while working on client sites and my own projects: I needed a quick tool to fix a broken SVG, format a messy JSON blob, or check a robots.txt file, and every free option online either wanted me to sign up first or uploaded my file to their server before showing me anything.

So I built Pixelquil, a small toolkit that runs entirely in the browser. No account, no upload, no server processing your file. Whatever you paste in stays on your device.

What's in it right now

SVG tools

SVG editor and viewer
viewBox fixer (for that classic "my icon is cut off" problem)
Color palette extractor

Developer tools

JSON formatter and validator
JWT decoder
Regex tester and builder
UUID and hash generators
Password and passphrase generator
Case converter, Unix timestamp converter, text diff checker, cron expression parser, and a few more

SEO tools

robots.txt tester
AI crawler access checker

Why client side only

Two reasons, honestly. First, privacy. A lot of the files people run through these tools come from client work, and I did not want to be the reason someone's unreleased product SVG or a JWT with real claims in it ends up sitting on some server's logs. Second, speed. Client side tools respond instantly. No upload spinner, no waiting on a request round trip for something that should take milliseconds.

What's next

More tools are getting added as I run into more of these small tasks myself. If you have a tool you keep wishing existed but never bothered to look for, drop it in the comments. That is genuinely how most of the current list got built.

Try it here: pixelquil.com

DEV Community: Pixelquil