HTML CSS JAVASCRIPT MySQL PHP JQUERY LIQUID

Liquid Basics

❮ Previous Next ❯

Liquid helps you display objects and their properties dynamically. You can adjust the output by using tags to add logic or by applying filters to change it. Objects and their properties are shown using six basic data types. Liquid also provides basic logical and comparison operators for use with tags.

<title>
{{ page_title }}
</title>
{% if page_description -%}
<meta name ="description" content ="{{ page_description | truncate: 150 }}" >
{%- endif %}

Defining logic with tags

Liquid tags define logic for templates, guiding their actions. Text inside these tags doesn't show up on the webpage when displayed.

{% %} These symbols, curly braces with a percentage sign inside, are used to write code that controls the logic and flow of the program.

{% if product.title == 'Health potion' %}
This is a rare potion. Use it sparingly!
{% endif %}

Modifying output with filters

Liquid filters change how variables and objects appear. To use filters, add them inside the output's curly braces, starting with a pipe character. You can apply several filters to one output. They are processed from left to right.

{{ | }} Filters are added within an output tag and are indicated by a pipe character. They modify or format the data before displaying it.

{% # product.title -> Health potion %}
{{ product.title | upcase | remove: 'HEALTH' }}

Referencing objects

Liquid objects are variables used to create your theme. They include:

  • Store items like collections or products and their details.
  • Standard content for Shopify themes, such as content_for_header.
  • Functional elements for interactivity, like paginate and search.

Objects can be single data points or have multiple properties. Some products might be part of a related object, like a product in a collection.

{{ }} Double curly braces are used to display output. They show data or the result of an expression.

Scope

Some objects can be accessed globally, while others are only available in certain contexts. Refer to the object reference to find their access scope.

Creating variables

You can create your own variables using variable tags. Variables are used like objects in the syntax.

<div class ="product-page" >
<div class ="product-image" >
{{ product.featured_image | image_url: width: 400 | image_tag }}
</div >
<div class ="product-title" >
{{ product.title }}
</div >
<div class ="product-price" >
{{ product.price | money }}
</div >
</div >
❮ Previous Next ❯