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
Render Section Setting
Outputs a text or basic setting value from the section schema.
{{ section.settings.title }}Render Image (Modern)
The modern, performant way to render an image picker setting with automatic WebP support.
{{ section.settings.image | image_url: width: 800 | image_tag: loading: 'lazy', class: 'my-custom-class' }}Basic For Loop
Loops through section blocks to render repeated content like a gallery or FAQ.
{% for block in section.blocks %}
<div {{ block.shopify_attributes }}>
{{ block.settings.heading }}Product Price Formatting
Formats the product price according to the store's currency settings.
{{ product.price | money }}
<!-- Compare at price -->
{{ product.compare_at_price | money }}Product Vendor & Type
Outputs the vendor (brand) and product type.
{{ product.vendor }}
{{ product.type }}Product Tags Loop
Iterates through all tags attached to a product.
{% for tag in product.tags %}
<span class="badge">{{ tag }}</span>
{% endfor %}First Available Variant
Gets the first variant that is currently in stock.
{% assign current_variant = product.selected_or_first_available_variant %}
{{ current_variant.price | money }}Product Media Gallery
Loops through all images, videos, and 3D models attached to a product.
{% for media in product.media %}
{% render 'media', media: media %}
{% endfor %}Product Description
Outputs the main product description HTML from the admin.
<div class="product-description rte">
{{ product.description }}
</div>Product Description (Plain Preview)
Strips HTML tags for short previews in cards or search results.
{{ product.description | strip_html | truncate: 120 }}Product URL
The canonical URL path for the current product.
<a href="{{ product.url }}">{{ product.title }}</a>Check Product Availability
Returns true if at least one variant can be purchased.
{% if product.available %}
<button type="submit" name="add">Add to cart</button>
{% else %}Featured Product Image
Renders the product's main image using modern Shopify image filters.
{% if product.featured_image %}
{{ product.featured_image | image_url: width: 1200 | image_tag: loading: 'eager', alt: product.featured_image.alt | escape }}
{% endif %}Featured Media (OS 2.0)
Accesses the primary media object, which may be an image, video, or 3D model.
{% if product.featured_media %}
{% render 'product-media', media: product.featured_media %}
{% endif %}Loop All Variants
Iterates every variant (size, color, etc.) on a product.
{% for variant in product.variants %}
<option value="{{ variant.id }}" {% unless variant.available %}disabled{% endunless %}>
{{ variant.title }} — {{ variant.price | money }}Variant SKU & Barcode
Outputs inventory identifiers for the selected or first available variant.
{% assign v = product.selected_or_first_available_variant %}
<p>SKU: {{ v.sku }}</p>
<p>Barcode: {{ v.barcode }}</p>Product Options (Size, Color)
Loops option names and values—for example Color: Red, Blue.
{% for option in product.options_with_values %}
<fieldset>
<legend>{{ option.name }}</legend>Check for Specific Tag
Shows content only when a product has a given tag.
{% if product.tags contains 'sale' %}
<span class="badge badge--sale">On sale</span>
{% endif %}Collection Title & Description
Outputs the collection's title and its rich text description.
<h1>{{ collection.title }}</h1>
<div>{{ collection.description }}</div>Loop Collection Products
Iterates through products in a specific collection.
{% for product in collection.products %}
<h2>{{ product.title }}</h2>
{% else %}Paginate Collection
Required for collections with more than 50 products.
{% paginate collection.products by 12 %}
{% for product in collection.products %}
<!-- Render product card -->Collection URL & Handle
Builds links and CSS hooks from the collection object.
<a href="{{ collection.url }}">{{ collection.title }}</a>
<!-- Handle for data attributes -->
data-collection="{{ collection.handle }}"Collection Product Count
Shows how many products belong to the collection.
<p>{{ collection.products_count }} products</p>Discover
Explore Shopify Liquid resources
Related searches
People also learn
Popular guides
Recommended workflows
HTML → Liquid section
Schema-first section
Component conversion