Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Shopify/horizon/llms.txt

Use this file to discover all available pages before exploring further.

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

SnippetFileDescription
Product Cardproduct-card.liquidComplete product card display
Product Gridproduct-grid.liquidGrid layout for products
Product Mediaproduct-media.liquidProduct images and videos
Product Media Gallery Contentproduct-media-gallery-content.liquidGallery content wrapper
Product Information Contentproduct-information-content.liquidProduct details content
Priceprice.liquidPrice formatting and display
Unit Priceunit-price.liquidUnit pricing display
SKUsku.liquidSKU number display
Volume Pricing Infovolume-pricing-info.liquidBulk pricing information
Strikethrough Variantstrikethrough-variant.liquidStrike-through styling for sold out variants
Tax Infotax-info.liquidTax information display
SnippetFileDescription
Cart Productscart-products.liquidCart items list
Cart Summarycart-summary.liquidOrder total summary
Cart Bubblecart-bubble.liquidCart item count badge
Add to Cart Buttonadd-to-cart-button.liquidAdd to cart functionality
Quantity Selectorquantity-selector.liquidQuantity input control
Quick Addquick-add.liquidQuick add to cart
Quick Add Modalquick-add-modal.liquidQuick add popup
SnippetFileDescription
Variant Main Pickervariant-main-picker.liquidMain variant selector
Variant Swatchesvariant-swatches.liquidVariant color/pattern swatches
Swatchswatch.liquidIndividual swatch display
SnippetFileDescription
Searchsearch.liquidSearch functionality
Search Modalsearch-modal.liquidSearch popup
Predictive Search Products Listpredictive-search-products-list.liquidAuto-suggest products
Predictive Search Resource Carouselpredictive-search-resource-carousel.liquidSearch result carousel
Predictive Search Empty Statepredictive-search-empty-state.liquidNo results message
Sortingsorting.liquidSort controls
SnippetFileDescription
Collection Cardcollection-card.liquidCollection card display
Editorial Collection Grideditorial-collection-grid.liquidEditorial-style collection layout
List Filterlist-filter.liquidCollection filtering
Price Filterprice-filter.liquidPrice range filter
Filter Remove Buttonsfilter-remove-buttons.liquidActive filter removal
SnippetFileDescription
Resource Cardresource-card.liquidGeneric resource card
Resource Listresource-list.liquidResource list display
Resource List Carouselresource-list-carousel.liquidCarousel of resources
Resource Imageresource-image.liquidResource image display
Card Gallerycard-gallery.liquidGallery of cards
SnippetFileDescription
Mediamedia.liquidGeneric media display
Imageimage.liquidResponsive image
Videovideo.liquidVideo player
Background Mediabackground-media.liquidBackground image/video
Icon or Imageicon-or-image.liquidIcon or image selector
SnippetFileDescription
Slideshowslideshow.liquidMain slideshow component
Slideshow Slideslideshow-slide.liquidIndividual slide
Slideshow Controlsslideshow-controls.liquidSlide navigation
Slideshow Arrowsslideshow-arrows.liquidNavigation arrows
Slideshow Arrowslideshow-arrow.liquidSingle arrow
SnippetFileDescription
Header Rowheader-row.liquidHeader row layout
Header Drawerheader-drawer.liquidMobile navigation drawer
Header Actionsheader-actions.liquidHeader action buttons
Mega Menu Listmega-menu-list.liquidDropdown mega menu
Localization Formlocalization-form.liquidLanguage/currency selector
SnippetFileDescription
Sectionsection.liquidSection wrapper
Groupgroup.liquidBlock grouping
Bento Gridbento-grid.liquidBento-style grid layout
Editorial Product Grideditorial-product-grid.liquidEditorial product layout
Editorial Blog Grideditorial-blog-grid.liquidEditorial blog layout
Grid Density Controlsgrid-density-controls.liquidGrid spacing controls
Overflow Listoverflow-list.liquidScrollable list
SnippetFileDescription
Blog Comment Formblog-comment-form.liquidComment submission form
Checkboxcheckbox.liquidCheckbox input
Gift Card Recipient Formgift-card-recipient-form.liquidGift card form
SnippetFileDescription
Buttonbutton.liquidButton component
Texttext.liquidText display
Jumbo Textjumbo-text.liquidLarge text display
Iconicon.liquidIcon rendering
Dividerdivider.liquidVisual divider
Overlayoverlay.liquidModal overlay
Pagination Controlspagination-controls.liquidPage navigation
Link Featured Imagelink-featured-image.liquidLinked image
SnippetFileDescription
Stylesheetsstylesheets.liquidCSS loading
Theme Styles Variablestheme-styles-variables.liquidCSS custom properties
Color Schemescolor-schemes.liquidColor scheme styles
Typography Styletypography-style.liquidTypography CSS
Spacing Stylespacing-style.liquidSpacing utilities
Spacing Paddingspacing-padding.liquidPadding helpers
Size Stylesize-style.liquidSize utilities
Gap Stylegap-style.liquidGap utilities
Layout Panel Stylelayout-panel-style.liquidPanel layout styles
Border Overrideborder-override.liquidBorder customization
Password Layout Stylespassword-layout-styles.liquidPassword page styles
SnippetFileDescription
Fontsfonts.liquidFont loading
Menu Font Stylesmenu-font-styles.liquidMenu typography
Submenu Font Stylessubmenu-font-styles.liquidSubmenu typography
Format Priceformat-price.liquidPrice formatting
SnippetFileDescription
Util Product Media Sizes Attrutil-product-media-sizes-attr.liquidMedia size attributes
Util Product Grid Card Sizeutil-product-grid-card-size.liquidGrid card sizing
Util Mega Menu Img Sizes Attrutil-mega-menu-img-sizes-attr.liquidMenu image sizes
Util Autofill Img Size Attrutil-autofill-img-size-attr.liquidAuto image sizing
Scriptsscripts.liquidJavaScript loading
Meta Tagsmeta-tags.liquidSEO meta tags
Theme Editortheme-editor.liquidTheme customizer
Skip to Content Linkskip-to-content-link.liquidAccessibility 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

Build docs developers (and LLMs) love