A Quick Preview of Liquid in shopify app


    {% for product in products %}

  • {{ product.title }}

    Only {{ product.price | money_with_currency }}

    {{ product.description | prettyprint | truncate: 200 }}

  • {% endfor %}

As you can see in shofify application, Liquid is just HTML with some embedded code in shofify code. In this type you can use powerfull Liquid is it gives you full power over your code and makes it easy to work with the variables you have available in shopify code use in various application.

What is going on above in shopify app?

In Liquid, there are two types of markup: Output and Tags. Liquid Tags are surrounded by curly brackets and percent signs; output is surrounded by two curly brackets.

In the above snippet, the first line of Liquid is: {% for product in products %} …. {% endfor %} This is an example of a Liquid Tag. The for Tag loops over a collection of items and allows you to work with each one. If you have ever used for loops in PHP, Ruby, javascript, or (insert any programming language here), it works the same way in Liquid.

The next line of Liquid in the above snippet is {{ product.title }}. This is an example of a Liquid Output. This will ask for a product’s title and display the result to the screen.

The next line of Liquid introduces something new: {{ product.price | money_with_currency }} Here we have an example of a Liquid Filter. They allow you to process a given string or variable. Filters take the value to the left of themselves and do something with it. This particular Filter is called format_as_money; it takes a number, prepends it with a dollar sign and wraps it with the correct currency symbol.

Advertisements