Snippets Reference

Auto-generate your docs

Snippets are reusable pieces of code that can be included in templates, sections, and other snippets. Horizon includes 93 snippets for various functionality.

Overview

Snippets help maintain DRY (Don’t Repeat Yourself) code principles by centralizing common functionality. They can be included using the render tag:

{% render 'snippet-name', param: value %}

Total Snippets: 93

Snippet Categories

Product Snippets (11)

Snippet	File	Description
Product Card	`product-card.liquid`	Complete product card display
Product Grid	`product-grid.liquid`	Grid layout for products
Product Media	`product-media.liquid`	Product images and videos
Product Media Gallery Content	`product-media-gallery-content.liquid`	Gallery content wrapper
Product Information Content	`product-information-content.liquid`	Product details content
Price	`price.liquid`	Price formatting and display
Unit Price	`unit-price.liquid`	Unit pricing display
SKU	`sku.liquid`	SKU number display
Volume Pricing Info	`volume-pricing-info.liquid`	Bulk pricing information
Strikethrough Variant	`strikethrough-variant.liquid`	Strike-through styling for sold out variants
Tax Info	`tax-info.liquid`	Tax information display

Cart & Checkout Snippets (6)

Snippet	File	Description
Cart Products	`cart-products.liquid`	Cart items list
Cart Summary	`cart-summary.liquid`	Order total summary
Cart Bubble	`cart-bubble.liquid`	Cart item count badge
Add to Cart Button	`add-to-cart-button.liquid`	Add to cart functionality
Quantity Selector	`quantity-selector.liquid`	Quantity input control
Quick Add	`quick-add.liquid`	Quick add to cart
Quick Add Modal	`quick-add-modal.liquid`	Quick add popup

Variant & Swatch Snippets (3)

Snippet	File	Description
Variant Main Picker	`variant-main-picker.liquid`	Main variant selector
Variant Swatches	`variant-swatches.liquid`	Variant color/pattern swatches
Swatch	`swatch.liquid`	Individual swatch display

Search Snippets (6)

Snippet	File	Description
Search	`search.liquid`	Search functionality
Search Modal	`search-modal.liquid`	Search popup
Predictive Search Products List	`predictive-search-products-list.liquid`	Auto-suggest products
Predictive Search Resource Carousel	`predictive-search-resource-carousel.liquid`	Search result carousel
Predictive Search Empty State	`predictive-search-empty-state.liquid`	No results message
Sorting	`sorting.liquid`	Sort controls

Collection Snippets (4)

Snippet	File	Description
Collection Card	`collection-card.liquid`	Collection card display
Editorial Collection Grid	`editorial-collection-grid.liquid`	Editorial-style collection layout
List Filter	`list-filter.liquid`	Collection filtering
Price Filter	`price-filter.liquid`	Price range filter
Filter Remove Buttons	`filter-remove-buttons.liquid`	Active filter removal

Resource Snippets (5)

Snippet	File	Description
Resource Card	`resource-card.liquid`	Generic resource card
Resource List	`resource-list.liquid`	Resource list display
Resource List Carousel	`resource-list-carousel.liquid`	Carousel of resources
Resource Image	`resource-image.liquid`	Resource image display
Card Gallery	`card-gallery.liquid`	Gallery of cards

Media Snippets (5)

Snippet	File	Description
Media	`media.liquid`	Generic media display
Image	`image.liquid`	Responsive image
Video	`video.liquid`	Video player
Background Media	`background-media.liquid`	Background image/video
Icon or Image	`icon-or-image.liquid`	Icon or image selector

Slideshow Snippets (5)

Snippet	File	Description
Slideshow	`slideshow.liquid`	Main slideshow component
Slideshow Slide	`slideshow-slide.liquid`	Individual slide
Slideshow Controls	`slideshow-controls.liquid`	Slide navigation
Slideshow Arrows	`slideshow-arrows.liquid`	Navigation arrows
Slideshow Arrow	`slideshow-arrow.liquid`	Single arrow

Header & Navigation Snippets (5)

Snippet	File	Description
Header Row	`header-row.liquid`	Header row layout
Header Drawer	`header-drawer.liquid`	Mobile navigation drawer
Header Actions	`header-actions.liquid`	Header action buttons
Mega Menu List	`mega-menu-list.liquid`	Dropdown mega menu
Localization Form	`localization-form.liquid`	Language/currency selector

Layout & Grid Snippets (7)

Snippet	File	Description
Section	`section.liquid`	Section wrapper
Group	`group.liquid`	Block grouping
Bento Grid	`bento-grid.liquid`	Bento-style grid layout
Editorial Product Grid	`editorial-product-grid.liquid`	Editorial product layout
Editorial Blog Grid	`editorial-blog-grid.liquid`	Editorial blog layout
Grid Density Controls	`grid-density-controls.liquid`	Grid spacing controls
Overflow List	`overflow-list.liquid`	Scrollable list

