Liquid Basics

<!-- Store name -->
<h1>{{ shop.name }}</h1>

<!-- Product title -->
<h2>{{ product.title }}</h2>

<!-- Product price (formatted as money) -->
<span>{{ product.price | money }}</span>

<!-- Collection description -->
<div>{{ collection.description }}</div>

<!-- Current page title -->
<title>{{ page_title }}</title>

<!-- Basic if/else -->
{% if product.available %}
  <button type="submit">Add to Cart</button>
{% else %}
  <button disabled>Sold Out</button>
{% endif %}

<!-- Multiple conditions with elsif -->
{% if cart.item_count == 0 %}
  <p>Your cart is empty</p>
{% elsif cart.item_count == 1 %}
  <p>You have 1 item in your cart</p>
{% else %}
  <p>You have {{ cart.item_count }} items in your cart</p>
{% endif %}

<!-- Unless (opposite of if) -->
{% unless product.title == blank %}
  <h1>{{ product.title }}</h1>
{% endunless %}

<!-- Checking if a value exists -->
{% if product.featured_image %}
  <img src="{{ product.featured_image | image_url: width: 600 }}"
       alt="{{ product.featured_image.alt | escape }}">
{% endif %}

<!-- Compound conditions -->
{% if product.available and product.price > 0 %}
  <span class="price">{{ product.price | money }}</span>
{% endif %}

{% if product.type == 'shirt' or product.type == 'pants' %}
  <span class="badge">Clothing</span>
{% endif %}

{% case template.name %}
  {% when 'product' %}
    <!-- Product page specific content -->
  {% when 'collection' %}
    <!-- Collection page specific content -->
  {% when 'index' %}
    <!-- Home page specific content -->
  {% else %}
    <!-- Default content -->
{% endcase %}

<!-- Loop through products in a collection -->
<div class="product-grid">
  {% for product in collection.products %}
    <div class="product-card">
      <h3>{{ product.title }}</h3>
      <span>{{ product.price | money }}</span>
    </div>
  {% endfor %}
</div>

<!-- Loop through product images -->
<div class="product-gallery">
  {% for image in product.images %}
    <img
      src="{{ image | image_url: width: 800 }}"
      alt="{{ image.alt | escape }}"
      loading="{% if forloop.first %}eager{% else %}lazy{% endif %}"
    >
  {% endfor %}
</div>

<!-- Loop through navigation links -->
<nav>
  <ul>
    {% for link in linklists.main-menu.links %}
      <li>
        <a href="{{ link.url }}"
           {% if link.active %} class="active"{% endif %}>
          {{ link.title }}
        </a>
      </li>
    {% endfor %}
  </ul>
</nav>

{% for product in collection.products %}
  <div class="product-card
    {% if forloop.first %} product-card--featured{% endif %}
    {% if forloop.last %} product-card--last{% endif %}"
  >
    <span class="product-number">{{ forloop.index }} of {{ forloop.length }}</span>
    <h3>{{ product.title }}</h3>
  </div>
{% endfor %}

<!-- Show only the first 4 products -->
{% for product in collection.products limit: 4 %}
  <div class="product-card">{{ product.title }}</div>
{% endfor %}

<!-- Skip the first 2 products, show next 4 -->
{% for product in collection.products offset: 2 limit: 4 %}
  <div class="product-card">{{ product.title }}</div>
{% endfor %}

<!-- Loop through a number range -->
{% for i in (1..5) %}
  <span>Star {{ i }}</span>
{% endfor %}

<!-- Handle empty collections gracefully -->
{% for product in collection.products %}
  <div class="product-card">
    <h3>{{ product.title }}</h3>
  </div>
{% else %}
  <p class="empty-state">No products found in this collection.</p>
{% endfor %}

<!-- Capitalize -->
{{ 'hello world' | capitalize }}
<!-- Output: Hello world -->

<!-- Upcase / Downcase -->
{{ product.title | upcase }}
{{ product.title | downcase }}

<!-- Replace -->
{{ product.title | replace: ' ', '-' }}

<!-- Truncate -->
{{ product.description | strip_html | truncate: 100 }}
<!-- Strips HTML tags, then limits to 100 characters -->

<!-- Strip HTML -->
{{ product.description | strip_html }}

<!-- Escape (for use in attributes) -->
<img alt="{{ product.title | escape }}">

