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.

Templates control the layout and structure of different page types in your Shopify store. Horizon uses JSON templates for maximum flexibility and customization.

​
Overview

Horizon includes 13 template files that define how different pages are rendered:
  • 12 JSON Templates: Modern, section-based templates
  • 1 Liquid Template: Legacy gift card template

​
Template Types

​
index.json

The main homepage template.File: templates/index.jsonPurpose: Controls the layout of your store’s homepageDefault Sections:
  • Hero or slideshow section
  • Featured collections
  • Featured products
  • Content sections
Customization:
{
  "sections": {
    "hero": {
      "type": "hero",
      "settings": {}
    },
    "featured-collection": {
      "type": "featured-collection",
      "settings": {}
    }
  },
  "order": ["hero", "featured-collection"]
}

​
product.json

Main product page template.File: templates/product.jsonPurpose: Display individual product detailsCommon Sections:
  • Product information
  • Product media gallery
  • Product recommendations
  • Related products
  • Reviews
Key Features:
  • Variant selection
  • Add to cart functionality
  • Product description
  • Image galleries
  • Inventory status

​
collection.json

Main collection page template.File: templates/collection.jsonPurpose: Display collection of productsSections:
  • Collection header
  • Product grid
  • Filters and sorting
  • Pagination

​
list-collections.json

All collections listing.File: templates/list-collections.jsonPurpose: Display all store collectionsFeatures:
  • Collection cards
  • Collection images
  • Collection descriptions

​
cart.json

Shopping cart page template.File: templates/cart.jsonPurpose: Display cart contents and checkoutSections:
  • Cart products list
  • Cart summary
  • Discount code input
  • Checkout buttons
  • Cart recommendations
Features:
  • Quantity updates
  • Product removal
  • Subtotal calculation
  • Shipping estimates
  • Order notes

​
blog.json

Blog listing page.File: templates/blog.jsonPurpose: Display blog posts listSections:
  • Blog header
  • Article cards
  • Pagination
  • Tags filter

​
article.json

Individual blog post template.File: templates/article.jsonPurpose: Display single blog postSections:
  • Article header
  • Featured image
  • Article content
  • Author info
  • Comments
  • Related articles

​
page.json

Standard page template.File: templates/page.jsonPurpose: Display static pages (About, FAQ, etc.)Sections:
  • Page header
  • Page content
  • Custom sections

​
page.contact.json

Contact page template.File: templates/page.contact.jsonPurpose: Contact form and informationSections:
  • Contact form
  • Store information
  • Map (if configured)
  • Social links

​
search.json

Search results page.File: templates/search.jsonPurpose: Display search resultsSections:
  • Search input
  • Results grid
  • Filters
  • Pagination
Features:
  • Product results
  • Page results
  • Blog results
  • No results state

​
password.json

Password protection page.File: templates/password.jsonPurpose: Store password entry for protected storesSections:
  • Password form
  • Store message
  • Social links
Use Case:
  • Coming soon pages
  • Private stores
  • Development stores

​
404.json

Error page template.File: templates/404.jsonPurpose: Page not found errorSections:
  • Error message
  • Search bar
  • Featured collections
  • Homepage link
Best Practices:
  • Helpful error message
  • Search functionality
  • Navigation options
  • Related content

​
gift_card.liquid

Gift card display template.File: templates/gift_card.liquidPurpose: Display gift card detailsType: Liquid template (legacy format)Features:
  • Gift card code
  • Balance display
  • Print button
  • QR code
  • Apple Wallet integration
This is the only Liquid template in Horizon. All others use JSON format.

​
Template Structure

​
JSON Template Format

All modern templates follow this structure: 
{
  "sections": {
    "section-id": {
      "type": "section-type",
      "blocks": {
        "block-id": {
          "type": "block-type",
          "settings": {}
        }
      },
      "block_order": ["block-id"],
      "settings": {}
    }
  },
  "order": ["section-id"]
}

​
Template Anatomy

ComponentDescription
sectionsObject containing all sections
section-idUnique identifier for the section
typeSection type (matches section filename)
blocksBlocks within the section
block_orderArray defining block sequence
settingsSection-specific settings
orderArray defining section sequence

​
Creating Custom Templates

​
1. Duplicate Existing Template

cp templates/page.json templates/page.custom.json

​
2. Edit Template

{
  "sections": {
    "main": {
      "type": "main-page",
      "settings": {
        "padding_top": 36,
        "padding_bottom": 36
      }
    },
    "custom-section": {
      "type": "hero",
      "settings": {}
    }
  },
  "order": ["main", "custom-section"]
}

​
3. Assign to Page

  1. Go to Online Store > Themes > Customize
  2. Navigate to page
  3. Click “Change” next to template
  4. Select your custom template

​
Template Hierarchy

Shopify follows this hierarchy when rendering pages:
  1. Alternate Template (if assigned): page.custom.json
  2. Default Template: page.json
  3. Fallback: Built-in Shopify default

​
Template Naming Convention

PatternExampleUse Case
[type].jsonpage.jsonDefault template
[type].[name].jsonpage.about.jsonAlternate template
[type].liquidgift_card.liquidLegacy liquid template

​
All Templates Summary

TemplateTypePurpose
index.jsonJSONHomepage
product.jsonJSONProduct page
collection.jsonJSONCollection page
list-collections.jsonJSONAll collections
cart.jsonJSONShopping cart
blog.jsonJSONBlog listing
article.jsonJSONBlog post
page.jsonJSONStandard page
page.contact.jsonJSONContact page
search.jsonJSONSearch results
password.jsonJSONPassword page
404.jsonJSONError page
gift_card.liquidLiquidGift card

​
Template Best Practices

Do:
  • Use meaningful section IDs
  • Keep section order logical
  • Test templates on all devices
  • Document custom templates
  • Use alternate templates for special pages
Don’t:
  • Hardcode content in templates
  • Create too many alternate templates
  • Modify default templates without backup
  • Forget to set appropriate settings

​
Common Template Patterns

​
Adding a Section

{
  "sections": {
    "existing-section": {},
    "new-section": {
      "type": "featured-collection",
      "settings": {
        "collection": "frontpage"
      }
    }
  },
  "order": ["existing-section", "new-section"]
}

​
Reordering Sections

Just change the order array: 
{
  "order": ["section-2", "section-1", "section-3"]
}

​
Removing a Section

  1. Delete from sections object
  2. Remove from order array

​
Related Resources

Sections Reference

Available sections for templates

Customization Guide

Learn template customization

Build docs developers (and LLMs) love

Get started for freeTalk to us