Blocks Reference

Auto-generate your docs

Blocks are reusable components that can be added to sections. Horizon includes 94 blocks for building rich, interactive experiences.

Overview

Blocks are organized into two categories:

Public Blocks: Can be added through the theme editor (no underscore prefix)
Private Blocks: Internal blocks used by sections (underscore prefix)

Total Blocks: 94 (46 public, 48 private)

Public Blocks (46)

Product Blocks (12)

Block	File	Description
Product Title	`product-title.liquid`	Display product title
Product Description	`product-description.liquid`	Show product description
Product Custom Property	`product-custom-property.liquid`	Custom product metafields
Product Inventory	`product-inventory.liquid`	Stock availability display
Product Recommendations	`product-recommendations.liquid`	Related product suggestions
Product Card	`product-card.liquid`	Complete product card
Price	`price.liquid`	Product price display
SKU	`sku.liquid`	Product SKU number
Variant Picker	`variant-picker.liquid`	Product variant selector
Swatches	`swatches.liquid`	Color/pattern swatches
Quantity	`quantity.liquid`	Quantity selector
Buy Buttons	`buy-buttons.liquid`	Add to cart and checkout buttons

Cart & Checkout Blocks (2)

Block	File	Description
Add to Cart	`add-to-cart.liquid`	Add to cart button
Accelerated Checkout	`accelerated-checkout.liquid`	Express checkout buttons (Apple Pay, etc.)

Content Blocks (10)

Block	File	Description
Text	`text.liquid`	Rich text content
Jumbo Text	`jumbo-text.liquid`	Large display text
Image	`image.liquid`	Image display
Video	`video.liquid`	Video player
Icon	`icon.liquid`	Icon display
Button	`button.liquid`	Call-to-action button
Spacer	`spacer.liquid`	Vertical spacing
Comparison Slider	`comparison-slider.liquid`	Before/after image slider
Custom Liquid	`custom-liquid.liquid`	Custom Liquid code
Group	`group.liquid`	Group multiple blocks

Collection Blocks (3)

Block	File	Description
Collection Card	`collection-card.liquid`	Collection card display
Collection Title	`collection-title.liquid`	Collection name
Featured Collection	`featured-collection.liquid`	Highlighted collection

Footer Blocks (4)

Block	File	Description
Footer Copyright	`footer-copyright.liquid`	Copyright notice
Footer Policy List	`footer-policy-list.liquid`	Store policies links
Social Links	`social-links.liquid`	Social media icons
Payment Icons	`payment-icons.liquid`	Accepted payment methods

Navigation & Menu Blocks (3)

Block	File	Description
Menu	`menu.liquid`	Navigation menu
Logo	`logo.liquid`	Site logo
Filters	`filters.liquid`	Collection filtering

Form Blocks (4)

Block	File	Description
Email Signup	`email-signup.liquid`	Newsletter subscription
Contact Form	`contact-form.liquid`	Contact form
Contact Form Submit Button	`contact-form-submit-button.liquid`	Submit button for forms
Review	`review.liquid`	Product review display

Utility Blocks (8)

Block	File	Description
Accordion	`accordion.liquid`	Collapsible content
Page	`page.liquid`	Page content display
Page Content	`page-content.liquid`	Main page content
Popup Link	`popup-link.liquid`	Modal popup trigger
Follow on Shop	`follow-on-shop.liquid`	Shop app follow button
App Block	`@app`	Third-party app blocks

Private Blocks (48)

These blocks are used internally by sections and cannot be added directly through the theme editor.

Featured Product Private Blocks (5)

Block	File	Purpose
Featured Product	`_featured-product.liquid`	Featured product wrapper
Featured Product Price	`_featured-product-price.liquid`	Price display
Featured Product Gallery	`_featured-product-gallery.liquid`	Image gallery
Featured Product Information Carousel	`_featured-product-information-carousel.liquid`	Info carousel

Product List Private Blocks (4)

Block	File	Purpose
Product List Text	`_product-list-text.liquid`	Text content
Product List Content	`_product-list-content.liquid`	Main content
Product List Button	`_product-list-button.liquid`	CTA button

Product Card Private Blocks (4)

Block	File	Purpose
Product Card	`_product-card.liquid`	Card wrapper
Product Card Group	`_product-card-group.liquid`	Card grouping
Product Card Gallery	`_product-card-gallery.liquid`	Card image gallery
Product Details	`_product-details.liquid`	Product information

Media Private Blocks (3)

