Blog

  • Shopify Liquid Template Language

    Posted by Babbandeep Singh | Last Updated: 13-Dec-18

    Liquid is a template language that is made by Shopify and written in Ruby. It is now available as an open source project on Github, and is used by several different software projects and companies. Liquid is the backbone of all Shopify topics, and is used to load dynamic content on the online store pages.

     

    Website designers and developers can use a template language to create webpages that combine static content, which is the same on multiple pages, and dynamic content, which changes from one page to another. A template language makes it possible to reuse a stability element that defines the layout of a webpage, while dynamically populates the page with the data from the shopping store. Static elements are written in HTML, and dynamic elements are written in liquid. Liquid elements work as placeholders in the file: When the code is compiled into the file and sent to the browser, the fluid is replaced by data from the Shopify store where the topic is installed.

     

    Liquid syntax

    Like traditional programming languages, liquids have a syntax, interaction with variables, and structures like output and logic. Due to its readable syntax, it is easy to identify liquid structures, and can be separated from two sets of delimiters from HTML: Double curly brace delimiters {{}}, which indicates output, and curly brace percent delimiters {% %}, Which indicates logic and control flow.

     

    There are three principal characteristics of Liquid code:

    1. Objects
    2. Tags
    3. Filters

     

    Objects

    Liquid production pieces of data from a Shopify Administrator In the theme template, the object is wrapped in double curly brace delimiters {{}}.

     

    Tags

    Liquid tag templates are used to create logic and control flow. Curly brace percent delimiters {%%} and the text they keep does not produce any visible output when the webpage is provided. This allows you to assign conditions on the variable and create situations or loops without showing any liquid argument on the page.

     

    Filters

    Liquid filters are used to modify the output of numbers, stars, objects, and variables. They are placed within an output tag {{}}, and they are represented by a pipe character "|".

Tags: Shopify