Skip to main content

Snippets

Anchor to OverviewOverview

Snippets are reusable pieces of Liquid code that help you maintain consistency and reduce duplication across your theme. They let you encapsulate complex logic and markup into separate files that can be rendered anywhere in your theme.

Unlike sections and blocks, snippets are invisible to merchants in the theme editor. They're ideal for code that needs to be repeated throughout your theme, such as product cards, navigation elements, or form components.

Anchor to How to use snippetsHow to use snippets

Use the render tag to reference snippets in your Liquid code. It accepts named parameters that you can use to pass data to the snippet.

{% render 'product-card',
product: product,
show_price: true,
max_description_length: 120
%}

For additional options for passing data to snippets, see render tag parameters.

Anchor to Variable scopingVariable scoping

Inside snippets, you can't directly access variables that are created outside the snippet. However, you can:

  • Access global objects like product, collection, and section

  • Receive specific variables passed as parameters

    Variables created inside a snippet remain local to that snippet and aren't accessible outside of it.

Anchor to Documenting snippets with LiquidDocDocumenting snippets with LiquidDoc

LiquidDoc enables you to build and use snippets more effectively by providing a structured way to add documentation to your snippets.

This documentation integrates with development tools to provide real-time feedback, parameter validation, and code completion while you work.

{% doc %}
Product card snippet

@param {string} title - The title to display
@param {number} [max_items] - Optional maximum number of items to show

@example
{% render 'example-snippet', title: 'Featured Products', max_items: 3 %}
{% enddoc %}

Learn more about how to use LiquidDoc to work more effectively with snippets.

Anchor to Next stepsNext steps

Was this page helpful?