I’m working with Liquid templates and I keep seeing two different ways to write tags. Sometimes people use the regular {% syntax, but other times I see {%- with a dash.
Here’s what I mean:
{% if product.available %}
{%- assign item_count = collection.products.size -%}
{%- assign display_class = 'large-up--one-half' -%}
{% endif %}
I understand the basic {% tags from the documentation, but I can’t figure out what the dash does. Does it change how the code works? I’ve seen it used in themes but there’s no clear explanation anywhere about when to use one versus the other.
Can someone explain what the dash character does and when I should use it in my templates?
The dash controls whitespace around Liquid tags. {%- or -%} strips whitespace and line breaks from that side. Super important for clean HTML output or inline elements where extra spaces break things. I learned this building product grids - without dash trimming, I got weird spacing that destroyed my layout. Regular {% keeps all whitespace exactly as written, which works fine most of the time but creates messy output with complex nested logic and lots of indentation.
yeah, the dash cleans up whitespace. {%- or -%} strips out extra spaces and newlines that mess with your html layout. really helps keep everything tidy!
I’ve worked with several Shopify themes, and the dash syntax is a lifesaver for conditional blocks that create inline content. Without dashes, Liquid keeps every space and newline from your template file, which creates weird rendering problems. Like when I’m building navigation menus or product cards - those extra spaces between tags show up as visible gaps in the HTML. I use {%- and -%} whenever I’ve got multiple assign statements or loops inside conditionals, especially when the template needs clean output. Regular {% syntax works fine for simple stuff where whitespace doesn’t matter visually.
the dash is for trimming white space, like {%- gets rid of spaces/newlines before it and -%} does the same after. helps keep your code clean and avoids those annoying gaps in the HTML.