# Snippets

> Snippets are reusable Liquid fragments in a Shoplazza Theme. Learn where they live and how to include or render one from a layout, template, or section.

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

```text title="Directory"
└── theme
    ...
    ├── snippets
    |   ├── product-card.liquid
    |   ├── navigation.liquid
    |   ...
    ...
```

## Usage

### Include a snippet

Use the Liquid [`include`](/docs/theme/references/liquid/tags/theme-tags#include) tag to render a snippet inside another Liquid file:

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

You can also use the [`render`](/docs/theme/references/liquid/tags/theme-tags#render) tag, which renders the snippet in an isolated scope:

```liquid
{% 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:

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

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

```liquid
{% 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](/docs/theme/architecture/sections/overview) 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.
