Sections Reference

Auto-generate your docs

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

Layout Sections (5)

Section	File	Description
Header	`header.liquid`	Main site header with navigation
Header Announcements	`header-announcements.liquid`	Announcement bar above header
Footer	`footer.liquid`	Main site footer with content blocks
Footer Utilities	`footer-utilities.liquid`	Footer utility links and information
Password Footer	`password-footer.liquid`	Footer for password-protected pages

Hero & Media Sections (5)

Section	File	Description
Hero	`hero.liquid`	Large hero section with media and content
Slideshow	`slideshow.liquid`	Image/video slideshow with navigation
Layered Slideshow	`layered-slideshow.liquid`	Multi-layer slideshow with parallax effects
Media with Content	`media-with-content.liquid`	Media paired with text content
Marquee	`marquee.liquid`	Scrolling text marquee animation

Product Sections (6)

Section	File	Description
Product Information	`product-information.liquid`	Main product details and purchase options
Featured Product Information	`featured-product-information.liquid`	Featured product with enhanced display
Featured Product	`featured-product.liquid`	Standalone featured product section
Product Recommendations	`product-recommendations.liquid`	AI-powered product recommendations
Product Hotspots	`product-hotspots.liquid`	Interactive product hotspot annotations
Product List	`product-list.liquid`	Customizable product list display

Collection Sections (5)

Section	File	Description
Main Collection	`main-collection.liquid`	Primary collection page template
Main Collection List	`main-collection-list.liquid`	List all collections page
Collection List	`collection-list.liquid`	Display multiple collections
Collection Links	`collection-links.liquid`	Navigational collection links
Carousel	`carousel.liquid`	Product or content carousel

Blog Sections (3)

Section	File	Description
Main Blog	`main-blog.liquid`	Main blog listing page
Main Blog Post	`main-blog-post.liquid`	Individual blog post template
Featured Blog Posts	`featured-blog-posts.liquid`	Highlight selected blog posts

Content & Utility Sections (8)

Section	File	Description
Logo	`logo.liquid`	Logo display section
Divider	`divider.liquid`	Visual divider between sections
Custom Liquid	`custom-liquid.liquid`	Insert custom Liquid code
Main Page	`main-page.liquid`	Standard page template
Main 404	`main-404.liquid`	404 error page
Password	`password.liquid`	Password protection page
Section	`section.liquid`	Generic section wrapper
Blocks Section	`_blocks.liquid`	Internal block rendering

Search Sections (4)

Section	File	Description
Search Results	`search-results.liquid`	Display search results
Search Header	`search-header.liquid`	Search input in header
Predictive Search	`predictive-search.liquid`	Auto-suggest search results
Predictive Search Empty	`predictive-search-empty.liquid`	Empty state for predictive search

Cart & Checkout Sections (2)

Section	File	Description
Main Cart	`main-cart.liquid`	Shopping cart page
Quick Order List	`quick-order-list.liquid`	Bulk order form for quick purchases

Rendering Sections (3)

Section	File	Description
Section Rendering Product Card	`section-rendering-product-card.liquid`	Renders product cards dynamically
Section	`section.liquid`	Base section rendering
Blocks	`_blocks.liquid`	Block 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:

Setting	Type	Description
`color_scheme`	select	Color scheme for the section
`section_width`	select	Width of section (full, wide, narrow)
`padding_top`	range	Top padding in pixels
`padding_bottom`	range	Bottom padding in pixels
`margin_top`	range	Top margin in pixels
`margin_bottom`	range	Bottom 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

Blocks Reference

Learn about blocks that can be used within sections

Settings Schema

Configure global theme settings

⌘I

API Reference

Resources

Sections Reference

Overview

All Sections

Section Structure

Common Section Settings

Usage

Best Practices

Blocks Reference

Settings Schema

​Overview

​All Sections

​Section Structure

​Common Section Settings

​Usage

​Best Practices

​Related Resources

Blocks Reference

Settings Schema

Overview

All Sections

Section Structure

Common Section Settings

Usage

Best Practices

Related Resources