Theme Blocks
Mind takes inspiration from Shopify's Horizon theme architecture, the block-based design system that enables deep nesting and modular layouts. Mind is built entirely from scratch on our own XO Web Components framework. No Horizon theme code is used: every component, section, and block is original code, purpose-built for Mind.
Unlike traditional Shopify themes where sections have fixed layouts, Mind's blocks are modular content elements that you can place inside any section that accepts theme blocks and nest within each other.
What are theme blocks?
Theme blocks are the building blocks of your store's content. Each block is a self-contained component, such as a text, image, button, or layout container, that you can add, remove, reorder, and configure from the Shopify theme editor.
Key differences from traditional themes:
| Feature | Traditional (OS 2.0) | Mind |
|---|---|---|
| Block nesting | Up to 2 levels | Deep nesting |
| Block placement | Blocks tied to specific sections | Any block in any section that accepts theme blocks |
| Layout control | Fixed section layouts | Flexible group and layout blocks |
| Customization | Section-level settings | Per-block settings |
How blocks work in Mind
- Add a section to your page (for example, a blank Section).
- Add blocks inside the section: text, images, buttons, and so on.
- Nest blocks using Group and Layout blocks to create complex layouts.
- Configure each block individually: colors, spacing, typography, and animation.
Block types
Mind ships 31 theme blocks (27 you add directly, plus 4 child blocks that live inside a parent), organized into these categories:
Basic blocks
The fundamental content elements: Heading, Reveal heading, Text, Button, Badge, Icon, Breadcrumb, Divider, Shape, Marquee, Count to, Circle bar, and Custom liquid.
Media blocks
Images, video and backdrops: Image, Video, Image comparison, Background color, and Background image.
Layout blocks
Container blocks that organize other blocks: Layout, Group, Tabs, Collapse, Spacer, and Floating.
Carousel blocks
Controls for Layout blocks set to carousel: Carousel navigation, Carousel pagination, and Carousel progress.
Product, article, and collection blocks
In Mind, product details (vendor, title, price, variant picker, buy buttons, and so on), cart parts, and collection content are section-local blocks: they live inside the page sections that render them rather than being standalone theme blocks. See Page Templates and Product Sections for details.
Universal block settings
Most blocks in Mind share a set of universal settings for spacing, visibility, animation, and color scheme. These give you consistent design control across all block types.