Theme Blocks
Lotio takes inspiration from Shopify's Horizon theme architecture — the block-based design system that enables deep nesting and modular layouts. Lotio is built entirely from scratch using our own XO Web Components framework. No Horizon theme code is used. Every component, section, and block is original code, purpose-built for Lotio.
Unlike traditional Shopify themes where sections have fixed layouts, Lotio's blocks are modular content elements that can be placed inside any section and nested deeply 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 — a heading, 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) | Lotio |
|---|---|---|
| Block nesting | Up to 2 levels | Deep nesting (8+ levels) |
| Block placement | Blocks tied to specific sections | Any block in any section |
| Layout control | Fixed section layouts | Flexible group & layout blocks |
| Customization | Section-level settings | Per-block settings |
How blocks work in Lotio
- Add a section to your page (e.g., a blank Section or a Hero).
- Add blocks inside the section — headings, text, images, buttons, etc.
- Nest blocks using Group and Layout blocks to create complex layouts.
- Configure each block individually — colors, spacing, typography, animation.
Block types
Lotio ships 46 theme blocks (38 you add directly, plus 8 child blocks that live inside a parent), organized into these categories:
Basic blocks
The fundamental content elements — Text, Reveal Heading, Image, Video, Button, Icon, Badge, Divider, Spacer, and more.
Layout blocks
Container blocks that organize other blocks — Layout (grid, carousel, columns), Group (flex container), Tabs, Collapse, and Menu.
Background blocks
Blocks that paint the backdrop of a container — Background color, Background image, Background video, and Parallax.
Motion & effect blocks
Animated and interactive elements — Marquee, Typing, Circular text, Count down, Count to, Image comparison, carousel controls, and more.
Form & localization blocks
Input and selector blocks — Input, Submit button, Currency selector, and Language selector.
Product, article, and collection blocks
In Lotio, product details (vendor, title, price, variant picker, buy button, and so on), article parts, and collection banners are section-local blocks: they live inside the page sections that render them rather than being standalone theme blocks. See the Product information block list and Page Templates for details.
Universal block settings
Every block in Lotio shares a set of universal settings for spacing, visibility, animation, and color scheme. These ensure consistent design control across all block types.