Whitespace control

In Liquid, you can include a hyphen in your tag syntax {{-, -}}, {%-, and -%} to strip whitespace from the left or right side of a rendered tag.

Normally, even if it doesn't output text, any line of Liquid in your template will still output an empty line in your rendered HTML:

Input

{% assign my_variable = "tomato" %}
{{ my_variable }}

Notice the empty line before "tomato" in the rendered template:

Output

tomato

By including hyphens in your assign tag, you can strip the generated whitespace from the rendered template:

Input

{%- assign my_variable = "tomato" -%}
{{ my_variable }}

Output

tomato

If you don't want any of your tags to output whitespace, as a general rule you can add hyphens to both sides of all your tags ({%- and -%}):

Input

{% assign username = "John G. Chalmers-Smith" %}
{% if username and username.size > 10 %}
  Wow, {{ username }}, you have a long name!
{% else %}
  Hello there!
{% endif %}

Output without whitespace control

  Wow, John G. Chalmers-Smith, you have a long name!

Input

{%- assign username = "John G. Chalmers-Smith" -%}
{%- if username and username.size > 10 -%}
  Wow, {{ username }}, you have a long name!
{%- else -%}
  Hello there!
{%- endif -%}

Output with whitespace control

Wow, John G. Chalmers-Smith, you have a long name!

If you need to control the whitespace on only one side of the Liquid tag, you can include the hyphen on just the opening or closing tag. In the example below, a hyphen is on the closing Liquid tag around customer.name.

Input

Hello, {{ customer.name -}}

Output with whitespace control

Hello, Martina

Ready to start selling with Shopify?

Try it free