LIQUID TEMPLATING LANGUAGE

A template language is a scripting or markup language designed to embed dynamic content within static documents or templates. The primary purpose of a template language is to generate documents by combining fixed text with variables, expressions, and control structures. This allows developers to create reusable templates and dynamically generate content based on various conditions or data.

BASICS OF LIQUID CODE:

Liquid is a templating language that is primarily used for dynamic content generation in web applications and content management systems. It is known for its simplicity and flexibility, making it popular in platforms like Shopify for building themes and templates.

CODE:

<p>
  {{ product_title }}
</p>
{% if product_description -%}
<p>
{{ product_description | truncate: 250 }}
</p>
{%- endif %}

OUTPUT:
<p>
  Bikanervala Almond
</p>
<p>
  Almonds are the winner when it comes to fiber and protein. They're also naturally low in sugars and are one of the lowest-calorie nuts
</p>
'

LIQUID LOGIC WITH TAGS:

In Liquid, tags are special constructs enclosed within curly braces with a percentage sign on both sides {% … %}. Tags are used to implement logic, control structures, and various operations within Liquid templates.

DATA GIVEN:
{
  "product": {
    "title": "Bikanervala Almond"
  }
}

CODE:
{% if product.title == 'Bikanervala Almond' %}
  HEALTHY OPTION
{% endif %}

OUTPUT:
HEALTHY OPTION

LIQUID FILTERS :

filters are used to modify the output of variables. Filters are applied using a pipe (|) symbol and are followed by the filter name. They allow you to perform various transformations on the data, such as formatting text, manipulating numbers, and handling dates

DATA GIVEN:
{
  "product": {
    "title": "Bikanervala Almond"
  }
}
CODE:
{% # product.title -> Bikanervala Almond %}

{{ product.title | upcase | remove: 'Bikanervala' }}

OUTPUT:
ALMOND

1. Outputting Variables:

Use double curly braces {{ … }} to output variables. For example: {{ product.title }}, {{ customer.name }}.

2. Tags:

• Control structures and logic are enclosed in {% … %} tags. For example:

{% if product.price > 20 %}

 This product is expensive!

{% endif %}

3. Filters:

• Modify the output of a variable using filters. Filters are applied with a pipe |. For example:

{{ product.title | upcase }}

4. Variables:

• Liquid provides built-in variables like product, customer, and cart that can be accessed in your templates.

5. Logic and Control Flow:

• Use {% if … %} … {% endif %} for conditional statements.
• Use {% for … in … %} … {% endfor %} for loops.

6. Comments:

• Add comments using {# … #}. Comments won’t be displayed in the rendered output.

7. Assigning Variables:

• Use the assign tag to create or modify variables. For example:

{% assign discounted_price = product.price | times: 0.9 %}

8. Include:

• Reuse code by using the include tag. This is useful for modularizing your templates.

9. Theme Settings:

• Access theme settings using {{ settings.some_setting }}. Theme settings can be configured in the Shopify admin.

10. Filters for Money and Dates:

• Use money filter to format currency: {{ product.price | money }}.
• Use date filter to format dates: {{ ‘now’ | date: “%Y-%m-%d” }}.

11. Whitespace Control:

• Use hyphen-minus (-) to control whitespace. For example:

{% if product.title -%}

 {{ product.title }}

{%- endif %}

12. Global Objects:

• Access global objects like site, content_for_header, and content_for_layout for various purposes.

These are some foundational concepts to help you get started with Liquid in the context of Shopify. As you work with themes and templates, you’ll become more comfortable with Liquid’s syntax and capabilities. Refer to the official Shopify Liquid documentation for more detailed information and examples.