Liquid Basics

Every Liquid template is built from two kinds of markup: output, written with double curly braces {{ }}, which prints a value onto the page, and tags, written with curly-brace-percent {% %}, which perform logic like loops and conditionals without printing anything themselves. This lesson covers output; tags are next.

Objects and properties

Shopify exposes data to a template through objects — product, collection, cart, and dozens more, each already populated with real store data by the time your template runs. You access a property of an object with a dot:

{{ product.title }}
{{ product.price }}
{{ product.description }}

You never define product yourself — on a product page, Shopify automatically populates it with that page's product before your template code runs.

Variables

You can also create your own variables with assign, a tag rather than an output:

{% assign greeting = "Welcome back" %}
<p>{{ greeting }}!</p>

<p>Welcome back!</p>

For building up a longer string across multiple lines, capture works like assign but takes a block instead of a single expression:

{% capture button_label %}
  {% if product.available %}Add to cart{% else %}Sold out{% endif %}
{% endcapture %}
<button>{{ button_label | strip }}</button>

Filters

A filter transforms a value before it's output, applied with a pipe character:

{{ product.title | upcase }}
{{ product.price | money }}
{{ "hello world" | capitalize }}

Filters can be chained, applying left to right:

{{ product.title | upcase | truncate: 20 }}

Whitespace control

Because Liquid tags sit inline with HTML, they can leave behind stray blank lines. Adding a hyphen to either side of a tag trims the whitespace next to it:

{%- assign greeting = "Hi" -%}
{{ greeting }}

Comments

Anything between {% comment %} and {% endcomment %} is stripped out entirely and never reaches the rendered page — useful for leaving notes in a template without a stray HTML comment showing up in the page source:

{% comment %}
  TODO: replace this with the new badge component once design signs off
{% endcomment %}