What is liquid (Shopify) ?

Introduction

Liquid is a template language created by Shopify. It's available as an open source project on GitHub, and is used by many different software projects and companies.
This reference documents the Liquid tags, filters, and objects that you can use to build Shopify Themes.

But what is Shopify?

Shopify is an e-commerce platform that allows individuals and businesses to create and manage their online stores. Here's what Shopify does:

1. Store Creation: Shopify provides tools to easily set up an online store without needing deep technical knowledge. Users can choose from various themes and templates to design their store's appearance.

2. Product Management: Store owners can add, organize, and manage products, including details like descriptions, pricing, and images. Shopify also supports product variants, such as different sizes or colors.

3. Payment Processing: Shopify integrates with multiple payment gateways, allowing businesses to accept payments from customers through various methods, including credit cards, digital wallets, and more. Shopify Payments is their in-house solution, but they also support third-party providers.

4. Order and Inventory Management: Shopify helps businesses manage their orders and inventory, tracking what products are available and what needs to be restocked. Orders can be fulfilled and shipped directly through the platform.

5. Marketing and SEO: Shopify offers built-in marketing tools, including SEO features, social media integrations, email marketing, and promotional campaigns to help businesses attract and retain customers.

6. Analytics and Reporting: Users can access detailed reports and analytics about their store's performance, including sales, customer behavior, and traffic sources. This helps in making data-driven decisions.

7. App Integrations: Shopify's app store offers a wide range of apps to extend the functionality of a store, from advanced marketing tools to inventory management systems and customer support solutions.

8. Mobile and Multi-Channel Selling: Shopify supports mobile commerce, enabling customers to shop from mobile devices. It also allows businesses to sell across multiple channels, including social media platforms, marketplaces like Amazon, and even in physical stores with Shopify POS (Point of Sale).

9. Customer Support: Shopify provides 24/7 customer support, helping users troubleshoot issues and optimize their stores.

Overall, Shopify is designed to be a comprehensive solution for businesses of all sizes to run and scale their online operations efficiently.

Liquid is an open-source template language created by Shopify. It serves as the backbone for Shopify themes and is used to dynamically generate content on storefronts.

What is a template language?

A template language is like a special set of instructions that helps you fill in the blanks on a webpage. Imagine you have a coloring book, but instead of colors, you have places where you can put in words or pictures that can change. The template language tells the computer where to put those words or pictures, so each page can look different even though you're using the same book. It’s like magic instructions that make your website do what you want!

A template language is a type of programming language used to generate dynamic content on websites or applications. It allows you to create a single template to host static content and dynamically insert information depending on where the template is rendered, making it easier to manage and display content that changes based on specific conditions or data.

Key Features of a Template Language:

• Dynamic Content Rendering: Template languages enable the generation of HTML (or other markup languages) that includes dynamic content, such as user information, product details, or other data that might change.
• Separation of Logic and Presentation: Template languages help separate the presentation layer (how things look) from the business logic (how things work). This separation makes it easier to manage and update websites or applications.
• Use of Variables: Templates often use variables to represent data that will be dynamically inserted into the page. For example, in an e-commerce site, a variable might represent the price of a product.
• Control Structures: Like traditional programming languages, template languages include control structures such as loops (for, while) and conditionals (if, else). These allow developers to control what content is displayed based on specific conditions.
• Integration with Data Sources: Template languages typically integrate with data sources, such as databases, APIs, or other backend services, to pull in the necessary data for rendering.
• Syntax and Tags: Template languages use special syntax, often including tags or delimiters, to define dynamic content, control flow, and other logic within a template.

Examples of Template Languages:

1. Liquid (used in Shopify): Liquid is a template language used in Shopify themes to dynamically generate HTML content based on Shopify data (e.g., products, collections).
2. ERB (Embedded Ruby): ERB is a template language in Ruby on Rails that allows Ruby code to be embedded within HTML. It’s commonly used to generate views in Rails applications.
3. EJS (Embedded JavaScript): EJS allows embedding JavaScript directly into HTML templates, making it a popular choice for generating dynamic content in Node.js applications.
4. Twig (used in Symfony, Drupal): Twig is a template engine for PHP, used in frameworks like Symfony and CMS platforms like Drupal.
5. Handlebars.js: Handlebars is a JavaScript-based template engine that allows for logic-less templates, often used in web development to create dynamic views in client-side applications.

Key Features of Liquid

1. Template Language: Liquid is used to create dynamic templates in Shopify. It allows developers to mix static HTML with dynamic content, making it possible to display different information depending on the context (e.g., product details, collections, customer data).
2. Tags: Liquid uses tags to create logic and control the flow of the template. For example:
   • Control Flow Tags: {% if %}, {% else %}, {% endif %} allow conditional logic.
   • Iteration Tags: {% for %}, {% endfor %} loop through collections of objects like products or blog posts.
   • Variable Assignment: {% assign %} is used to create and set variables.
3. Objects: Liquid objects represent the dynamic content that can be rendered in a template. Examples include:
   • {{ product.title }} to display a product's title.
   • {{ collection.description }} to show a collection's description.
