Shopify Liquid for beginners

What is Shopify Liquid?

Liquid is a template language Shopify uses to combine static HTML with dynamic store data. It is not a full programming language—you will not build APIs in Liquid. Instead, you output product titles, loop over collections, show cart counts, and read merchant settings from section schema.

If you know HTML and basic templating, Liquid feels familiar within a day. This guide covers the core concepts; /shopify-liquid-cheatsheet is your ongoing reference.

Liquid syntax basics

• {{ }} — output tags that render values
• {% %} — logic tags for if, for, assign, render
• Pipe filters transform output: {{ price | money }}
• Comments: {% comment %} ... {% endcomment %}

Variables and assign

Variables store temporary values. Use assign to name a collection, build a class string, or cache a computed value inside a template.

{% assign sale_collection = collections['sale'] %}
{% assign heading_class = 'heading heading--' | append: section.settings.size %}

Objects and dot notation

Shopify exposes objects—product, collection, cart, shop, section, block—with properties you access via dot notation. On a product template, product.title returns the current product name. Inside sections, section.settings.heading returns the merchant-configured heading.

• product — title, price, featured_image, variants, url
• collection — products, title, url, image
• cart — item_count, total_price, items
• section.settings — values from your section schema
• block.settings — values from a block inside a section

Loops

for tags iterate arrays. The most common beginner loops: products in a collection, items in cart, and blocks in a section.

{% for product in collection.products limit: 4 %}
  <p>{{ forloop.index }} — {{ product.title }}</p>
{% endfor %}

Conditions

if tags branch on availability, tags, settings, and blank checks. Use elsif for multiple branches and unless as inverted if.

{% if section.settings.heading != blank %}
  <h2>{{ section.settings.heading }}</h2>
{% endif %}

{% unless product.available %}
  <span>Sold out</span>
{% endunless %}

Beginner workflow: HTML to section

• Build or receive static HTML for a component.
• Paste into /converter — settings and blocks are inferred.
• Review output; learn schema structure in /shopify-schema-guide.
• Add section.liquid to theme; register on JSON template per /shopify-section-tutorial.
• Let merchants edit content in the theme editor.

Common beginner mistakes

• Hardcoding text that merchants should edit—use section.settings instead.
• Forgetting presets—sections won't appear in Add section without them.
• Global CSS that breaks other sections—scope with section.id.
• Using include instead of render for snippets.
• Invalid schema JSON—validate before deploying.

Where to go next

Read /how-shopify-sections-work for architecture, /shopify-liquid-examples for copy-ready patterns, and /dynamic-shopify-blocks-guide when you need repeatable merchant-managed rows.