Liquid

Liquid Basics
Tags

Liquid Basics

Handles

In Shopify Liquid, "handles" refer to unique identifiers for various objects such as products, collections, and articles. Handles are often used in creating URLs or accessing specific objects within a Shopify store.

Product Handles:

  1. Accessing Product Handles:

    2. To access the handle of a product, you can use the product.handle property.

    Example:-

    {{ product.handle }}
  2. Creating Product URLs:

    3. Handles are commonly used to create URLs for products.

    Example:-

    <a href="/products/"></a>

Collection Handles:

  1. Accessing Collection Handles:

    2. To access the handle of a collection, you can use the collection.handle property.

    Example:-

    {{ collection.handle }}
  2. Creating Collection URLs:

    3. Handles are used to create URLs for collections as well:

    Example:-

    <a href="/collections/"></a>>

Article Handles:

  1. Accessing Article Handles:

    2. To access the handle of an article, you can use the article.handle property.

    Example:-

    {{ article.handle }}
  2. Creating Article URLs:

    3. Handles are used to create URLs for articles as well:

    Example:-

    <a href="/blogs//articles/"></a>

Page Handles:

  1. Accessing Page Handles:

    2. To access the handle of a page, you can use the page.handle property.

    Example:-

    {{ page.handle }}
  2. Creating Page URLs:

    3. Handles are used to create URLs for pages as well:

    Example:-

    <a href="/pages/liquid-basics">Liquid</a>

Vendor Handles:

  1. Accessing Vendor Handles:

    2. To access the handle of a vendor, you can use the product.vendor property.

    Example:-

    {{ product.vendor | handleize }}
  2. Creating Vendor URLs:

    3. Handles can be used to create URLs for vendors as well:

    Example:-

    <a href="/vendors/{{ product.vendor | handleize }}">{{ product.vendor }}</a>

NOTE:
Remember to replace the placeholder variables like product, collection, article, etc., with the actual objects you are working with.

Operators

In Shopify Liquid, "handles" refer to unique identifiers for various objects such as products, collections, and articles. Handles are often used in creating URLs or accessing specific objects within a Shopify store.

Arithmetic Operators:

  1. Addition (+):
  2. Subtraction (-):
  3. Multiplication (*):
  4. Division (/):
  5. Modulus (%):

Examples:-

//Addition
{ % assign total = 5 + 3 %}

//Subtraction
{% assign difference = 10 - 4 %}

//Multiplication
{% assign product = 2 * 3 %}

//Division
{% assign quotient = 8 / 2 %}

//Modulus
{% assign remainder = 7 % 3 %}

Comparison Operators:

  1. Equal (==):
  2. Not Equal (!=):
  3. Greater Than (>):
  4. Less Than (<):
  5. Greater Than or Equal To (>=):
  6. Less Than or Equal To (<=):

Examples:-

//Equal
{% if product.title == "Sample Product" %}

//Not Equal
{% if product.type != "Shirt" %}

//Greater Than
{% if product.price > 20 %}

//Less Than
{% if product.inventory_quantity < 10 %}

//Greater Than or Equal To
{% if order.total_price >= 100 %}

//Less Than or Equal To
{% if product.weight <= 5 %}

Logical Operators:

  1. And (and):
  2. Or (or):
  3. Not (not):

Examples:-

//And
{% if product.price > 10 and product.available %}

//Or
{% if product.type == "Shirt" or product.type == "Pants" %}

//Not
{% if not product.on_sale %}

Other Operators:

  1. Assignment (= or assign):
  2. Concatenation (~):
  3. Default (default):

Examples:-

//Assignment
{% assign total = 50 %}

//Concatenation
{% assign greeting = "Hello" %}
{% assign message = greeting ~ " World!" %}

//Default
{% assign productTitle = product.title | default: "No Title" %}

Types

In Shopify Liquid, "types" refer to the different data structures and categories of values that can be used and manipulated within Liquid templates.

  1. Strings
    • Represented by text enclosed in double or single quotes.
  2. Numbers
    • Represented by numeric values without quotes.
  3. Booleans
    • Represented by true or false.
  4. Nil (null):
    • Represents the absence of a value.
  5. Empty
    • Represents an empty value or collection.
  6. Arrays
    • Represents an empty value or collection.