Block	File	Purpose
Media	`_media.liquid`	Media display
Media Without Appearance	`_media-without-appearance.liquid`	Unstyled media
Product Media Gallery	`_product-media-gallery.liquid`	Product images

Content Private Blocks (5)

Block	File	Purpose
Content	`_content.liquid`	Content wrapper
Content Without Appearance	`_content-without-appearance.liquid`	Unstyled content
Heading	`_heading.liquid`	Heading text
Inline Text	`_inline-text.liquid`	Inline text display
Divider	`_divider.liquid`	Section divider

Collection Private Blocks (6)

Block	File	Purpose
Collection Card	`_collection-card.liquid`	Card wrapper
Collection Card Image	`_collection-card-image.liquid`	Card image
Collection Image	`_collection-image.liquid`	Collection image
Collection Info	`_collection-info.liquid`	Collection details
Collection Link	`_collection-link.liquid`	Collection link
Inline Collection Title	`_inline-collection-title.liquid`	Title display

Blog Private Blocks (7)

Block	File	Purpose
Blog Post Card	`_blog-post-card.liquid`	Post card
Blog Post Content	`_blog-post-content.liquid`	Post content
Blog Post Description	`_blog-post-description.liquid`	Post excerpt
Blog Post Featured Image	`_blog-post-featured-image.liquid`	Featured image
Blog Post Image	`_blog-post-image.liquid`	Post image
Blog Post Info Text	`_blog-post-info-text.liquid`	Post metadata
Featured Blog Posts Card	`_featured-blog-posts-card.liquid`	Featured post card

Cart Private Blocks (3)

Block	File	Purpose
Cart Title	`_cart-title.liquid`	Cart heading
Cart Summary	`_cart-summary.liquid`	Order summary
Cart Products	`_cart-products.liquid`	Cart items list

Other Private Blocks (11)

Block	File	Purpose
Slide	`_slide.liquid`	Slideshow slide
Layered Slide	`_layered-slide.liquid`	Layered slideshow slide
Marquee	`_marquee.liquid`	Marquee item
Accordion Row	`_accordion-row.liquid`	Accordion item
Card	`_card.liquid`	Generic card
Carousel Content	`_carousel-content.liquid`	Carousel item
Header Logo	`_header-logo.liquid`	Header logo
Header Menu	`_header-menu.liquid`	Header navigation
Search Input	`_search-input.liquid`	Search field
Social Link	`_social-link.liquid`	Social media link
Hotspot Product	`_hotspot-product.liquid`	Product hotspot

Block Structure

Blocks follow a standard Liquid structure with schema definitions:

<!-- Block Rendering Logic -->
<div class="block block--{{ block.type }}">
  {{ block.settings.content }}
</div>

<!-- Block Schema (in parent section) -->
{% schema %}
{
  "blocks": [
    {
      "type": "text",
      "name": "Text",
      "settings": [
        {
          "type": "richtext",
          "id": "content",
          "label": "Content"
        }
      ]
    }
  ]
}
{% endschema %}

Common Block Settings

Setting	Type	Description
`heading`	text	Block heading
`text`	richtext	Text content
`image`	image_picker	Image selection
`link`	url	URL link
`button_label`	text	Button text
`color_scheme`	color_scheme	Block color scheme

Usage in Sections

Blocks are added to sections via the blocks array:

{
  "type": "hero",
  "blocks": [
    {
      "type": "heading",
      "settings": {
        "heading": "Welcome"
      }
    },
    {
      "type": "button",
      "settings": {
        "button_label": "Shop Now"
      }
    }
  ]
}

Best Practices

Private blocks (with underscore prefix) should not be modified directly
Always test block combinations for visual compatibility
Keep block content concise and focused

Use semantic block types that describe their content
Group related blocks together using the Group block
Test blocks on mobile and desktop viewports

Sections Reference

Learn about sections that contain blocks

Snippets Reference

Reusable code snippets

⌘I

API Reference

Resources

Blocks Reference

Overview

Public Blocks (46)

Private Blocks (48)

Block Structure

Common Block Settings

Usage in Sections

Best Practices

Sections Reference

Snippets Reference

​Overview

​Public Blocks (46)

​Private Blocks (48)

​Block Structure

​Common Block Settings

​Usage in Sections

​Best Practices

​Related Resources

Sections Reference

Snippets Reference

Overview

Public Blocks (46)

Private Blocks (48)

Block Structure

Common Block Settings

Usage in Sections

Best Practices

Related Resources