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
Collection Featured Image
Renders the image uploaded for the collection in the admin.
{% if collection.image %}
{{ collection.image | image_url: width: 1600 | image_tag: loading: 'lazy', alt: collection.title | escape }}
{% endif %}Collection from Section Setting
Loops products from a collection the merchant picked in the theme editor.
{% assign featured = section.settings.collection %}
{% if featured != blank %}
{% for product in featured.products limit: section.settings.limit %}Paginate Blog Articles
Pagination works for blogs too—not only collections.
{% paginate blog.articles by 6 %}
{% for article in blog.articles %}
<h2><a href="{{ article.url }}">{{ article.title }}</a></h2>Cart Item Count & Total
Displays the total number of items and the total price of the cart.
{{ cart.item_count }} items
{{ cart.total_price | money_with_currency }}Cart Items Loop
Loops through all items currently in the cart.
{% for item in cart.items %}
<img src="{{ item.image | image_url: width: 100 }}">
<h3>{{ item.product.title }}</h3>Empty Cart Check
Shows different markup when the cart has zero items.
{% if cart.item_count == 0 %}
<p>Your cart is empty.</p>
<a href="{{ routes.all_products_collection_url }}">Continue shopping</a>Cart Subtotal vs Total
Displays line totals; cart.total_price includes discounts where applicable.
<p>Subtotal: {{ cart.total_price | money }}</p>
<p>Items: {{ cart.item_count }}</p>Line Item Variant Title
Shows the variant name (e.g. Size M / Color Black) for each cart line.
{% for item in cart.items %}
<p class="line-item__variant">{{ item.variant.title }}</p>
{% endfor %}Line Item Properties
Outputs custom properties added at add-to-cart (engraving, gift message, etc.).
{% for item in cart.items %}
{% unless item.properties == empty %}
<ul>Cart Note Field
Outputs the optional note customers leave for the store.
<textarea name="note">{{ cart.note }}</textarea>Check if Logged In
Checks if a customer is currently logged into their account.
{% if customer %}
Welcome back, {{ customer.first_name }}!
<a href="{{ routes.account_url }}">My Account</a>Customer Full Name
Outputs first and last name, or a combined name when available.
{{ customer.name }}
<!-- Or separately -->
{{ customer.first_name }} {{ customer.last_name }}Customer Account Links
Uses Shopify route objects for correct login, register, and logout URLs.
<a href="{{ routes.account_url }}">Account</a>
<a href="{{ routes.account_login_url }}">Log in</a>
<a href="{{ routes.account_register_url }}">Create account</a>Customer Email & Orders
Shows account email and loops recent orders on the account page.
<p>{{ customer.email }}</p>
{% for order in customer.orders limit: 5 %}
<a href="{{ order.customer_url }}">Order {{ order.name }} — {{ order.total_price | money }}</a>Default Customer Address
Outputs the customer's default shipping address when set.
{% if customer.default_address %}
<address>
{{ customer.default_address.address1 }}<br>Blog Articles Loop
Loops through articles in a specific blog (e.g., 'news').
{% for article in blogs['news'].articles limit: 3 %}
<h2>{{ article.title }}</h2>
<p>{{ article.excerpt_or_content | truncatewords: 20 }}</p>Article Title & URL
Standard article heading and permalink on article templates.
<h1>{{ article.title }}</h1>
<p><time datetime="{{ article.published_at | date: '%Y-%m-%d' }}">{{ article.published_at | date: format: 'abbreviated_date' }}</time></p>Article Content
Outputs the full article body HTML from the blog editor.
<div class="article-content rte">
{{ article.content }}
</div>Article Author & Image
Shows byline and featured image when present.
{% if article.image %}
{{ article.image | image_url: width: 1200 | image_tag: loading: 'lazy', alt: article.title | escape }}
{% endif %}Current Blog Title
Outputs the name of the blog handle you are viewing (News, Journal, etc.).
<h1>{{ blog.title }}</h1>
<p>{{ blog.articles_count }} articles</p>Loop Articles on Blog Template
Standard loop when you are already on a blog listing template.
{% for article in blog.articles %}
<article>
<h2><a href="{{ article.url }}">{{ article.title }}</a></h2>Global Theme Settings
Access settings defined in settings_schema.json (globally available).
{{ settings.color_primary }}
{{ settings.social_instagram_link }}Richtext Output
Outputs a richtext schema setting properly.
<div class="rte">
{{ section.settings.text }}
</div>Select Setting Condition
Using a dropdown select setting to change layout logic.
{% if section.settings.alignment == 'center' %}
<div class="text-center">
{% else %}Discover
Explore Shopify Liquid resources
Related searches
People also learn
Popular guides
Recommended workflows
HTML → Liquid section
Schema-first section
Component conversion