Snippets
Shopify Liquid snippets
Production Liquid patterns for sections, products, cart, loops, and schema — used in real Shopify theme development workflows.
About this resource
These snippets complement the interactive Liquid Cheat Sheet. Use them when building sections manually or validating converter output. Each pattern follows OS 2.0 conventions with schema-aware settings and performance-safe filters.
Browse
100 resources
Block Settings
Reads values from an individual block inside a section loop.
{% for block in section.blocks %}
<div {{ block.shopify_attributes }}>
<h3>{{ block.settings.heading }}</h3>Image Picker Setting
Outputs an image from a section or block image_picker field.
{% if section.settings.image != blank %}
{{ section.settings.image | image_url: width: 800 | image_tag: loading: 'lazy', alt: section.settings.image.alt | escape }}
{% endif %}Range Setting (Spacing)
Uses a numeric range value from schema—often for padding or font size.
<div style="padding-top: {{ section.settings.padding }}px;">
<!-- content -->
</div>Checkbox Toggle
Shows or hides elements based on a true/false schema checkbox.
{% if section.settings.show_vendor %}
<p class="product-card__vendor">{{ product.vendor }}</p>
{% endif %}Color Setting
Applies a merchant-selected color from the theme editor.
<div style="background-color: {{ section.settings.bg_color }};">
{{ section.settings.heading }}
</div>URL Setting Link
Builds a CTA from a url-type schema setting.
{% if section.settings.button_link != blank %}
<a href="{{ section.settings.button_link }}" class="btn">
{{ section.settings.button_label | escape }}Product Metafield
Outputs a custom metafield attached to a product.
{{ product.metafields.custom.care_instructions }}Render Rich Text Metafield
Safely renders HTML from a Rich Text Metafield.
{{ product.metafields.custom.details | metafield_tag }}Check Metafield Before Output
Avoids empty wrappers when a metafield has no value.
{% if product.metafields.custom.size_chart != blank %}
<div class="size-chart">
{{ product.metafields.custom.size_chart | metafield_tag }}Collection Metafield
Outputs custom data attached to a collection.
{{ collection.metafields.custom.seo_intro }}Article Metafield
Displays custom fields on blog posts—reading time, series, etc.
{% if article.metafields.custom.reading_time != blank %}
<span>{{ article.metafields.custom.reading_time }} min read</span>
{% endif %}Shop-Level Metafield
Reads metafields on the shop object for global theme data.
{{ shop.metafields.custom.announcement_text }}For Loop with Limit
Loops exactly X number of times.
{% for product in collection.products limit: 4 %}
{{ product.title }}
{% endfor %}Forloop Object (Index)
Access the current iteration number of a loop.
{% for block in section.blocks %}
Item number {{ forloop.index }} of {{ forloop.length }}
{% if forloop.first %}This is the first!{% endif %}Loop with Offset
Skips the first N items—handy when the first product is featured elsewhere.
{% for product in collection.products limit: 4 offset: 1 %}
{% render 'product-card', product: product %}
{% endfor %}Reversed Loop
Iterates from last to first without mutating the original array.
{% for block in section.blocks reversed %}
{{ block.settings.heading }}
{% endfor %}Assign Before Loop
Stores a collection or product in a variable for cleaner templates.
{% assign featured_products = section.settings.collection.products %}
{% for product in featured_products limit: 8 %}
{{ product.title }}Tablerow for Grid Layouts
Opens and closes HTML rows every N columns automatically.
<table>
{% tablerow product in collection.products cols: 3 %}
<td>{{ product.title }}</td>If / Elsif / Else
Standard conditional logic.
{% if product.price < 5000 %}
Budget Friendly
{% elsif product.price < 10000 %}Unless (If Not)
The opposite of 'if'. Executes if the condition is false.
{% unless product.available %}
Sold Out!
{% endunless %}Case / When
A switch statement for cleaner multiple-condition checks.
{% case section.settings.color_scheme %}
{% when 'dark' %}
<div class="bg-black text-white">Check if Blank
Liquid treats empty strings, false, and nil as falsy in conditionals.
{% if section.settings.heading != blank %}
<h2>{{ section.settings.heading | escape }}</h2>
{% endif %}Contains Operator
Checks whether a string or array includes a value.
{% if product.tags contains 'featured' %}
<span class="badge">Featured</span>
{% endif %}Default Fallback
Provides a fallback value if the variable is blank.
{{ section.settings.title | default: 'Welcome to our store' }}Discover
Explore Shopify Liquid resources
Related searches
People also learn
Popular guides
Recommended workflows
HTML → Liquid section
Schema-first section
Component conversion