Releasing a Figma UI Design Kit for Shopify Theme "Horizon"
I created a UI design kit for Shopify's latest theme "Horizon" in Figma. The goal is to enable design validation based on the actual theme structure when planning theme customizations or preparing client proposals.
It's available for free, so if you're considering building or redesigning a store with the Horizon theme, please feel free to use it.
[Horizon] Shopify Theme "Horizon" UI Design Kit (Figma)
Why I Created This UI Design Kit
When designing Shopify theme customizations, the theme editor's preview loading can be somewhat slow, with delays occurring every time you swap sections or change settings, making it difficult to validate designs quickly. Additionally, Horizon offers rich section and block combination patterns with high layout flexibility, which makes it all the more valuable to finalize designs in advance.
However, designing from scratch in Figma tends to create gaps with the actual theme structure, leading to the problem of "it looked great in the design, but can't be reproduced in the theme editor." So I designed this as Figma components that align with Horizon's section & block structure, enabling constraint-aware design validation from the design stage.
Kit Structure
Alignment with Section & Block Structure
In Shopify's theme editor, pages are composed of vertically stacked "sections," with editable parts called "blocks" placed within each section. This kit aligns Figma's component hierarchy with this structure as closely as possible.
- Templates：Basic templates for the home page, collection page, and product detail page
- Sections：Each Horizon theme section (Featured collection, Image banner, Slideshow, etc.) arranged as parts
- Components：Block-level UI parts. Divided into swappable and addable units within sections
In other words, rearranging sections and swapping blocks in Figma directly corresponds to editing operations in the theme editor.
⚠ About Block Nesting Structure
The Horizon theme has a structure where blocks can be nested up to 8 levels deep. While this kit represents this nesting structure as Figma components, deeply nested block combinations may not always be reproducible in the theme editor. We strongly recommend validating in the theme editor alongside your Figma design to confirm the same structure is achievable. Do not rely on Figma alone—always perform hands-on verification. This design kit is intended as a reference tool. Please note that it does not guarantee production-reproducible design expressions.
⚠ About Multi-Column Section Structure
For sections that support multiple columns, such as Featured collection and Collection list, separate section components are provided for each column count. This is because enabling Wrap in Figma's auto layout causes unintended column wrapping depending on screen size, making it impossible to maintain the intended column count. By selecting a section with a fixed column count, you can perform accurate layout validation that matches your design intent.
Design Validation Through Combinations
Since sections and blocks are provided as patterns, you can freely combine them to explore page layouts. With variant switching, there's no need to duplicate frames—you can instantly compare carousel and grid displays.
You can also build new sections by combining existing components, eliminating the need to create frames from scratch. For example:
- Whether to use "Image banner" or "Slideshow" for the homepage hero
- Whether to place a "Blog posts section" or "Brand story section" below the product grid
- Whether to add a CTA or newsletter signup before the footer
The key advantage is being able to quickly test these layout comparisons in Figma before touching the theme editor. You can also present multiple patterns side by side for client proposals. Prototype features enable page transition simulations as well.
Validation Through Batch Replacement
Leveraging Figma component properties, changes to images, colors, and fonts are instantly reflected across all templates.
For example, by batch-replacing dummy images in a homepage design with actual client product images, you can immediately see "how our store would look with this theme." The same applies to text—simply swapping taglines and product descriptions lets you compare appearances across different brands. You can also verify the actual size of banners and taglines before uploading.
Expected Benefits and Use Cases
- Layout comparison via variant switching：Instantly compare carousel/grid layouts without duplicating frames
- Build new sections by combining existing components：No need to create frames from scratch
- Page transition simulation with prototypes：Useful for client presentations
- Design validation without touching production：No impact on your live store
- Parallel evaluation of multiple patterns：Pre-build seasonal campaigns, sales, and standard layouts in advance
- Actual-size preview of images and text：Check banner and tagline sizing before uploading
- Streamlined internal sharing and approval workflows：Share with a single Figma link, consolidate feedback via comments
- Aligned with Shopify section & block structure：Theme editor and Figma structures match, creating a shared language
- Design planning before new store builds：Understand the full design possibilities with Horizon before purchasing
- Existing store redesign proposals：Compare current design with post-Horizon migration side by side
- Layout exploration before customization：Validate section combinations and block structures in advance
This kit is based on Horizon 3.4.0. We plan to update it alongside theme updates, but please understand that we may not be able to catch up with the latest version immediately.
I hope this kit helps save time and improve quality during the design phase for those considering store builds or customizations with the Horizon theme. The kit is available for free, so please feel free to give it a try.