Overview
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.
Block Settings
Most blocks in Mind share a set of common settings that control their appearance, size, spacing, and behavior. These settings look and behave the same way whether you are editing a Text block, an Image block, or a Group, so once you learn them you can style any block in the theme.
Basic Blocks
Basic blocks are the fundamental content elements in Mind. These are the blocks you use most often to build your store's pages: headings, text, buttons, icons, and small decorative or animated elements. Mind includes 13 basic blocks. Images, videos, and backgrounds have their own page, Media Blocks. Every block also shares the universal controls described in Block Settings.
Media Blocks
Media blocks bring pictures, video, and backdrops into your layouts. Use the Image, Video, and Image comparison blocks as content inside any Group or Layout item, and drop a Background color or Background image block inside a Section, a Group, or a Layout item to paint the container behind its other blocks without changing the container's own Appearance settings. Mind includes 5 media blocks.
Layout Blocks
Layout blocks are container blocks that organize and arrange other blocks. They are the backbone of Mind's page-building system: instead of fixed section layouts, you nest containers inside one another to create columns, carousels, tabs, accordions, and floating overlays without writing code. Mind includes 6 layout blocks, plus the private child blocks they manage.
Carousel Blocks
Carousel blocks add the controls for a carousel arrows next to the heading, dots under the slides, or a progress bar along the bottom. Mind includes 3 carousel blocks.