Snippets

Snippets are Liquid files that contain smaller, reusable pieces of code. You can reference a snippet in layouts, templates, and sections to avoid duplicating code across your theme.

Snippets are stored in the snippets directory of the theme.

Location

└── theme
    ...
    ├── snippets
    |   ├── product-card.liquid
    |   ├── navigation.liquid
    |   ...
    ...

Usage

Include a snippet

Use the Liquid include tag to render a snippet inside another Liquid file:

{% include 'my-custom-snippet' %}

You can also use the render tag, which renders the snippet in an isolated scope:

{% render 'my-custom-snippet' %}

Pass parameters

You can pass variables to a snippet as parameters. The parameters become available as local variables inside the snippet.

For example, create a product-card.liquid snippet:

<div class="product-card">
  <h2>{{ product.title }}</h2>
  <p>{{ product.description }}</p>
</div>

Then include it in a template and pass a product object:

{% include 'product-card', product: featured_product %}

In the snippet, product refers to the featured_product object passed from the template. {{ product.title }} outputs the featured product's title, and {{ product.description }} outputs its description.

Snippets vs sections

Both snippets and sections allow you to reuse code, but they serve different purposes:

	Snippets	Sections
Merchant-configurable settings	No	Yes (via {% schema %})
Can bundle CSS/JS	No	Yes (via {% stylesheet %} / {% javascript %})
Appears in theme editor	No	Yes
Typical use	Shared markup fragments (cards, icons, pagination)	Customizable page modules (hero banner, product grid)

Use snippets for pure code reuse; use sections when merchants need to customize the content through the theme editor.