Examples:-

//Strings
{% assign greeting = "Hello, World!" %}

//Numbers
{% assign quantity = 10 %}

//Booleans
{% if product.available == true %}

//Nil (null):
{% if product.variants.first == nil %}

//Empty
{% if collection.products.size == 0 %}

//Arrays
{% assign fruits = ["Apple", "Banana", "Orange"] %}

Truthy & Falsy

In Shopify Liquid, truthy and falsy values are used in conditional statements to determine the flow of logic.

Truthy Values:

  • Values that are considered true in a boolean context.
  • Examples: non-empty strings, numbers other than 0, non-empty arrays, non-null objects.

Examples:-

{% if product.title %}
<!-- This block will execute if product title is truthy. -->
{% endif %}

Falsy Values:

  • Values that are considered false in a boolean context.
  • Examples: empty strings, the number 0, empty arrays, null or undefined variables.

Examples:-

{% unless product.available %}
<!-- This block will execute if product is not available (falsy). -->
{% endunless %}

The conditionals help determine whether a certain block of code should be executed based on the evaluation of these truthy or falsy values.

Whitespace Control

In Shopify Liquid, whitespace control allows you to manage the spacing and formatting of your output. This is useful for improving the readability of your Liquid code without affecting the final rendered HTML.

Examples:-

In Liquid
you can use a hyphen in your tag syntax:
{{-, -}}, {%-, and -%}



{%- assign my_variables = "BABS COMMERCE" -%}
{{ my_variables }}

Or

  1. raw Tag:
    • The raw tag is used to output content without any automatic escaping or formatting.

    Examples:-

    {% raw %}
    This content will be output as is,
    without any automatic escaping or formatting.
    {% endraw %}

    <h4>Or</h4>

    {% raw %}
    {{ product.description }}
    {% endraw %}

    This is especially useful when you want to output HTML, JavaScript, or other content without Liquid processing.

  2. whitespace_trim Tag:
    • The whitespace_trim tag removes unnecessary whitespace from the output, such as leading and trailing spaces or newline characters.

    Examples:-

    {% whitespace_trim %}
    This content will have unnecessary whitespace trimmed.
    {% endwhitespace_trim %}

    <h4>Or</h4>

    {% whitespace_trim %}
    {% assign greeting = " Hello, World! " %}
    {{ greeting }}
    {% endwhitespace_trim %}

    This can be beneficial for improving the aesthetics of your templates.

  3. newline_to_br Tag:
    • The newline_to_br tag replaces newline characters with HTML
      tags, useful when rendering content with line breaks.

    Examples:-

    {% newline_to_br %}
    This content
    will have line breaks converted to
    tags.
    {% endnewline_to_br %}

    <h4>Or</h4>

    {% newline_to_br %}
    This is a multi-line string.
    It will be converted to HTML
    tags.
    {% endnewline_to_br %}

    This is often used when displaying user-generated content with line breaks.

Conditional Tags

Conditional tags refer to a set of tags that allow you to create conditional logic within your templates.
These tags enable you to control the flow of your code based on specified conditions.

Types of Conditional tags

  • {% if %}
  • {% unless %}
  • {% elsif %} /
  • {% else %}
  • {% case %} /
  • {% when %}
  • and, or, not

  1. if Tag:

    2. The if tag allows you to execute a block of code only if a specified condition is true.

    Example:-

    {% if product.price > 50 %}
    This product is expensive.
    {% endif %}

  2. unless Tag:

    3. The unless tag is the opposite of if and executes a block of code only if the specified condition is false.

    Example:-

    {% unless product.available %}
    This product is not currently available.
    {% endunless %}

  3. elsif Tag:

    4. The elsif tag is used in conjunction with if to specify additional conditions if the initial if condition is false.

    Example:-

    {% if product.price > 100 %}
    This product is expensive.
    {% elsif product.price > 50 %}

    This product is moderately priced.
    {% else %}

    This product is affordable.
    {% endif %}

  4. case Tag:

    5. The case tag is used for more complex conditional logic, allowing you to evaluate multiple conditions.

    Example:-

    {% case product.type %}
    {% when 'Shirt' %}
    This is a shirt.
    {% when 'Pants' %}
    This is a pair of pants.
    {% else %}
    This is a generic product.
    {% endcase %}

  5. and, or, not:

    6. Logical operators like and, or, and not can be used to combine conditions.

    Example:-

    {% if product.price > 50 and product.available %}
    This product is both expensive and available.
    {% endif %}

