I’m working with Liquid templates and noticed something confusing. Most examples show the standard {% syntax for liquid tags, but I keep seeing {%- used in many theme files.
Here’s what I mean:
{% if product.available %}
{%- assign item_price = product.price -%}
{%- assign item_title = product.title -%}
{% endif %}
I can’t figure out what the dash symbol does after the percent sign. The official docs don’t seem to mention this variation anywhere. Does anyone know what adding the - character accomplishes? Is there a functional difference between these two approaches?
This happens because of Liquid’s whitespace control. Regular {% %} tags keep all the whitespace around them - newlines, indentation, everything from your template. The hyphen changes that by stripping whitespace from whichever side you put it on. I ran into this debugging a customer’s email templates where extra line breaks were messing up the spacing between elements. It was especially bad in table layouts where random whitespace threw off the alignment. Using {%- -%} around conditional blocks and loops fixed it completely. You can also mix them - {%- if condition %} only strips the leading whitespace but keeps the trailing space. That granular control is super useful when you’re working with inline content and need exact spacing.
The dash in {%- controls whitespace in Liquid templates. Regular {% tags keep all whitespace and line breaks around them in your HTML output. The dash {%- strips whitespace from that side of the tag. So {%- assign item_price = product.price -%} removes whitespace on both sides. This matters when you’re avoiding unwanted spaces or line breaks - especially with inline elements or comma-separated lists. I learned this building a product grid where extra whitespace broke my layout. Without dashes, you get unexpected spacing that can mess up your design. It’s super noticeable with multiple Liquid tags in a row - the whitespace adds up fast.
yep, that dash helps liquid trim whitespaces from the tag’s sides. if you skip it, you might end up with a messy html output that has random spaces or new lines - trust me, it can get pretty annoying when you want clean markup. seen it happen a lot!
Yeah, this threw me off when I first started with Shopify themes too. The dash controls whitespace - {%- strips it before the tag, -%} strips it after. Without them, your HTML ends up full of ugly blank lines and random indentation. I figured this out the hard way when my product pages looked weird. Turns out all the newlines from my Liquid code were showing up in the final markup. Check your page source before and after using the dashes - the difference is night and day. Most theme devs use them everywhere to keep the HTML output clean.
The control of whitespace in Liquid templates is essential to maintain clean HTML output. Typically, regular {% tags preserve all spaces and line breaks, which can lead to unwanted formatting issues. Using {%- effectively removes whitespace surrounding the tag. For instance, {%- assign item_price = product.price -%} eliminates unnecessary spaces before and after the command. You can also apply the dash to one side only, like {%- if condition %}, which will strip only the leading space. I encountered this challenge while resolving excessive whitespace in my HTML, and implementing dashes significantly improved my templates’ readability without compromising the layout.
Whitespace issues in templates used to drive me nuts until I automated the whole process.
Yeah, the dash controls whitespace, but manually managing all those {%- tags gets old fast with complex templates.
I fixed this by automating template processing - it handles whitespace cleanup automatically. No more deciding between {% or {%- for every tag. The system processes everything and optimizes output without me remembering syntax details.
This works great when pulling data from multiple sources and generating templates dynamically. Instead of hand-coding each template with the right whitespace controls, just automate the workflow.
For this kind of thing, check out Latenode. It handles template processing workflows well and manages these formatting details automatically: https://latenode.com