What is Shopify's Liquid Code? A Guide for Designers
What is Shopify Liquid?
Liquid is a templating language created by Shopify and it's specifically designed to work with Shopify's e-commerce platform (although it is used in other projects today). Liquid allows store owners to modify website content, and customize the appearance and functionality of their online store without having to write code. Liquid makes the backbone of any Shopify theme.
Liquid is considered a templating language because it is primarily designed to create templates that can be used to generate dynamic content on web pages. A template is a pre-designed structure or layout that contains placeholders for dynamic content such as product information, customer data, and store settings. In a Shopify theme, you'll find template files for different page types such as: product, collection, cart, page, blog, and article.
These HTML templates contain Liquid code that outputs dynamic store content, and manipulates data to create different page structures. It helps do that in two main ways: outputting store information, and using logic to account for different scenarios. You can identify liquid code by the double curly braces {{ like this }} or single curly braces and percentage sign {% like this %}. The double curly braces are used to output information, and the curly braces with percentage signs, are used to create logic. Like this, Liquid creates a bridge between HTML, and store data.
Liquid Output Examples
Liquid {{ output }} allows us to use placeholders in the code like {{ product.title }} that will be replaced with dynamic store content when the code is sent to the browser. Placeholders in the code are also used to represent content that the store owner adds to the page such section settings for the background colour like this {{ section.settings.bg_color }}.
Templating allows us to reuse templates across products, blog posts, pages and more so that you can design one template and automatically generate pages for all products, blog posts and more, but with each product’s/blog's unique information being shown. We can also easily create new templates and assign different products to different templates. Consistency in the design and user experience is important for e-commerce websites, and templates help us achieve that.
Liquid Logic Examples
Liquid {% logic %} allows us to show different information, or create different layouts and designs based on different conditions being met. For example, if a product has more than one image, then create a media slider. Or, if a product has color variants, then display color swatches.
Liquid doesn’t work just by itself. Liquid works with HTML, CSS, and JavaScript code to create full page designs. Each coding language plays its own part and in creating the page structure. HTML provides the skeleton content displayed in the browser, CSS provides style rules that give the web page's appearance, Liquid acts as placeholder code for store data and section data, and Javascript allows for interactive elements.
Take a look at the Liquid theme file below. It looks like a mix of HTML and Liquid code because that’s what it is. We can put HTML, CSS, Javascript and Liquid all in the same file together.
The browser cannot read or display Liquid, so first, the code is converted from what’s in the theme file into something that the browser can read and display. Before this theme code is sent to the browser, in the backend of Shopify, real store data replaces liquid placeholders, and logic determines which code will be outputted. If you looked at the website code in the Inspector, you won’t find Liquid in the page code. You will only find the outputted HTML.
What can Shopify Liquid code do?
Liquid code is used to define the structure of pages, create conditions and loops, and dynamically generate content based on user inputs and data from the Shopify store.
Here are some examples of what Liquid code can do in Shopify:
1. Display product information: Liquid code can display product details such as name, price, description, and images on the storefront. This code will output the title, price and image of the current product on a product page.
2. Use section settings to determine design: This code will use CSS values based on the settings that the store owner chooses from the section settings.
3. Create conditional statements: Liquid code can create if/else statements to display different content based on certain conditions. In this example, we're using a conditional statement to display a different heading on the page depending on the current collection being viewed.
4. Perform mathematical operations: Liquid code can perform mathematical calculations and display the result on the storefront. In this example, the price of all items in the cart is being added up to display to total cart price.
5. Create loops: Liquid code can create loops to display a set of content repeatedly. This code will loop through all the products in the current collection and output their titles.
Overall, Liquid code is a powerful tool that enables Shopify store owners to customize their store's appearance and functionality. By using Liquid, developers can create a dynamic e-commerce store that delivers a great user experience.
There is a lot more to learn about liquid, such as how to use tags, objects, and filters to create templates that can be customized to display different types of data.
How to Learn Shopify Liquid
Once you know HTML and CSS, learning Liquid is pretty straightforward. By looking at the examples above, hopefully you've noticed that it’s written in more plain English than other coding languages which makes it more intuitive. It has a simple and intuitive syntax that's designed to be easy to read and understand. Additionally, Shopify provides extensive documentation and resources to help developers learn the language quickly.
The difficulty of learning Liquid can vary depending on your level of experience with web developement. However, compared to other programming languages, Liquid is considered to be easy to learn and use, and has a smaller learning curve. It’s a language that can be learned quickly and easily with the right resources and practice.
In our Shopify course, Design Freedom on Shopify, we cover Liquid Fundamentals so you know how to comfortably navigate any Shopify theme file, and make edits to customize the theme. You also learn how to turn regular HTML and CSS code into a Shopify section using Liquid so that you can build custom sections. If you’re a web designer and want to learn more about building custom Shopify stores, check out our Free Shopify Training here. Shopify also has a lot of free documentation on how to use Liquid.
I hope that with the examples above, you've seen that Liquid is quite simple to use, and once you know it, you can remove almost any limitation in your Shopify theme.
Hana Drdla
