A Tool for Overviewing Horizon Theme Section & Block Structure

Horizon is a theme that fully adopts the Theme Blocks architecture promoted by Shopify. The structure that was previously self-contained at the section level has been broken down into block-level units in Horizon.

While this enables more flexible layout design, understanding a single section's behavior requires reading across multiple block files, snippets, and assets, making customization considerably more complex compared to previous themes.

I found it increasingly tedious to trace through code every time I needed to check "which file handles what" or "which block does this setting affect" during customization. So I created a tool (originally for personal use) that provides an overview of sections and their related block files.

Key Features

1. Card-based Section / Block List

All sections and blocks are displayed in a card format. Each card contains the following information:

• Thumbnail — Preview image captured from the actual section display
• Category Label — Category by purpose such as "Collection" or "Banner"
• Section Name — The name displayed in the theme editor
• File Name — The corresponding Liquid file name
• Preset List — Available layout variations for the section
• Description — Explanation of the section's role and functionality
• Meta Info Badges — Color-coded counts for snippets, assets, blocks, and settings

2. Category Filters and Text Search

Use the filter bar at the top to narrow down sections and blocks by category.

Real-time search by section name or description is also available via the search field.

3. Section Detail Modal

Clicking a card opens a modal with detailed information about that section. This is the tool's most distinctive feature.

• Referenced Snippets — List of snippet files directly called by the section
• Related Assets — JS/CSS files required for operation
• Allowed/Static Blocks — content_for 'block' static block invocation relationships and actual Liquid code excerpts
• Settings Table — Complete list of all settings shown in the theme editor's customization panel
  • Setting ID / Type (slider, select, color scheme, etc.) / Default value / Description / Target file

4. Block List with Caller Visualization

The "Blocks" tab displays a list of block files. Block cards show, in addition to standard information, callers (which sections/blocks use them) in chip format. (Please note that caller information may contain some inaccuracies due to the large number of files — this is still being verified.)

5. Direct Links to Shopify Theme Editor

Enter your theme URL in the "Store URL" field at the top, and all file names in the settings table become links to the Shopify theme editor. Jump to the relevant setting location with a single click.

When is it useful?

Technical Features

• Full Single Page Application — Built with vanilla JS/CSS/HTML, no framework required
• Embedded Data — Theme schema information is embedded as JSON at build time. Works without a server
• Full Japanese Support — Resolves Shopify's t: translation keys and displays all section names and setting labels in Japanese
• URL Hash State Management — Bookmark and share detail pages for specific sections or blocks
• Responsive Design — Compatible with desktop, tablet, and mobile

Summary

Horizon's theme block architecture is powerful, but the fragmented file structure makes it time-consuming to grasp the overall picture. I created this tool to streamline my own customization work, and I plan to continue updating the data and features as Horizon evolves.