These are just a few examples of how conditional tags are used in Shopify Liquid. They enable you to create dynamic templates that adapt to different situations based on the values of variables and other conditions.

-------------------------------------------------------------------------

HTML Tags

While Shopify Liquid does allow you to use HTML tags to create HTML elements, it's important to note that Shopify-specific Liquid attributes are often used within these HTML tags to dynamically render content based on the Shopify store's data. These Liquid attributes are enclosed in double curly braces {{ ... }} and are used to output dynamic values or perform logic within the HTML structure.

Example of using HTML tags with Shopify-specific Liquid attributes:

<div>
<h2>{{% product.title %}}</h2>
<p>Price:{{% product.price | money %}}</p>
<img src="{{ product.featured_image.src | img_url: 'medium' }}" alt="{{ product.title }}">
<form action="/cart/add" method="post">
<input type="hidden" name="id" value="{{ product.variants.first.id }}">
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" value="1" min="1">
<button type="submit">Add to Cart</button>
</form>
</div>

Certainly! Below are some examples illustrating how you can use HTML tags within Shopify Liquid templates:

Examples:-

  1. Outputting Variables in HTML Tags:
    2. <p>This is a product: {{ product.title }}</p>
  2. Control Flow Statements with HTML:
    3. {% if product.available %}
    <p>This product is available.</p>
    {% else %}
    <p>This product is not available.</p>
    {% endif %}
  3. Iterating Over Collections and Generating HTML:
    4. <ul>
    {% for variant in product.variants %}
    <li>{{ variant.title }} - {{ variant.price | money }}</li>
    {% endfor %}
    </ul>
  4. HTML Attributes with Liquid Variables:
    5. <a href="{{ product.url }}" title="{{ product.title }}">Shop Now</a>
  5. Raw HTML Output:
    6. {% raw %}
    <script>
    // Your JavaScript code here
    </script>
    {% endraw %}

Style Tag

The {% style %} tag in Shopify Liquid is used to include inline styles directly within your Liquid templates. It allows you to define styles dynamically using Liquid code.

Example:-

{% style %}
body {
background-color: {{ settings.body_bg_color | default: '#ffffff' }};
color: {{ settings.text_color | default: '#000000' }};
font-family: {{ settings.font_family | default: 'Arial, sans-serif' }};
}

/* Add more styles as needed */
{% endstyle %}
-------------------------------------------------------------------------------------Ok---

Iteration Tags

In Shopify Liquid, iteration tags are used to run a block of code repeatedly, typically for iterating over collections or lists of items.

Examples of 'for':-

Repeatedly executes a block of code.

//Basic Iteration:
<ul>
{% for product in collection.products %}
<li>{{ product.title }} - {{ product.price | money }}</li>
{% endfor %}
</ul>

In this example, the {% for product in collection.products %} ... {% endfor %} block iterates over each product in the collection.products array and outputs its title and price.

//Loop Index:
<ul>
{% for product in collection.products %}
<li>{{ forloop.index }}.{{ product.title }} - {{ product.price | money }}</li>
{% endfor %}
</ul>

The forloop.index variable gives the current iteration index, useful for displaying item numbers in a list.

// Loop Controls:
<ul>
{% for product in collection.products limit: 5 %}
<li>{{ product.title }} - {{ product.price | money }}</li>
{% endfor %}
</ul>

You can use loop controls like limit to specify the maximum number of iterations. In this example, only the first 5 products will be displayed.

-----------

Examples of 'else':-

The {% else %} statement is used within a {% for %} loop to specify an alternative block of code that will be executed when the loop has zero length or when a specific condition is not met.

//Basic Iteration with {% else %}:

<ul>
{% for product in collection.products %}
<li>{{ product.title }} - {{ product.price | money }}</li>
{% else %}
<li>No products found.</li>
{% endfor %}
</ul>

In this example, if collection.products has no items, the content within the {% else %} block will be executed, displaying "No products found."

//Iteration with Conditional Inside {% else %}:

