How to strip whitespace from the left or right side in Liquid in Shopify in Shopify

Updated: June 26, 2021


Drive 20-40% of your revenue with AVADA
avada email marketing

Liquid template is usually used by website developers because it is compatible with Shopify. In previous tutorials, you have already known about types, operators, trusty and falsy. Today tutorial focuses on whitespace control and presents codes to strip whitespace from the left or right side in Liquid.

Table of content

What is whitespace control

Liquid is a website language for Shopify platform. In computer programing, white space is any character or series of characters that represent horizontal or vertical space in typography. When rendered, a whitespace character is not compatible with a visible mark, but typically does occupy an area on a page.

Code to strip whitespace from the left or right side in Liquid

In Liquid, we can use a hyphen in your tag syntax namely percentage, curly brackets to strip whitespace from a rendered tag’s left or right side.

In general, in case it does not include output text, any line of Liquid in your template still produce a back line in your rendered HTML. For instance, you can leave a blank space in front of “tomato”


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



If you do not want to show the blank space, you include hyphens in assign tag. Look at the sample:


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



In a more complex situation, if you do not want any of your tags to output whitespace, you can add hyphens to both sides of all your tags as a general rule. For example, you would like to present a long name and a slogan without whitespace.


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


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


To sum up, this tutorial aims to guide you to remove whitespace from the left or right side in Liquid. Eliminating whitespace will help you to generate a better interface with customers. We hope that you will find something interesting for your website. If you have any difficulties, let us know and we will assist you.

Recommend for you
Image Description
SMS, Email Marketing Automation

Top rated Marketing automation for Shopify stores

Learn more
Image Description
SEO Suite

Auto-optimize website elements and structure in one-click.

Learn more
Boost Sales [Free]

Boost sales: Sales Pop, Trust badges, Countdown timer, more

Learn more
Image Description
Photo Reviews [Free]

Use photo reviews to boost sales

Learn more


Stay in the know

Get special offers on the latest news from AVADA.

40k subscribers has been joined!

Earn $10 in reward now!

go up