5 Shopify Liquid Snippets Every Developer Should Know

Introduction


Shopify’s Liquid templating language is powerful—yet many themes hide advanced tricks. Whether you’re building a custom theme or tweaking an existing one, these five snippets will save you time and unlock new possibilities.

Snippet 1: Show a Custom Banner on a Specific Collection

liquidCopyEdit{% if collection.handle == 'summer-sale' %}
<div class="promo-banner">
<p>🔥 Summer Sale: 20% off all beachwear!</p>
</div>
{% endif %}

Snippet 2: Display Sold-Out Badge on Product Card

liquidCopyEdit{% if product.available == false %}
<span class="badge sold-out">Sold Out</span>
{% endif %}

Snippet 3: Lazy-Load Product Images

liquidCopyEdit<img 
src="{{ 'placeholder.gif' | asset_url }}"
data-src="{{ product | img_url: 'medium' }}"
class="lazyload"
alt="{{ product.title }}">

Snippet 4: Add Dynamic Meta-Fields to Liquid Templates

liquidCopyEdit{% for block in section.blocks %}
<h3>{{ block.settings.title }}</h3>
<p>{{ block.settings.text }}</p>
{% endfor %}

Snippet 5: Show Recently Viewed Products

{% if shop.metafields.recently_viewed %}
{% assign recent = shop.metafields.recently_viewed | split: ',' | reverse %}
<ul class="recent-products">
{% for id in recent limit:4 %}
{% assign p = all_products[id] %}
<li>
<a href="{{ p.url }}">
<img src="{{ p.featured_image | img_url: 'thumb' }}" alt="{{ p.title }}">
{{ p.title }}
</a>
</li>
{% endfor %}
</ul>
{% endif %}

Conclusion & CTA


Armed with these Liquid snippets, you can rapidly enhance any Shopify theme. For end-to-end Shopify store builds and advanced Liquid work, contact VJK Web Solutions today.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *