Chapter 2: The Basic Flow of Liquid

This chapter will help us understand what Liquid is and learn the basics of Liquid to provide us with the essential knowledge needed to master it. We will split the chapter into the following topics:

• What is Liquid?
• Understanding Liquid and its delimiters
• Learning the comparison operators
• Working with logic operators
• Understanding the types of data
• Controlling whitespace

By the end of this chapter, we will gain a deeper understanding of Liquid logic, the type of operators we can use to manipulate the various types of data, and the Liquid way of removing those pesky whitespace characters. By learning how to use logical operators and manipulate handle attributes, we will gain valuable knowledge of producing various dynamic features, setting our skills on the correct path toward writing quality and complex code.

Technical requirements

The code for this chapter is available on GitHub here: https://github.com/PacktPublishing/Shopify-Theme-Customization-with-Liquid/tree/main/Chapter02.

The Code in Action video for the chapter can be found here: https://bit.ly/3ArKxia

What is Liquid?

In the previous chapter, we gained the first insights into Shopify. We learned what Shopify is, how to create Shopify Partner accounts, and how to manage our theme. Finally, we have learned about theme structure, the directories it contains, and some essential files in our Layout directory, at which point we might have noticed that most of our files contain the .liquid extension. So what exactly is Liquid?

Liquid is an open source project created by Shopify co-founder and CEO Tobias Lütke. As a template language, Liquid variables connect the Shopify store's data to the static HTML content in our theme, allowing us to turn the static template page into a fully dynamic and powerful e-commerce store and producing impressive results. We can also consider Liquid elements as placeholders that will only get populated with proper data after the code inside the file is compiled and sent to the browser.

Ever since 2006, Liquid has been growing and evolving. Today...

Understanding Liquid and its delimiters

One of the two ways that we can discern a Liquid file is by the extension .liquid. Being a template language, a Liquid file is a combination of static and dynamic content:

• Elements that we write in HTML are called static content, and they stay the same no matter what page we are currently on.
• On the other side, elements written in Liquid are called dynamic content elements, whose content changes depending on the page we are on.

While our browsers can quickly process the HTML code, they would not know what to do with Liquid code as they do not understand it. We can break up the flow of what happens when we submit a Shopify URL to our browser into five logical steps:

1. The Shopify server tries to determine which store we are trying to access.
2. Depending on the type of page we are currently requesting information for, Shopify tries to locate and select the proper Liquid template from the active theme directory.
3. After...

Learning the comparison operators

With Liquid, we have access to seven comparison operators, which we can combine to create any type of logical flow that our code requires. Let's review them as follows:

• The == operator allows us to check whether the element we are comparing is equal to some value:

  {% if collection.title == "Winter Shoes" %}
    Winter Shows collection found!
  {% endif %}

  If collection.title is strictly equal to our string of "Winter Shows", the logic returns true, and we will see our message shown. Otherwise, the logic returns false. Note that comparison will only return true if the string is an exact match, including the text case.

• The!= operator works similarly to the previous operator. The difference is that this operator checks whether the element we are comparing is not equal to some value:

  {% if collection.title != "Winter Shows" %}
    Winter Shows collection is not found!
  {% endif %}

  As with the previous...

Working with logic operators

Besides comparison operators, we also have access to two logic operators, which allow us to combine multiple conditions to create complex statements. We can divide them into the two following groups:

• The or operator allows us to set multiple conditionals, where we must meet at least one of them:

  {% if collection.title == "Winter Shoes" or  collection.all_products_count > 25 %}
    The collection name is Winter Shows, or the    collection contains more than 25 products!
  {% endif %}

  In the preceding example, we check whether the name of our collection is equal to Winter Shoes or if the collection contains more than 25 products. If we have met at least one of these two conditions, the logic will return true, and our message will be shown. Otherwise, the logic will return false, and the message will not be visible.

• Similarly, the and operator allows us to set multiple conditions. However, for this operator...

Understand the types of data

So far, we have mentioned two data types, strings and numbers to be precise. However, in Liquid, there are six different types of data that are available to us:

• Strings
• Number
• Boolean
• Nil
• Array
• EmptyDrop

Strings

A string is a type of data that we use to represent text. Since a string can be any combination of letters, numbers, or special characters, we should always encapsulate it with quotation marks:

{% if product.title contains "Book" or product.title  contains "2021" %}
  We have found a product that contains the word Book or    the product that contains the word 2021.
{% endif %}

In the previous example, we check whether the product title contains the string "Book" or the same product title contains the string "2021", and if it does, our message will be shown.

Number

A number is a type of data that require no quotation marks, and...

Controlling whitespace

In the previous sections, we learned how to use conditionals with variable data types to ensure that we always receive a correct value. However, even with our conditionals, the same values can be accompanied by some unwanted whitespaces:

Collection info:
{% if collection %}
  The collection's name is {{ collection.title }} !
{% endif %}

In the previous example, we have created a conditional that will return true if our collection object exists, ensuring that our message will not be incomplete. While our result looks correct, if we were to inspect the page, we would see that things aren't perfect:

Collection info:
  The collection's name is Winter Shoes !

As we can see from our previous example, we have successfully recovered the collection information. However, we can see a significant number of empty spaces around our message, which results from processing Liquid code. Even though not every Liquid code will output...

Summary

In this chapter, we covered the basics of Liquid by learning what Liquid is, and how to discern Liquid code by learning how to read and write its syntax. We have gained an understanding of all Liquid logic and comparison operators, which, combined with all Liquid data types we have covered, will help us ensure that we always receive only the data we are expecting. As we progress further, this will become more and more essential.

Lastly, we have learned how to create and access each page individually, which will be of great use to us in the following chapter, where we will be learning more about the objects that we have mentioned on a few occasions throughout the current chapter.

Quiz

1. What type of delimiter should we use if we are expecting an output as a result?
2. What will the result of the following conditional be, and why?

   {% if collection.all_products_count > "20" %}
     The number of products in a collection is greater    than 20!
   {% endif %}

3. What are the two methods to access an item inside an attribute?
4. What is the correct way of accessing an object using its handle?
5. What are the two problems inside the following block of code?

   {% if customer != nil %}
     Welcome {{- customer.name -}} !
   {% endif %}