Shopify Theme Liquid: Everything You Need To Know

What is Shopify Liquid?

Shopify Liquid, the brainchild of Shopify, is a robust template language that provides the backbone for all Shopify themes. Despite the wide variety of Shopify’s themes, each one is ultimately built upon this foundational codebase, making it the principal language in which Shopify is scripted.

Its open-source nature has led to its adoption beyond Shopify, and it is extensively employed by various software projects and companies, all accessible on GitHub.

It’s important to note that Liquid is deliberately designed to be simpler than many programming languages, serving primarily as a bridge to convey data from the store to HTML. This focus on straightforwardness is why Liquid is often characterized as a ‘template engine’ or ‘syntax’, rather than a full-fledged language. 

However, this does not imply a lack of functionality. Similar to any coding language, Liquid employs logical operators, if/then statements, and loops to facilitate dynamic web content creation.

Shopify’s co-founder and CEO, Tobias Lütke, originally conceptualized Liquid, scripting it in Ruby. Since then, it has become the go-to language for major platforms such as Salesforce and Zendesk, further cementing its importance and versatility in programming.

Discussion on Basic Liquid Syntax with Examples

To help you understand Liquid’s syntax, let’s delve into the basics:

• Objects: Objects in Liquid serve as data placeholders. Encased within double curly braces like {{ object }}, they fetch and present data from your Shopify store. For instance, {{ product.title }} would pull the title of a product from your store and display it where placed.
• Tags: Tags are Liquid’s mechanisms for control structures like loops and conditionals. They are contained within curly braces and percentage symbols, like {% tag %} . For example, you could use {% for product in collection.products %}{% endfor %}to list all products in a collection, which tells Liquid to iterate through each product in the collection.
• Filters: Filters in Liquid, denoted by a pipe character |, modify the output of objects. An example would be {{ ‘hello world’ | upcase }}, which converts the string ‘hello world’ to uppercase, resulting in ‘HELLO WORLD’.

By grasping these fundamental aspects of Shopify Liquid, web developers and designers can venture into the realm of Shopify theme customization, enhancing their skills and marketability.

What are Shopify Liquid’s functions & characteristics?

The functionality and uniqueness of Shopify Liquid are defined by three essential components: objects, tags, and filters. Each has a distinct role in this template language’s overall performance and ease of use.

Objects: Also referred to as variables, objects are placeholders symbolizing one or more values. These could be diverse as the name of a product, a particular price, the result of an arithmetic operation, or even responses from database queries.

In Liquid, these objects are embedded within double curly braces ({{ }}). They are the elements that render various data onto the webpage. An individual object can carry multiple properties, with a dot syntax system acting as a separator between the object and its properties.

For instance, consider the object {{ customer.first_name }}. Here, ‘customer’ is the object, and ‘first_name’ is a property of that object. When used, this code will display the customer’s first name on the webpage.

The simplicity of Liquid’s syntax is one of its most robust characteristics, making it incredibly user-friendly and accessible to developers.

Tags: Enclosed in curly braces and percentage signs ({% %}), tags create the logic within templates. While the tags themselves aren’t visible on the webpage, they orchestrate how and when objects are displayed.

For instance, a tag could instruct the webpage to display a promotional message if a customer’s cart value exceeds a certain amount. If the condition isn’t met, it might not display any message. This flexibility in managing conditions significantly enhances the dynamism and interactivity of a webpage.

Filters: Filters, denoted by the pipe character (|), are employed to alter outputs. They can tweak the presentation of an object on the webpage in numerous ways.

For example, the ‘date’ filter can change the format in which a date is displayed. If you have {{ article.published_at | date: “%a, %b %d, %y” }}, it will alter an article’s ‘published_at’ date to be displayed in a format like ‘Mon, Jan 01, 23’.

The interplay between Shopify Liquid’s objects, tags, and filters offers developers and designers a versatile, intuitive, and robust framework to create dynamic, custom-themed Shopify stores. This elevates the user experience while simultaneously meeting business needs more efficiently.

How to customize Shopify themes using Liquid 

Let’s embark on a practical exercise to demonstrate how Shopify Liquid impacts the front-end appearance of your store and how you can utilize it for customization. We will swap out the form on a typical contact page with your custom text.

Step 1: Duplicate Your Theme

Before making any changes to your theme code, it’s crucial to create a copy of your existing theme. This allows for an easy rollback should any errors occur during the customization process. 

Select “Actions” on your current theme and opt for “Duplicate” from the dropdown menu to achieve this.

Step 2: Access the code editor

With a cloned theme in place, navigate to the “Actions” menu on your newly created duplicate theme and select “Edit Code“. This will launch the Shopify code editor, where all the magic happens.

Step 3: Locate the contact form code in page.contact.liquid file

In the code editor, search for and open the page.contact.liquid file. This particular file holds the Liquid code responsible for generating the contact form on your page. 

The code block you need to manipulate starts with a div tag and ends with an endform tag.

Step 4: Remove the identified code block and save changes

Once you’re sure you’ve accurately highlighted the right section of the code, go ahead and remove it. Following this, remember to save the modifications you’ve made.

Step 5: Return to the Online Store > Pages and find Your Contact Page

After making necessary alterations in the code, it’s time to head back to your dashboard. Then navigate to your Contact page.

Step 6: Add your contact details to the Contact Page

On your Contact page, input the details that are set to replace the form in the body section. The page.contact.liquid file will employ the {{ page.content }} object to fetch this data. 

Once you’ve entered the necessary details, click “Save” to apply the changes.

Upon previewing the updated page, you’ll notice the form has disappeared, replaced by your custom information. This demonstration reflects the power of Shopify Liquid in personalizing and controlling your store’s theme according to your specific needs.