<ul>
{% for product in collection.products %}
{% if product.available %}
<li>{{ product.title }} - {{ product.price | money }}</li>
{% endif %}
{% else %}
<li>No available products found.</li>
{% endfor %}
</ul>

Here, the {% else %} block handles the case when there are no available products in the collection.

------------------

Examples of 'Break':-

Shopify Liquid does not have a native {% Break %} statement for prematurely exiting loops; alternative techniques, such as using {% if %} conditions, are employed for similar functionality.

<!-- Example: 1 -->

{% assign break_out = false %}

{% for item in collection.items %}
{% if break_out %}
{% continue %}
{% endif %}

<p>{{ item.title }}</p>

{% if item.condition %}
{% assign break_out = true %}
{% endif %}
{% endfor %}

<!-- Or -->

<!-- Example: 2 -->

{% for i in (1..10) %}
{% if i == 6 %}
{% break %}
{% else %}
{% i %}
{% endif %}
{% endfor %}

In this example, the loop continues until item.condition is true. Once the condition is met, it sets the break_out variable to true, and the loop uses {% continue %} to skip to the next iteration. While this doesn't exactly replicate a traditional {% break %} statement, it achieves a similar effect.

---------------

Examples of 'continue':-

Shopify Liquid does not natively support a {% continue %} statement; alternative approaches, such as using {% if %} conditions, are employed to achieve similar skip-to-next-iteration functionality in loops.

<!-- Example: 1 -->

{% for item in collection.items %}
{% if item.condition %}
{% continue %}
{% endif %}

<p>{{ item.title }}</p>
{% endfor %}

<!-- Or -->

<!-- Example: 2 -->

{% for i in (1..10) %}
{% if i == 6 %}
{% continue %}
{% else %}
{% i %}
{% endif %}
{% endfor %}

In this example, when item.condition is true, the {% continue %}-like behavior is achieved by skipping the rest of the loop block and moving to the next iteration.

Examples of 'cycle':-

{% cycle %}: Iterates through a group of strings, outputting them in the order they were passed as parameters, and cycles to the next string with each call.

<!-- Example: 1 -->

<p class="{% cycle 'even', 'odd' %}">This is paragraph 1</p>
<p class="{% cycle 'even', 'odd' %}">This is paragraph 2</p>
<p class="{% cycle 'even', 'odd' %}">This is paragraph 3</p>

Output

one
two
three
one

In this example, when item.condition is true, the {% continue %}-like behavior is achieved by skipping the rest of the loop block and moving to the next iteration.

----------------------------------------------OK------------

Syntax Tags

Syntax tags control how Liquid code is processed and rendered.

Examples of 'comment':-

{% comment %} ... {% endcomment %}: Prevents rendering or output of the enclosed content. Text inside comment tags won't be output, and Liquid code will be parsed but not executed.

Example:-

{% comment %}
This content won't be displayed.
{% if some_condition %}
This Liquid code won't be executed.
{% endif %}
{% endcomment %}
--

Examples of 'echo':-

Example:-

{% echo product.title %}

{% liquid
echo product.price | money
%}

Examples of 'liquid':-

In Shopify Liquid, you use double curly braces "{{ ... }}" for outputting content dynamically, not a specific "echo" tag.

Example:-

{% case product.type %}
{% when 'Shirt' %}
<p>This is a shirt product.</p>
{% when 'Pants' %}
<p>This is a pants product.</p>
{% when 'Hat' %}
<p>This is a hat product.</p>
{% else %}
<p>This is a generic product.</p>
{% endcase %}

In this example, the {% case %} statement checks the value of product.type. Depending on the value, different content is displayed using the {% when %} tags. If none of the specified cases match, the content within the {% else %} block is displayed.

Examples of 'raw':-

In Shopify Liquid, the {% raw %} tag is used to include a block of Liquid code without delimiters on each tag. This prevents the Liquid engine from interpreting or processing the content within the tags. It's particularly useful when you want to include raw Liquid code within a code block, and you don't want the Liquid engine to parse it.

Example:-

{% raw %}
{% if product.available %}
<p>{{% product.title %}}is available!</p>
{% else %}
<p>{{% product.title %}}is out of stock.</p>
{% endif %}
{% endraw %}