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
Handleize
Converts a string into a URL-safe handle (lowercase, spaces to dashes).
{{ 'Hello World' | handleize }}
<!-- Outputs: hello-world -->Replace & Split
String manipulation filters.
{{ 'I like apples' | replace: 'apples', 'oranges' }}
{% assign words = 'one,two,three' | split: ',' %}Money Filter
Formats integers (cents) into localized currency strings.
{{ product.price | money }}
{{ cart.total_price | money_with_currency }}
{{ 2500 | money_without_trailing_zeros }}image_url Filter
Builds a CDN URL for an image at a specific width (WebP when supported).
{{ product.featured_image | image_url: width: 600 }}
{{ section.settings.banner | image_url: width: 2000, height: 800, crop: 'center' }}Escape Filter
Escapes HTML in plain text so user input cannot break your layout.
<h1>{{ section.settings.title | escape }}</h1>
<meta name="description" content="{{ page_description | escape }}">Append & Prepend
Adds characters to the start or end of a string.
{{ product.title | append: ' | ' | append: shop.name }}
{{ section.settings.phone | prepend: 'tel:' }}Truncate Text
Shortens long strings for cards and previews.
{{ article.excerpt | truncate: 120 }}
{{ product.description | strip_html | truncatewords: 25 }}Strip HTML
Removes HTML tags from rich text for plain previews.
{{ article.content | strip_html | truncate: 200 }}Render Snippet
Includes a reusable Liquid file from the /snippets folder.
{% render 'icon-cart' %}Passing Variables to Snippets
Send data into a snippet.
{% render 'product-card', product: current_product, show_vendor: true %}Snippet with For Loop
Keeps heavy markup in snippets while the section owns the loop.
{% for product in collection.products limit: 4 %}
{% render 'product-card', product: product, lazy: true %}
{% endfor %}Capture Snippet Output
Stores rendered HTML in a variable for reuse.
{% capture card_html %}
{% render 'product-card', product: product %}
{% endcapture %}Section Rendering API
Fetch just the HTML of a section without reloading the page.
fetch('/?section_id=cart-drawer')
.then(response => response.text())
.then(html => console.log(html));Lazy Load Images
Defers loading images below the fold until they are near the viewport.
{{ product.featured_image | image_url: width: 800 | image_tag: loading: 'lazy', decoding: 'async' }}Responsive image_tag
Lets Shopify generate srcset and sizes for you.
{{ product.featured_image | image_url: width: 1200 | image_tag:
loading: 'lazy',
sizes: '(min-width: 990px) 50vw, 100vw',Avoid Nested Loops
Deep nesting can hit Shopify Liquid render limits and slow TTFB.
{% comment %} Bad: loop inside loop inside loop {% endcomment %}
{% for collection in collections %}
{% for product in collection.products %}Paginate Large Lists
Shopify caps unpaginated product loops at 50 items.
{% paginate collection.products by 24 %}
{% for product in collection.products %}
{% render 'product-card', product: product %}Defer Non-Critical Scripts
Loads JavaScript after HTML parsing when possible.
<script src="{{ 'theme.js' | asset_url }}" defer></script>
{% if template.name == 'product' %}
<script src="{{ 'product-form.js' | asset_url }}" defer></script>Basic Section Schema
The minimum required JSON to make a section editable.
{% schema %}
{
"name": "Custom Banner",Block Schema Definition
How to define blocks inside a section schema.
"blocks": [
{
"type": "slide",Text Setting in Schema
The most common setting type for headings and labels.
{
"type": "text",
"id": "heading",Richtext Schema Setting
Lets merchants use bold, links, and lists in the theme editor.
{
"type": "richtext",
"id": "body",Range Schema Setting
Numeric slider with min, max, step, and unit.
{
"type": "range",
"id": "padding_top",Select Schema Setting
Dropdown that drives layout or style variants in Liquid.
{
"type": "select",
"id": "layout",Discover
Explore Shopify Liquid resources
Related searches
People also learn
Popular guides
Recommended workflows
HTML → Liquid section
Schema-first section
Component conversion