Snippets and render

A snippet is a Liquid file in snippets/ you render from anywhere: a product card, an icon, a price.

{% render 'product-card', product: product, sizes: '(min-width: 990px) 25vw, 50vw' %}

Isolated scope

A snippet sees only the variables you pass and the global objects (shop, settings, cart, request…). Variables assigned outside aren’t visible inside, and variables assigned inside don’t leak out. This keeps snippets predictable: a snippet works the same wherever it’s rendered.

{% assign badge = 'New' %}
{% render 'card', product: product %}            {%- comment -%} card can't see badge {%- endcomment -%}
{% render 'card', product: product, badge: badge %}

Rendering for each item

{% render 'product-card' for collection.products as product %}

Inside, product is each item and forloop works as in a for loop.

{% render 'price' with product.selected_or_first_available_variant as variant %}

include isn’t supported

Shopify’s deprecated {% include %} shares the caller’s variables, which makes snippets fragile. Sooquna doesn’t support it: replace it with render and pass what the snippet needs. The theme check flags any include.

Document a snippet

Describe parameters in a {% doc %} block at the top. It isn’t rendered.

snippets/price.liquid

{% doc %}
  Shows a price with the compare-at price struck through.
  @param {variant} variant - The variant to price
{% enddoc %}

Limits

Snippets can render snippets, up to 10 levels deep.