4. Filters: Filters are used to modify the output of Liquid objects. For instance:
   • {{ product.price | money }} converts the price to a properly formatted currency string.
   • {{ title | upcase }} converts the text to uppercase.
5. Outputs: Liquid's output syntax uses double curly braces {{ }} to output the content of variables or objects directly to the page.
6. Built for Shopify: While Liquid can be used in other contexts, it's specifically tailored for Shopify. It interacts seamlessly with Shopify’s database, allowing access to products, collections, customer data, and more.

Use Cases:

• Theme Development: Liquid is heavily used in Shopify theme development to control what content is displayed and how it is displayed. For example, a theme might use Liquid to loop through products in a collection and render them on the homepage.
• Customization: Store owners can customize their stores using Liquid without touching the underlying logic of Shopify itself. They can add custom features, tweak layouts, or create entirely new sections.
• Email Templates: Liquid is also used to create dynamic content in Shopify's transactional emails, such as order confirmations and shipping notifications.

Example:

Here's a basic example of Liquid in a Shopify theme:

{% for product in collection.products %}
  <div class="product">
    <h2>{{ product.title }}</h2>
    <p>{{ product.price | money }}</p>
    <a href="{{ product.url }}">View Product</a>
  </div>
{% endfor %}

This code would loop through all the products in a specific collection and display their title, price, and a link to the product page.

Liquid Basics

Liquid is a template language used to dynamically display objects and their properties on web pages. You can modify how this content is displayed by using tags to create logic or by applying filters to directly change the output. In Liquid, objects and their properties are represented using six basic data types. Additionally, Liquid provides basic logical and comparison operators that can be used within tags to control the flow and content of your templates.

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

Output:

<title>
  Health potion
</title>
<meta name="description" content="Are you low on health? Well we've got the potion just for you! Just need a top up? Almost dead? In between? No need to worry because we have a ...">

Liquid logic with tags

Liquid tags are used to define logic that tells templates what to do. Text within tag delimiters doesn’t produce visible output when the webpage is rendered.

{% %} - Curly brace percentage delimiters denote logic and control flow.

For example:

{% if product.title == 'Summer Vibes' %}
  Effortless Beachwear and Accessories!
{% endif %}

Output:

Effortless Beachwear and Accessories!

Modifying output with filters

Liquid filters are tools used to change how information is displayed on a webpage. If you have a piece of information, like a price or a date, and you want to format it differently, you use filters.

Here's how it works:

1. Applying a Filter: To modify how information looks, you add a filter inside the curly braces {{ }} where the information is being shown. You start with the information, then add a pipe character |, followed by the filter name and any extra details needed for that filter.

2. Using Multiple Filters: You can also apply more than one filter to the same piece of information. Filters are applied one after the other, from left to right. For example, you might first format a date and then change its style.

Example:

Imagine you have a price that you want to format as currency and then add a symbol. Here’s how you’d do it:

{{ product.price | money | prepend: "$" }}

• {{ product.price }} is the information (the price).
• | money is a filter that formats the price as currency.
• | prepend: "$" is another filter that adds a dollar sign before the price.

So, filters help you control exactly how information appears on your website, making it look just the way you want!

Objects

In Liquid, objects are like special containers that hold information you can use to build and customize your website. Here's a clearer breakdown:

Types of Objects:

1. Store Resources: These objects represent important parts of your store. For example:

   • Collections: Groups of products, like a "Summer Sale" collection.
   • Products: Individual items in your store, with details like price, description, and images.

2. Standard Content: These are built-in objects used to power Shopify themes. Examples include:

   • content_for_header: A placeholder for content that appears in the header of your site.

3. Functional Elements: These help add interactive features to your site, like:

   • paginate: Controls how your content is divided across multiple pages.
   • search: Handles search functionality, allowing users to find products or content on your site.

Using Objects:

• Double Curly Braces: To display the information from an object on your site, you use double curly braces {{ }}. For example, {{ product.title }} shows the title of a product.

Scope:

• Global vs. Local Access: Some objects are available everywhere on your site (global), while others are only accessible in specific places (local). For example, {{ product.title }} might only work on a product page.

Creating Your Own Variables:

• Variables: You can create your own variables to store and reuse data within your templates. This is done with variable tags. Once created, these variables can be used just like the built-in objects. For example:

  {% assign my_variable = "Hello, World!" %}
  {{ my_variable }}

In summary, Liquid objects and variables help you control and display different kinds of information on your website, making it easy to customize and build your store.

Some important resources

1. Basics of liquid

2. Know more about liquid tags

3. Deep dive into filters

4. Liquid objects

5. Liquid Cheat Sheet

6. Open source liquid

Summary

Liquid is a template language used to create dynamic and customizable websites. It lets you display and modify information using objects, such as products and collections, and apply filters to adjust how this information appears. With Liquid, you can create your own variables to store and reuse data. It helps you build and personalize your site by combining static content with dynamic elements, making it both functional and visually appealing.