I’m working on a third-party Shopify theme and the code is really messy and hard to read. I need to find a way to automatically format .liquid files but I’m having trouble with it.
What I tried in VS Code
I attempted to use VS Code with the format document shortcut Ctrl + Shift + I but it doesn’t work properly. It adds line breaks in weird places like this:
{% if product.available %}<div
class="product-form">{{ 'products.product.price' | t }}</div>{% endif %}<div
What I tried in Sublime Text
I installed some formatting plugins in Sublime Text but they don’t recognize liquid files. The syntax is similar to Twig templates but none of the available formatters handle it correctly.
What I want to accomplish
I want to transform this messy code:
{% if product.available %}<div class="product-form">{{ 'products.product.price' | t }}</div>{% endif %}{% for variant in product.variants %}{% if variant.inventory_quantity > 0 %}<span>{{ variant.title }}</span>{% assign variant_price = variant.price %}{% if variant_price < product.price %}{% assign discount = true %}{% endif %}{% endif %}{% endfor %}
Into this clean format:
{% if product.available %}
<div class="product-form">
{{ 'products.product.price' | t }}
</div>
{% endif %}
{% for variant in product.variants %}
{% if variant.inventory_quantity > 0 %}
<span>{{ variant.title }}</span>
{% assign variant_price = variant.price %}
{% if variant_price < product.price %}
{% assign discount = true %}
{% endif %}
{% endif %}
{% endfor %}
Is there any tool or editor extension that can properly format liquid template files?
Had the exact same frustration with inherited Shopify themes. What finally worked for me was the Liquid Languages Support extension by Shopify in VS Code. Install it, then add this to your settings.json:
This extension has Theme Check built-in - it formats your liquid files and catches errors plus performance issues. I’ve used it for 8 months now and it handles complex nested liquid tags way better than generic HTML formatters. It actually understands Shopify’s liquid context, so it won’t break your template logic or output variables when formatting.
The Shopify Liquid extension by panoply is what I use for this. Install it, then configure your workspace settings to associate .liquid files with the formatter. Go to File > Preferences > Settings, search for “liquid” and check that the file association is correct. This extension actually understands Shopify’s liquid syntax and handles HTML-liquid combos way better than others. I’ve used it for over a year on complex themes - it always produces clean, properly indented code without breaking liquid tags or HTML structure. Restart VS Code after installing and try the format document command again. Should work perfectly with your messy code.
I encountered similar challenges with Liquid template formatting in Shopify themes. One solution that worked for me is using the Liquid extension made by sissel in VS Code. After installing the extension, make sure to set Liquid as your default formatter in your settings.json file:
This formatter does an excellent job of maintaining the structure of the Liquid code without disrupting the HTML tags or introducing unwanted line breaks. While Prettier is an option with its prettier-plugin-liquid, I’ve found that the VS Code extension is more reliable for everyday theme development.
prettier with the liquid plugin’s been solid for me. just npm install --save-dev prettier @shopify/prettier-plugin-liquid then make a .prettierrc file with the plugin set up. way better than vs code extensions, especially when you’ve got complex shopify themes mixing html/liquid.
Been dealing with this exact issue for years working with legacy Shopify themes. Most VS Code extensions treat liquid files as HTML, which completely breaks the formatting logic. What changed everything for me was switching to Shopify CLI with the built-in theme development tools. Run shopify theme dev in your theme directory and it sets up a proper development environment with formatting capabilities. The CLI includes theme-check which has formatting built right in. You can also use shopify theme check --fix to automatically format files from command line. This handles liquid syntax much better than editor extensions because it’s built specifically for Shopify’s implementation of liquid. Takes a bit more setup initially but once configured it formats everything correctly without mangling your liquid tags or HTML structure.