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.

Sections are the building blocks of your Shopify store. Horizon includes 41 sections that can be customized and arranged to create unique page layouts.

​
Overview

Sections in Horizon are organized into the following categories:
  • Layout: Header, footer, and navigation sections
  • Content: Hero, media, text, and content sections
  • Product: Product display and information sections
  • Collection: Collection listing and filtering sections
  • Blog: Blog and article display sections
  • Utility: Search, password, and functional sections

​
All Sections

SectionFileDescription
Headerheader.liquidMain site header with navigation
Header Announcementsheader-announcements.liquidAnnouncement bar above header
Footerfooter.liquidMain site footer with content blocks
Footer Utilitiesfooter-utilities.liquidFooter utility links and information
Password Footerpassword-footer.liquidFooter for password-protected pages
SectionFileDescription
Herohero.liquidLarge hero section with media and content
Slideshowslideshow.liquidImage/video slideshow with navigation
Layered Slideshowlayered-slideshow.liquidMulti-layer slideshow with parallax effects
Media with Contentmedia-with-content.liquidMedia paired with text content
Marqueemarquee.liquidScrolling text marquee animation
SectionFileDescription
Product Informationproduct-information.liquidMain product details and purchase options
Featured Product Informationfeatured-product-information.liquidFeatured product with enhanced display
Featured Productfeatured-product.liquidStandalone featured product section
Product Recommendationsproduct-recommendations.liquidAI-powered product recommendations
Product Hotspotsproduct-hotspots.liquidInteractive product hotspot annotations
Product Listproduct-list.liquidCustomizable product list display
SectionFileDescription
Main Collectionmain-collection.liquidPrimary collection page template
Main Collection Listmain-collection-list.liquidList all collections page
Collection Listcollection-list.liquidDisplay multiple collections
Collection Linkscollection-links.liquidNavigational collection links
Carouselcarousel.liquidProduct or content carousel
SectionFileDescription
Main Blogmain-blog.liquidMain blog listing page
Main Blog Postmain-blog-post.liquidIndividual blog post template
Featured Blog Postsfeatured-blog-posts.liquidHighlight selected blog posts
SectionFileDescription
Logologo.liquidLogo display section
Dividerdivider.liquidVisual divider between sections
Custom Liquidcustom-liquid.liquidInsert custom Liquid code
Main Pagemain-page.liquidStandard page template
Main 404main-404.liquid404 error page
Passwordpassword.liquidPassword protection page
Sectionsection.liquidGeneric section wrapper
Blocks Section_blocks.liquidInternal block rendering
SectionFileDescription
Search Resultssearch-results.liquidDisplay search results
Search Headersearch-header.liquidSearch input in header
Predictive Searchpredictive-search.liquidAuto-suggest search results
Predictive Search Emptypredictive-search-empty.liquidEmpty state for predictive search
SectionFileDescription
Main Cartmain-cart.liquidShopping cart page
Quick Order Listquick-order-list.liquidBulk order form for quick purchases
SectionFileDescription
Section Rendering Product Cardsection-rendering-product-card.liquidRenders product cards dynamically
Sectionsection.liquidBase section rendering
Blocks_blocks.liquidBlock rendering utilities

​
Section Structure

All sections in Horizon follow a standard structure: 
<!-- Section Liquid Code -->
<div class="section">
  {% content_for 'blocks' %}
</div>

<!-- Section Schema -->
{% schema %}
{
  "name": "Section Name",
  "settings": [...],
  "blocks": [...],
  "presets": [...]
}
{% endschema %}

​
Common Section Settings

Most sections support these common settings:
SettingTypeDescription
color_schemeselectColor scheme for the section
section_widthselectWidth of section (full, wide, narrow)
padding_toprangeTop padding in pixels
padding_bottomrangeBottom padding in pixels
margin_toprangeTop margin in pixels
margin_bottomrangeBottom margin in pixels

​
Usage

Sections can be added to templates through the theme editor or by editing JSON template files: 
{
  "sections": {
    "header": {
      "type": "header",
      "settings": {
        "color_scheme": "scheme-1"
      }
    }
  },
  "order": ["header"]
}

​
Best Practices

  • Use semantic section names that describe their purpose
  • Keep section settings organized and grouped logically
  • Test sections across different screen sizes
  • Use color schemes consistently across your site

​
Related Resources

Blocks Reference

Learn about blocks that can be used within sections

Settings Schema

Configure global theme settings

Build docs developers (and LLMs) love

Get started for freeTalk to us