Skip to main content

​
Introduction

Snippets are reusable Liquid components that can be included throughout your Horizon theme. They help maintain consistent functionality and appearance across different sections and templates.

​
What are Snippets?

Snippets are small, reusable pieces of Liquid code stored in the snippets/ directory. They’re designed to be included using the {% render %} tag, which creates an isolated scope for the snippet.

​
Key Features

  • Isolated Scope: Snippets rendered with {% render %} have their own variable scope
  • Parameterized: Accept parameters for customization
  • Reusable: Can be used across multiple sections, blocks, and templates
  • Modular: Encourage separation of concerns and maintainability

​
Common Snippet Categories

The Horizon theme includes several categories of snippets:

​
Product Components

  • product-card.liquid - Display product information in card format
  • price.liquid - Format and display product pricing
  • product-media.liquid - Render product images and videos
  • variant-swatches.liquid - Display variant selection swatches
  • quick-add.liquid - Quick add to cart functionality

​
Cart Components

  • cart-summary.liquid - Display cart totals and checkout buttons
  • cart-products.liquid - Render cart line items
  • add-to-cart-button.liquid - Standalone add to cart button

​
UI Components

  • button.liquid - Styled button links
  • icon.liquid - SVG icon rendering
  • image.liquid - Responsive image rendering
  • media.liquid - Media element wrapper

​
Form Components

  • checkbox.liquid - Styled checkbox inputs
  • quantity-selector.liquid - Product quantity input
  • search.liquid - Search input field

​
Layout Components

  • section.liquid - Section wrapper with styling
  • group.liquid - Group multiple elements
  • divider.liquid - Visual dividers
  • overlay.liquid - Overlay effects

​
Utility Snippets

  • format-price.liquid - Price formatting helper
  • gap-style.liquid - Spacing utilities
  • size-style.liquid - Size utilities
  • color-schemes.liquid - Color scheme management

​
Usage

Snippets are included using the {% render %} tag: 
{% render 'snippet-name', parameter: value %}

​
Example

{% render 'product-card', 
  product: product, 
  block: block,
  children: children 
%}

​
Documentation Structure

Parameters are documented using the {%- doc -%} tag at the top of each snippet file: 
{%- doc -%}
  Brief description of the snippet.

  @param {type} parameter_name - Description
  @param {type} [optional_parameter] - Optional parameter description
{%- enddoc -%}

​
Best Practices

Always use {% render %} instead of {% include %} to maintain proper variable scoping and prevent unintended side effects.
Always include {%- doc -%} blocks at the top of snippets to document accepted parameters and their types.
Use the default filter to provide fallback values for optional parameters:
{% assign show_price = show_price | default: true %}
Each snippet should have a single, well-defined purpose. Break complex functionality into smaller, composable snippets.

​
Next Steps

Product Card

Learn how to use the product card snippet

Cart Summary

Display cart totals and checkout options

Buttons

Implement styled buttons and actions

Sections

Explore how sections use snippets

Build docs developers (and LLMs) love

Get started for freeTalk to us