Shopify Liquid

Unlock the full potential of a Shopify store with Liquid development. This tutorial series is liquid at a glance, and not a replacement for the official documentation.

NB: This note is taken from the Shopify Liquid Documentation

Basics 🔗

{{ }}

Double curly brace delimiters denote an output.

{% %}

Curly brace percentage delimiters denote logic and control flow.

{{ | }}

Filters are placed within an output tag and denoted by a pipe character.

Object Handles 🔗

{{ product.title | handle }}

Referencing Handles 🔗

{{ pages['about-us'].url }}

Operators 🔗

{% if product.tags contains 'high' %}
	Check other cheap products
{% endif %}

Conditionals 🔗

{% if product.type == 'Love' %}
  This is a love potion!
{% elsif product.type == 'Health' %}
  This is a health potion!
{% endif %}

Including else

{% if product.available %}
  This product is available!
{% else %}
  This product is sold out!
{% endif %}

Using unless if the condition is true

{% if product.available %}
  This product is available!
{% else %}
  This product is sold out!
{% endif %}

Using case

{% case variable %}
  {% when first_value %}
    first_expression
  {% when second_value %}
    second_expression
  {% else %}
    third_expression
{% endcase %}

Tags 🔗

HTML Tags 🔗

{% form 'form_type' %}
  content
{% endform %}

Iteration Tags 🔗

{% for product in collection.products -%}
  {{ product.title }}
{%- endfor %}

Syntax Tags 🔗

{% comment %}
  content
{% endcomment %}

{% # content %}

{% raw %}
  expression
{% endraw %}

Theme Tags 🔗

{% javascript %}
  javascript_code
{% endjavascript %}

{% stylesheet %}
  css_styles
{% endstylesheet %}

Filters 🔗

Usage - {{ product.title | upcase }}

With parameters - {{ product.title | remove: 'Health' }}

Multiples - {{ product.title | upcase | remove: 'HEALTH' }}

Concat - array | concat: array

Map - array | map: string

Check documentation for more

Cart Filters 🔗

cart | item_count_for_variant: {variant_id}

Color Filters 🔗

string | brightness_difference: string

Customer filters 🔗

string | customer_login_link

{{ 'Create an account' | customer_register_link }}

Default filters 🔗

{{ product.selected_variant.url | default: product.url }}

Font filters 🔗

{{ settings.type_header_font | font_face }}

Other types of filters 🔗

• Collection
• Format (date, unit)
• HTML
• Hosted file
• Localization
• Math
• Media
• Metafield
• Money
• Payment
• String
• Tag

Objects 🔗

Usage 🔗

Objects, along with their properties, are wrapped in curly brace delimiters {{ }}

{{ product.title }}

{% assign article = articles['potion-notions/new-potions-for-spring'] %}
{{ article.title | link_to: article.url }}

Learn More - Shopify Documentation