DRY Templates with Snippets
Snippets eliminate copy-paste across sections. A product card appearing on the homepage, collection page, and search results should be one snippets/product-card.liquid file rendered with different parameters.
Reusable product card snippet
{%- comment -%} snippets/product-card.liquid {%- endcomment -%}
{%- liquid
assign image_width = image_width | default: 500
assign show_vendor = show_vendor | default: false
-%}
<article class="product-card">
<a href="{{ product.url }}" class="product-card__link">
{% if product.featured_image %}
{{ product.featured_image
| image_url: width: image_width
| image_tag: loading: 'lazy', alt: product.title, widths: '250, 500, 750'
}}
{% else %}
{{ 'product-placeholder.svg' | asset_url | image_tag: alt: '', class: 'placeholder' }}
{% endif %}
<h3 class="product-card__title">{{ product.title }}</h3>
<div class="product-card__price">
{% if product.compare_at_price > product.price %}
<s>{{ product.compare_at_price | money }}</s>
{% endif %}
<span>{{ product.price | money }}</span>
</div>
{% if show_vendor and product.vendor != blank %}
<span class="product-card__vendor">{{ product.vendor }}</span>
{% endif %}
</a>
</article>- Render with: {% render 'product-card', product: product, show_vendor: true %}
- Default parameters with | default: inside the snippet
- Placeholder image when product.featured_image is nil
- Keep snippets focused — one responsibility per file
Tip: Theme Check reports unused snippets. Delete dead snippets to keep themes maintainable.