{{ product.title }}
{{ product.price | money }}
{{ customer.first_name | default: "Guest" }}

{% assign sale_price = product.price | times: 0.8 | round %}
Sale price: {{ sale_price | money }}
{% assign greeting = "Hello, " | append: customer.first_name | default: "Guest" %}

{% capture product_card %}
  <div class="card">
    <h3>{{ product.title }}</h3>

{% increment counter %}
{% increment counter %}
{% increment counter %}

{% if product.available %}
  <button>Add to Cart</button>
{% elsif product.compare_at_price > product.price %}

{% if cart.item_count == 0 %}
  Your cart is empty
{% elsif cart.item_count == 1 %}

{% unless product.available == false %}
  <button>Buy Now — {{ product.price | money }}</button>
{% endunless %}

{% case product.type %}
  {% when "Electronics" %}
    <span>⚡ Tech Product</span>

{% if product.price > 5000 and product.available %}
  Premium & In Stock
{% endif %}

{% for product in collection.products %}
  <div class="product">{{ product.title }} — {{ product.price | money }}</div>
{% endfor %}

First 2 products:
{% for product in collection.products limit: 2 %}
  {{ product.title }}

{% for item in collection.products %}
  {% if forloop.first %}<ul>{% endif %}
  <li class="item-{{ forloop.index }}

{% assign empty_array = "" | split: "," %}
{% for item in empty_array %}
  {{ item }}

{% for product in collection.products %}
  <div class="col {% cycle 'col-odd', 'col-even' %}">
    {{ product.title }}

Show only available products, stop after finding sold-out:
{% for product in collection.products %}
  {% unless product.available %}

{%- assign filtered = collection.products -%}
{# Apply tag filter from URL: /collections/all/sale #}
{% if current_tags %}

<table>
  {% tablerow product in collection.products cols: 2 %}
    {{ product.title }}<br>

{{ product.price | money }}
{{ product.price | money_with_currency }}
{{ product.price | money_without_currency }}

{% assign img = product.featured_image %}
Simple image:
<img src="{{ img | image_url: width: 800 }}"

{{ "hello world" | upcase }}
{{ "HELLO WORLD" | downcase }}
{{ "hello world" | capitalize }}

{{ "My Product Title!" | handleize }}
Reverse handle to readable:
{{ product.handle | replace: "-", " " | capitalize }}

{{ 16 | divided_by: 4 }}
{{ 3 | times: 4 }}
{{ 10 | plus: 5 }}

{{ article.published_at | date: "%B %d, %Y" }}
{{ article.published_at | date: "%Y-%m-%d" }}
{{ article.published_at | date: "%b %-d" }}

Filter by property:
{% assign available = collection.products | where: "available", true %}
{{ available.size }} available products

{% assign arr = "a,b,c,d,e" | split: "," %}
First: {{ arr | first }}
Last:  {{ arr | last }}

{{ product.vendor | default: "Unknown Vendor" }}
{{ product.metafields.custom.subtitle | default: product.title }}
{{ customer.first_name | default: "Guest" }}

{% assign html = "<p>Hello <strong>World</strong></p>" %}
{{ html | strip_html }}
{{ html | escape }}

{% assign primary = settings.colors_primary %}
Convert formats:
{{ primary | color_to_rgb }}

{{ product.tags | size }} tags
{{ product.title | size }} characters
{{ collection.products | size }} products

Locales live in locales/en.default.json:
  { "products": { "add_to_cart": "Add to cart",
                  "sold_out": "Sold out",

{%- if cart.currency == shop.currency -%}
  {{ product.price | money }}
{%- else -%}

{# Translation key references locales/en.default.json:
  {
    "products": {

<h1>{{ product.title }}</h1>
<p>by {{ product.vendor | link_to_vendor }} · {{ product.type | link_to_type }}</p>
<p>{{ product.description | truncate: 120 }}</p>

{% for option in product.options_with_values %}
  <label>{{ option.name }}</label>
  <select name="option{{ option.position }}">

{% assign variant = product.selected_or_first_available_variant %}
{% if product.available %}
  {% if variant.inventory_management == "shopify" %}

Single value:
{{ product.metafields.custom.subtitle }}
Rating metafield:

<h1>{{ collection.title }}</h1>
<p>{{ collection.description }}</p>
<p>{{ collection.products_count }} products</p>

<span>{{ cart.item_count }} {{ cart.item_count | pluralize: "item", "items" }}</span>
<span>{{ cart.total_price | money }}</span>
{% for item in cart.items %}

{% if customer %}
  <p>Welcome back, {{ customer.first_name }}!</p>
  <p>Email: {{ customer.email }}</p>

<p>{{ shop.name }}</p>
<p>Currency: {{ shop.currency }}</p>
<p>Domain: {{ shop.domain }}</p>

<title>{{ page_title }}</title>
{% if page_description %}
  <meta name="description"

<nav aria-label="Main navigation">
  {% for link in linklists["main-menu"].links %}
    {% if link.links.size > 0 %}

Page type: {{ request.page_type }}
Host: {{ request.host }}
Path: {{ request.path }}

<script type="application/ld+json">
{
  "@context": "https://schema.org/",

{% if cart.item_count > 0 %}
  {%- assign cart_token = cart.token -%}
  <a href="{{ shop.url }}/cart/{{ cart_token }}?recover=1"

{%- assign limit = section.settings.limit | default: 4 -%}
{%- assign intent = section.settings.intent | default: 'related' -%}
<div data-product-recommendations

{%- assign designer = product.metafields.custom.designer.value -%}
{% if designer %}
  <div class="designer-card">

{% for group in product.selling_plan_groups %}
  <fieldset class="selling-plan-group">
    <legend>{{ group.name }}</legend>

<h3>Shipping to</h3>
{{ customer.default_address | format_address }}
Or build it manually:

<h2 style="color: {{ section.settings.text_color }}">
  {{ section.settings.heading }}
</h2>

{% for block in section.blocks %}
  <div {{ block.shopify_attributes }}>
    {% case block.type %}

<section class="hero"
  style="color: {{ section.settings.text_color }}">
  {% for block in section.blocks %}

String types — output directly:
{{ section.settings.title }}
{{ section.settings.content }}

<style>
  :root {
    --color-primary:   {{ settings.colors_primary }};

<div class="section" {{ section.shopify_attributes }}>
  {% content_for 'blocks' %}
</div>

{% form 'product', product %}
  <input type="hidden" name="id"
    value="{{ product.selected_or_first_available_variant.id }}">

{% paginate collection.products by 3 %}
  {% for product in collection.products %}
    <div>{{ product.title }} — {{ product.price | money }}</div>

Snippets live in snippets/ folder.
render uses ISOLATED scope — parent vars NOT accessible.
Pass data explicitly as named arguments.

{% liquid
  assign greeting = "Hello"
  assign name = customer.first_name | default: "Guest"

Used in layout/theme.liquid ONLY.
content_for_header injects Shopify scripts and app injections.
content_for_layout renders the current template.

{# Standard comment — renders nothing.
  Use for documentation or disabling code. #}
Dash syntax strips surrounding whitespace:

<form action="{{ routes.search_url }}" method="get" role="search">
  <input type="search"
         name="q"

{# Place in theme.liquid <head> #}
<!-- DNS prefetch + preconnect for CDN -->
<link rel="preconnect" href="https://cdn.shopify.com" crossorigin>

{% form 'contact' %}
  {{ form.errors | default_errors }}
  <label for="contact-name">Name</label>

{% form 'customer', customer, id: 'newsletter-form' %}
  <input type="hidden" name="contact[tags]" value="newsletter">
  <label for="newsletter-email" class="sr-only">Email</label>

{%- assign color_option = product.options_with_values | where: 'name', 'Color' | first -%}
{% if color_option %}
  <p class="swatch-current">Color: <strong>{{ color_option.selected_value }}</strong></p>

<div class="quantity-input" data-quantity>
  <button type="button"
          name="minus"

<form action="{{ routes.cart_add_url }}" method="post" data-cart-form>
  <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
  <input type="number" name="quantity" value="1" min="1">

{% form 'localization' %}
  <label for="country">Country/region</label>
  <select name="country_code" id="country">

{% for media in product.media %}
  {% case media.media_type %}
    {% when "video" %}

{% for media in product.media %}
  {% if media.media_type == "model" %}
    <div class="model-wrapper" style="aspect-ratio: 1;">

{% assign img = product.featured_image %}
{% assign widths = "200,400,600,800,1200,1600" %}
<img src="{{ img | image_url: width: 600 }}"

{% paginate collection.products by 6 %}
  <div class="product-grid">
    {% for product in collection.products %}

{% paginate collection.products by 6 %}
  <p>
    Page {{ paginate.current_page }} of {{ paginate.pages }}

In layout/theme.liquid:
{% section 'header' %}
{{ content_for_layout }}

{% schema %}
{
  "name": "Featured Collection",

<div class="lazy-section" data-section-id="{{ section.id }}">
  <div class="lazy-placeholder" style="min-height: 400px; background: #f3f4f6;">
    <noscript>

{%- liquid
  assign bg_color = section.settings.bg_color | default: '#ffffff'
  assign text_color = section.settings.text_color | default: '#000000'

{# Section rendering API: fetch updated section HTML
  Useful for cart drawers, filters, AJAX pagination #}
<button data-refresh-section="cart-drawer">Update Cart</button>

<section class="dynamic-section">
  {% if section.settings.heading != blank %}
    <h2>{{ section.settings.heading }}</h2>

In layout/theme.liquid:
{% sections 'header-group' %}
{{ content_for_layout }}

Basic render:
{% render 'product-card', product: product %}
With multiple parameters:

Legacy include (deprecated — use render instead):
{% include 'product-card' %}
{% include 'product-card', product: featured_product %}