Shopify Liquid For Beginners

What you are solving

You need to turn static HTML into data-driven Shopify templates. Liquid is the bridge: objects output values, tags control logic, and filters transform output. In Shopify section work, we commonly start with section.settings before touching global objects like product—because that is what merchants edit in the theme customizer.

Objects: output on the page

Objects sit inside double curly braces and render as text or HTML attributes. They do not run logic.

<h1>{{ shop.name | escape }}</h1>
<p>{{ section.settings.subheading | escape }}</p>

In section files, prefer section.settings and block.settings over hardcoded strings. On a product template, product.title is available; on the homepage it is not—scope matters more than syntax.

Tags: logic without output

Tags use {% %} and never print content by themselves. Use them for conditionals, loops, and assignments.

{% if section.settings.image != blank %}
  {{ section.settings.image | image_url: width: 1200 | image_tag: loading: 'lazy' }}
{% endif %}

During theme customization, blank-image issues often appear when merchants save a section before uploading assets. Guard with != blank before calling image_url.

Filters: transform output

Filters chain with a pipe after an object. Order matters: {{ product.price | money }} formats cents; {{ section.settings.title | escape }} prevents broken markup from merchant text fields.

Scope: what exists on this template

• section.settings — any OS 2.0 section file
• product, collection — template context on PDP/collection pages
• cart — cart templates and drawer snippets
• routes — use {{ routes.cart_url }} instead of hardcoded paths

Safe first examples to ship

1. Output one escaped text setting: {{ section.settings.heading | escape }}
2. Wrap images in a blank guard before image_url
3. Add a preset in {% schema %} so merchants can add the section
4. Preview in Shopify admin—not only in your editor

Takeaway

Liquid is three ideas applied inside scoped templates. Connect settings to markup via Section Schema Explained. Copy-paste patterns live in the Liquid Cheat Sheet; loop patterns are in the Loops Guide.

Where beginners get stuck on real client themes

Reading Liquid syntax is easy; debugging a Dawn fork at 11pm is not. Juniors paste {{ product.title }} into a section that only has access to section.settings. They forget | escape on merchant text fields. They loop collection.products without paginate and wonder why the 51st product never renders. On client stores, the fix is always the same: confirm which object exists on the current template, guard blank values, and test in the theme editor—not only in your IDE.

Objects you will touch on every OS 2.0 build

• section.settings — merchant-editable fields from {% schema %}
• block.settings — per-row values inside {% for block in section.blocks %}
• product, collection, cart — template context objects
• routes — use {{ routes.cart_url }} instead of hardcoded /cart

Production checklist before you call a section done

1. Escape plain text: {{ section.settings.heading | escape }}
2. Guard images: {% if section.settings.image != blank %} before image_url
3. Scope CSS with #shopify-section-{{ section.id }}
4. Include presets so merchants can add the section from JSON templates
5. Preview on mobile in Shopify admin—not just desktop Chrome

Debugging tips

When output is empty, log context mentally: are you on product.json or index.json? Does the setting id match schema exactly? Typos in section.settings.heading fail silently. Use Shopify's theme editor code view to confirm the section file deployed. For deeper mistakes, read Common Liquid Mistakes and mistakes we still see on client stores.