render & include

Reusable Snippets with render

Snippets are partial Liquid files in snippets/. The {% render %} tag inserts a snippet with an isolated variable scope — the snippet only sees variables you pass explicitly (plus global objects like shop and routes).

{%- render 'product-card',
    product: product,
    show_vendor: true,
    image_width: 500
-%}

1. Create snippets/product-card.liquid with the card markup
2. Pass product and optional flags as parameters
3. Inside the snippet, access product.title, show_vendor, image_width directly
4. Variables from the parent template are NOT visible unless passed

Why render Replaced include

{% include 'snippet' %} is deprecated. include shared the entire parent scope, causing naming collisions and making snippets harder to reason about. Theme Check flags every include — migrate to render.

{%- comment -%} snippets/icon-cart.liquid {%- endcomment -%}
<svg aria-hidden="true" class="icon icon-cart" width="20" height="20">...</svg>