Skip to main content
Sections are the building blocks of your Shopify store’s pages. The Horizon theme includes a comprehensive set of sections for creating engaging shopping experiences.

​
Available Sections

Horizon includes several types of sections:
  • Hero - Full-width hero banners with dual media slots and advanced mobile customization
  • Slideshow - Rotating banner images with navigation
  • Layered Slideshow - Multi-layer animated slideshows

​
Product Sections

  • Featured Product - Showcase a single product with customizable layout
  • Product List - Display multiple products in grid or carousel
  • Product Recommendations - Dynamic product suggestions

​
Collection Sections

  • Collection List - Display collections in grid, carousel, bento, or editorial layouts
  • Collection Links - Quick navigation to collections

​
Content Sections

  • Carousel - Scrollable content cards with navigation
  • Featured Blog Posts - Showcase blog articles in various layouts
  • Media with Content - Combine images/videos with text
  • Marquee - Scrolling text or content

​
Utility Sections

  • Divider - Visual separators between sections
  • Custom Liquid - Add custom Liquid code
  • Logo - Display brand logos

​
Section Structure

All sections in Horizon follow a consistent structure: 
{% schema %}
{
  "name": "Section Name",
  "settings": [...],
  "blocks": [...],
  "presets": [...]
}
{% endschema %}

​
Common Settings

Most sections share these common configuration options:

​
Layout

  • Width - Page width or full width
  • Padding - Top and bottom spacing
  • Gap - Spacing between elements

​
Appearance

  • Color Scheme - Choose from theme color schemes
  • Border - Border style, width, and opacity
  • Border Radius - Corner rounding

​
Mobile Behavior

  • Mobile Columns - Number of columns on mobile devices
  • Vertical on Mobile - Stack content vertically
  • Carousel on Mobile - Enable carousel mode on mobile

​
Using Sections

​
Adding a Section

  1. In the Shopify theme editor, click “Add section”
  2. Choose the section type from the categories
  3. Configure the section settings
  4. Add and configure blocks within the section

​
Section Blocks

Many sections support dynamic blocks that can be added, removed, and reordered:
  • Text - Headings and paragraphs
  • Button - Call-to-action buttons
  • Image - Static images
  • Video - Video content
  • Group - Container for organizing multiple blocks
  • Spacer - Vertical spacing control

​
Best Practices

  • Use appropriate image sizes for your section
  • Enable lazy loading for below-the-fold sections
  • Limit the number of carousel items for better performance
  • Use the Hero section’s fetchpriority="high" for above-the-fold images
  • Test all sections on mobile devices
  • Use custom mobile media when desktop images don’t work well on small screens
  • Consider enabling carousel mode on mobile for grid layouts
  • Stack content vertically when appropriate
  • Use consistent color schemes across related sections
  • Maintain visual hierarchy with proper heading levels
  • Group related content using the Group block
  • Use dividers to separate distinct content areas
  • Provide meaningful alt text for all images
  • Ensure sufficient color contrast
  • Use semantic HTML through proper block selection
  • Test keyboard navigation for carousels

​
Section Categories

Sections are organized into categories in the theme editor:
  • Banners - Hero, slideshow, and announcement sections
  • Products - Product display and recommendation sections
  • Collections - Collection listing and navigation
  • Storytelling - Content-focused sections like blogs and carousels
  • Header - Navigation and branding elements
  • Footer - Footer content and utilities

​
Next Steps

Hero Section

Create impactful hero banners with dual media support

Carousel

Build scrollable content galleries

Featured Product

Showcase products with customizable layouts

Collection List

Display collections in multiple layout styles

Build docs developers (and LLMs) love

Get started for freeTalk to us