Form Snippets (3)

Snippet	File	Description
Blog Comment Form	`blog-comment-form.liquid`	Comment submission form
Checkbox	`checkbox.liquid`	Checkbox input
Gift Card Recipient Form	`gift-card-recipient-form.liquid`	Gift card form

UI Component Snippets (8)

Snippet	File	Description
Button	`button.liquid`	Button component
Text	`text.liquid`	Text display
Jumbo Text	`jumbo-text.liquid`	Large text display
Icon	`icon.liquid`	Icon rendering
Divider	`divider.liquid`	Visual divider
Overlay	`overlay.liquid`	Modal overlay
Pagination Controls	`pagination-controls.liquid`	Page navigation
Link Featured Image	`link-featured-image.liquid`	Linked image

Style Snippets (11)

Snippet	File	Description
Stylesheets	`stylesheets.liquid`	CSS loading
Theme Styles Variables	`theme-styles-variables.liquid`	CSS custom properties
Color Schemes	`color-schemes.liquid`	Color scheme styles
Typography Style	`typography-style.liquid`	Typography CSS
Spacing Style	`spacing-style.liquid`	Spacing utilities
Spacing Padding	`spacing-padding.liquid`	Padding helpers
Size Style	`size-style.liquid`	Size utilities
Gap Style	`gap-style.liquid`	Gap utilities
Layout Panel Style	`layout-panel-style.liquid`	Panel layout styles
Border Override	`border-override.liquid`	Border customization
Password Layout Styles	`password-layout-styles.liquid`	Password page styles

Font & Typography Snippets (4)

Snippet	File	Description
Fonts	`fonts.liquid`	Font loading
Menu Font Styles	`menu-font-styles.liquid`	Menu typography
Submenu Font Styles	`submenu-font-styles.liquid`	Submenu typography
Format Price	`format-price.liquid`	Price formatting

Utility Snippets (10)

Snippet	File	Description
Util Product Media Sizes Attr	`util-product-media-sizes-attr.liquid`	Media size attributes
Util Product Grid Card Size	`util-product-grid-card-size.liquid`	Grid card sizing
Util Mega Menu Img Sizes Attr	`util-mega-menu-img-sizes-attr.liquid`	Menu image sizes
Util Autofill Img Size Attr	`util-autofill-img-size-attr.liquid`	Auto image sizing
Scripts	`scripts.liquid`	JavaScript loading
Meta Tags	`meta-tags.liquid`	SEO meta tags
Theme Editor	`theme-editor.liquid`	Theme customizer
Skip to Content Link	`skip-to-content-link.liquid`	Accessibility link

Using Snippets

Basic Usage

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

With Multiple Parameters

{% render 'button',
  label: 'Shop Now',
  style: 'primary',
  link: collection.url
%}

Assigning Variables

{% liquid
  assign show_vendor = true
  render 'product-card', product: product, show_vendor: show_vendor
%}

Snippet Best Practices

Do:

Pass parameters explicitly for clarity
Keep snippets focused on a single responsibility
Document expected parameters in comments
Use semantic naming for snippet files

Don’t:

Access global variables when parameters can be passed
Create deeply nested snippet renders (max 3 levels)
Mix presentation and logic in the same snippet
Forget to handle missing or nil parameters

Common Snippet Patterns

Conditional Rendering

{% if product %}
  {% render 'product-card', product: product %}
{% endif %}

Loop Rendering

{% for product in collection.products %}
  {% render 'product-card', product: product %}
{% endfor %}

Default Parameters

{% liquid
  # In snippet: button.liquid
  assign button_style = button_style | default: 'primary'
  assign button_label = button_label | default: 'Click here'
%}

Performance Considerations

Snippets are processed on each render. For frequently used snippets:

Cache rendered output when possible
Minimize database queries within snippets
Use the {% liquid %} tag for better performance
Consider using sections for heavy components

Sections Reference

Sections that use snippets

Blocks Reference

Blocks that render snippets

⌘I

API Reference

Resources

Snippets Reference

Overview

Snippet Categories

Using Snippets

Basic Usage

With Multiple Parameters

Assigning Variables

Snippet Best Practices

Common Snippet Patterns

Conditional Rendering

Loop Rendering

Default Parameters

Performance Considerations

Sections Reference

Blocks Reference

​Overview

​Snippet Categories

​Using Snippets

​Basic Usage

​With Multiple Parameters

​Assigning Variables

​Snippet Best Practices

​Common Snippet Patterns

​Conditional Rendering

​Loop Rendering

​Default Parameters

​Performance Considerations

​Related Resources

Sections Reference

Blocks Reference

Overview

Snippet Categories

Using Snippets

Basic Usage

With Multiple Parameters

Assigning Variables

Snippet Best Practices

Common Snippet Patterns

Conditional Rendering

Loop Rendering

Default Parameters

Performance Considerations

Related Resources