<!-- Append / Prepend -->
{{ 'world' | prepend: 'hello ' }}
<!-- Output: hello world -->

<!-- Handle blank values -->
{{ product.vendor | default: 'Unknown Vendor' }}

<!-- Math operations -->
{{ 100 | plus: 50 }}         <!-- 150 -->
{{ 100 | minus: 30 }}        <!-- 70 -->
{{ 10 | times: 5 }}          <!-- 50 -->
{{ 100 | divided_by: 3 }}    <!-- 33 -->
{{ 100 | modulo: 3 }}        <!-- 1 -->

<!-- Round -->
{{ 4.567 | round: 2 }}       <!-- 4.57 -->
{{ 4.567 | ceil }}            <!-- 5 -->
{{ 4.567 | floor }}           <!-- 4 -->

<!-- Format price as money (uses store's format) -->
{{ product.price | money }}
<!-- Output: $25.00 -->

<!-- Money with currency code -->
{{ product.price | money_with_currency }}
<!-- Output: $25.00 USD -->

<!-- Money without trailing zeros -->
{{ product.price | money_without_trailing_zeros }}
<!-- Output: $25 (if price is $25.00) -->

<!-- Calculate sale percentage -->
{% if product.compare_at_price > product.price %}
  {% assign discount = product.compare_at_price | minus: product.price %}
  {% assign percentage = discount | times: 100 | divided_by: product.compare_at_price %}
  <span class="sale-badge">-{{ percentage }}%</span>
{% endif %}

<!-- Asset URL (for files in assets/ folder) -->
{{ 'style.css' | asset_url }}
<!-- Output: //cdn.shopify.com/s/files/.../style.css -->

<!-- Stylesheet tag -->
{{ 'base.css' | asset_url | stylesheet_tag }}
<!-- Output: <link href="..." rel="stylesheet"> -->

<!-- Script tag -->
{{ 'global.js' | asset_url | script_tag }}
<!-- Output: <script src="..."></script> -->

<!-- Product image URL with size -->
{{ product.featured_image | image_url: width: 600 }}
{{ product.featured_image | image_url: width: 600, height: 400, crop: 'center' }}

<!-- Link to a specific page type -->
{{ product.url }}            <!-- /products/product-handle -->
{{ collection.url }}         <!-- /collections/collection-handle -->
{{ page.url }}               <!-- /pages/page-handle -->

<!-- Basic responsive image -->
<img
  src="{{ product.featured_image | image_url: width: 800 }}"
  srcset="
    {{ product.featured_image | image_url: width: 400 }} 400w,
    {{ product.featured_image | image_url: width: 800 }} 800w,
    {{ product.featured_image | image_url: width: 1200 }} 1200w
  "
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="{{ product.featured_image.alt | escape }}"
  width="{{ product.featured_image.width }}"
  height="{{ product.featured_image.height }}"
  loading="lazy"
>

<!-- With cropping -->
{{ image | image_url: width: 400, height: 400, crop: 'center' }}

<!-- Available crop values: top, center, bottom, left, right -->

<!-- Chain multiple filters -->
{{ product.description | strip_html | truncate: 150 | escape }}

<!-- Build a CSS class from a product title -->
{{ product.title | downcase | replace: ' ', '-' | prepend: 'product-' }}
<!-- "Summer Shirt" becomes "product-summer-shirt" -->

<!-- Format a date -->
{{ article.published_at | date: '%B %d, %Y' }}
<!-- Output: January 15, 2024 -->

<!-- Simple assignment -->
{% assign featured_product = collections.frontpage.products.first %}
<h2>{{ featured_product.title }}</h2>

<!-- Boolean flag -->
{% assign show_sale_badge = false %}
{% if product.compare_at_price > product.price %}
  {% assign show_sale_badge = true %}
{% endif %}

{% if show_sale_badge %}
  <span class="badge badge--sale">Sale</span>
{% endif %}

<!-- Calculate values -->
{% assign columns = section.settings.columns %}
{% assign column_width = 100 | divided_by: columns %}

<!-- String assignment with filter -->
{% assign product_handle = product.title | handleize %}
<div id="{{ product_handle }}">...</div>

<!-- Capture complex HTML into a variable -->
{% capture price_html %}
  {% if product.compare_at_price > product.price %}
    <s class="price--compare">{{ product.compare_at_price | money }}</s>
    <span class="price--sale">{{ product.price | money }}</span>
  {% else %}
    <span class="price">{{ product.price | money }}</span>
  {% endif %}
{% endcapture %}

<!-- Use the captured content -->
<div class="product-price">{{ price_html }}</div>

<!-- RENDER (recommended — creates isolated scope) -->
{% render 'product-card', product: product, show_vendor: true %}

<!-- INCLUDE (legacy — shares parent scope) -->
{% include 'product-card' %}

<!-- In your section: pass all needed variables explicitly -->
{% for product in collection.products %}
  {% render 'product-card',
    product: product,
    show_vendor: section.settings.show_vendor,
    show_sale_badge: true,
    image_size: 400,
    lazy_load: true
  %}
{% endfor %}

<!-- In snippets/product-card.liquid: use the passed variables -->
<div class="product-card">
  <img
    src="{{ product.featured_image | image_url: width: image_size }}"
    alt="{{ product.featured_image.alt | escape }}"
    {% if lazy_load %}loading="lazy"{% endif %}
  >
  <h3>{{ product.title }}</h3>
  {% if show_vendor %}
    <span>{{ product.vendor }}</span>
  {% endif %}
  <span>{{ product.price | money }}</span>
</div>

<!-- Without whitespace control (leaves blank lines) -->
{% if product.available %}
  <span>In Stock</span>
{% endif %}

<!-- With whitespace control (clean output) -->
{%- if product.available -%}
  <span>In Stock</span>
{%- endif -%}

<!-- Also works with output tags -->
{{- product.title -}}

<!-- HTML comment: visible in page source -->

{% comment %}
  Liquid comment: NOT visible in page source.
  Use these for developer notes.
{% endcomment %}

{%- comment -%}
  With whitespace stripping.
  This is the preferred style.
{%- endcomment -%}

{% # Inline comment (Shopify Liquid only, newer syntax) %}

<!-- Access section settings -->
<h2>{{ section.settings.heading }}</h2>

<!-- Unique section ID (for CSS scoping) -->
<div id="section-{{ section.id }}">
  ...
</div>

<!-- Loop through blocks -->
{% for block in section.blocks %}
  <div {{ block.shopify_attributes }}>
    {% case block.type %}
      {% when 'heading' %}
        <h2>{{ block.settings.heading }}</h2>
      {% when 'text' %}
        <p>{{ block.settings.text }}</p>
      {% when 'button' %}
        <a href="{{ block.settings.link }}" class="btn">
          {{ block.settings.label }}
        </a>
    {% endcase %}
  </div>
{% endfor %}

{%- if product.compare_at_price > product.price -%}
  <div class="price price--on-sale">
    <s class="price__compare">{{ product.compare_at_price | money }}</s>
    <span class="price__current">{{ product.price | money }}</span>
    {%- assign savings = product.compare_at_price | minus: product.price -%}
    <span class="price__savings">Save {{ savings | money }}</span>
  </div>
{%- else -%}
  <div class="price">
    <span class="price__current">{{ product.price | money }}</span>
  </div>
{%- endif -%}

{%- if product.featured_image -%}
  {%- assign image = product.featured_image -%}
  <img
    src="{{ image | image_url: width: 800 }}"
    srcset="
      {{ image | image_url: width: 200 }} 200w,
      {{ image | image_url: width: 400 }} 400w,
      {{ image | image_url: width: 600 }} 600w,
      {{ image | image_url: width: 800 }} 800w,
      {{ image | image_url: width: 1000 }} 1000w
    "
    sizes="(max-width: 749px) calc(100vw - 40px), (max-width: 999px) 50vw, 33vw"
    alt="{{ image.alt | escape }}"
    width="{{ image.width }}"
    height="{{ image.height }}"
    loading="lazy"
  >
{%- else -%}
  <div class="placeholder-image">
    {{ 'product-1' | placeholder_svg_tag: 'placeholder' }}
  </div>
{%- endif -%}

<nav class="main-nav">
  <ul>
    {%- for link in linklists.main-menu.links -%}
      <li class="nav-item">
        <a
          href="{{ link.url }}"
          class="nav-link{% if link.active %} nav-link--active{% endif %}{% if link.child_active %} nav-link--child-active{% endif %}"
          {% if link.current %} aria-current="page"{% endif %}
        >
          {{ link.title | escape }}
        </a>

        {%- if link.links.size > 0 -%}
          <ul class="nav-dropdown">
            {%- for child_link in link.links -%}
              <li>
                <a href="{{ child_link.url }}"
                   class="nav-dropdown__link{% if child_link.active %} active{% endif %}">
                  {{ child_link.title | escape }}
                </a>
              </li>
            {%- endfor -%}
          </ul>
        {%- endif -%}
      </li>
    {%- endfor -%}
  </ul>
</nav>

{%- paginate collection.products by 12 -%}
  <div class="product-grid">
    {%- for product in collection.products -%}
      {% render 'product-card', product: product %}
    {%- endfor -%}
  </div>

  {%- if paginate.pages > 1 -%}
    <nav class="pagination" aria-label="Pagination">
      {%- if paginate.previous -%}
        <a href="{{ paginate.previous.url }}" aria-label="Previous page">
          &larr; Previous
        </a>
      {%- endif -%}

      {%- for part in paginate.parts -%}
        {%- if part.is_link -%}
          <a href="{{ part.url }}">{{ part.title }}</a>
        {%- else -%}
          <span class="current" aria-current="page">{{ part.title }}</span>
        {%- endif -%}
      {%- endfor -%}

      {%- if paginate.next -%}
        <a href="{{ paginate.next.url }}" aria-label="Next page">
          Next &rarr;
        </a>
      {%- endif -%}
    </nav>
  {%- endif -%}
{%- endpaginate -%}

<!-- Output any object as JSON for inspection -->
<pre>{{ product | json }}</pre>

<!-- Check section settings -->
<pre>{{ section.settings | json }}</pre>

<!-- Check what blocks exist -->
<pre>{{ section.blocks | json }}</pre>

<!-- Inspect a specific variable -->
{% assign my_var = product.variants.first %}
<pre>{{ my_var | json }}</pre>

<!-- Wrap in a details element to collapse -->
<details>
  <summary>Debug: product data</summary>
  <pre style="font-size: 12px; max-height: 400px; overflow: auto;">
    {{ product | json }}
  </pre>
</details>

<!-- DEBUG: product.available = {{ product.available }} -->
<!-- DEBUG: collection.products.size = {{ collection.products.size }} -->
<!-- DEBUG: section.blocks.size = {{ section.blocks.size }} -->
<!-- DEBUG: template.name = {{ template.name }} -->

╔══════════════════════════════════════════════════════════╗
║  LIQUID CHEAT SHEET FOR SHOPIFY THEMES                   ║
╠══════════════════════════════════════════════════════════╣
║                                                          ║
║  OUTPUT:     {{ object.property }}                        ║
║  FILTER:     {{ value | filter_name }}                    ║
║  LOGIC:      {% if condition %} ... {% endif %}           ║
║  LOOP:       {% for item in array %} ... {% endfor %}     ║
║  ASSIGN:     {% assign var = value %}                     ║
║  CAPTURE:    {% capture var %} ... {% endcapture %}       ║
║  RENDER:     {% render 'snippet', var: value %}           ║
║  COMMENT:    {% comment %} ... {% endcomment %}           ║
║  STRIP WS:   {%- tag -%}  or  {{- output -}}             ║
║  PAGINATE:   {% paginate array by 12 %} ... {% endpag %}  ║
║                                                          ║
║  COMMON FILTERS:                                         ║
║  | money              Format as currency                 ║
║  | image_url: width:  Generate image URL                 ║
║  | asset_url          CDN URL for asset files             ║
║  | escape             HTML-safe output                   ║
║  | strip_html         Remove HTML tags                    ║
║  | truncate: 100      Limit string length                ║
║  | date: '%B %d, %Y'  Format dates                       ║
║  | default: 'fallback' Default value if blank             ║
║  | handleize          URL-safe string                    ║
║  | json               Output as JSON                     ║
║  | stylesheet_tag     Wrap in <link> tag                 ║
║  | script_tag         Wrap in <script> tag               ║
║                                                          ║
║  SECTION ACCESS:                                         ║
║  section.id           Unique section ID                  ║
║  section.settings     Section schema settings             ║
║  section.blocks       Section blocks array                ║
║  block.type           Block type identifier              ║
║  block.settings       Block schema settings               ║
║  block.shopify_attributes  Required for theme editor     ║
║                                                          ║
╚══════════════════════════════════════════════════════════╝