Shopify Liquid: Template Language Guide

Liquid is the template language that powers all Shopify themes. Created by Shopify and written in Ruby, Liquid lets you load dynamic content—like products, collections, and customer data—into your store's HTML templates. This guide introduces Liquid basics for those looking to customize their themes beyond what the visual editor offers.

Do You Need to Learn Liquid?

Liquid knowledge isn't required to run a Shopify store. The Theme Editor handles most customizations visually. However, Liquid is useful for:

• Making customizations not available in the Theme Editor
• Understanding how your theme works
• Troubleshooting display issues
• Building custom functionality
• Working with developers more effectively

Liquid Syntax Basics

Liquid has three main components:

Objects (Output)

Objects output dynamic content. They're wrapped in double curly braces:

{{ product.title }}

This outputs the product's title. Common objects include:

• product - Product information
• collection - Collection data
• customer - Logged-in customer info
• cart - Shopping cart contents
• shop - Store-wide settings

Tags (Logic)

Tags create logic and control flow. They're wrapped in curly braces with percent signs:

{% if product.available %}
  In stock
{% else %}
  Sold out
{% endif %}

Common tags:

• if / elsif / else / endif - Conditionals
• for / endfor - Loops
• assign - Create variables
• include / render - Include other files

Filters

Filters modify output. They use a pipe character:

{{ product.price | money }}

This formats the price as currency. Common filters:

• money - Format as currency
• date - Format dates
• upcase / downcase - Change case
• truncate - Shorten text
• img_url - Generate image URLs

Accessing Theme Code

1. Go to Online Store > Themes
2. Click Actions on your theme
3. Select Edit code

Theme File Structure

Shopify themes are organized into folders:

• Layout: Base templates (usually theme.liquid)
• Templates: Page-type templates (product, collection, page)
• Sections: Modular content blocks
• Snippets: Reusable code pieces
• Assets: CSS, JavaScript, images
• Config: Theme settings
• Locales: Translation files

Working with Collections in Liquid

Display collection products using a for loop:

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

Access collection properties:

• collection.title - Collection name
• collection.description - Collection description
• collection.products - Products in collection
• collection.products_count - Number of products
• collection.image - Collection image

Common Liquid Patterns

Conditional Display

{% if product.compare_at_price > product.price %}
  <span class="sale">Sale!</span>
{% endif %}

Looping with Index

{% for product in collection.products limit: 4 %}
  {{ product.title }}
  {% if forloop.last == false %}, {% endif %}
{% endfor %}

Assigning Variables

{% assign sale_price = product.price | money %}
Sale price: {{ sale_price }}

Safe Editing Practices

• Duplicate first: Always backup your theme before editing
• Comment your changes: Note what you modified and why
• Test thoroughly: Check all affected pages
• Use preview: Test in theme preview before publishing
• Keep it simple: Small, focused changes are easier to troubleshoot

When to Use Liquid vs. Theme Editor

• Theme Editor: Content changes, section configuration, theme settings
• Liquid code: Structural changes, custom logic, features not in sections

Learn more about the Theme Editor.

Learning Resources

Shopify provides extensive Liquid documentation:

• Object reference: What data is available
• Tag reference: Logic and control flow
• Filter reference: Output modification
• Theme development guides

When to Hire a Developer

Consider professional help for:

• Complex customizations
• Performance optimization
• Custom app integration
• Theme from scratch

Conclusion

Liquid gives you control over your Shopify theme beyond what the visual editor offers. Start by understanding the basic syntax—objects, tags, and filters—then explore your theme's code to see how it works. Always backup before editing, and don't hesitate to seek professional help for complex changes.

Related Resources

• Shopify Liquid Documentation
• Shopify Theme Editor Guide
• Choosing a Shopify Theme