Overview
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.
Block Settings
Most blocks in Lotio share a set of common settings that control their appearance, size, spacing, and behavior. These settings are rendered from the same shared snippets, so they look and behave the same way whether you are editing a Text block, an Image block, or a Group. Learn them once and you can style any block in the theme.
Basic Blocks
Basic blocks are the fundamental content elements in Lotio. These are the blocks you'll use most often to build your store's pages: text, images, video, icons, buttons, and small utility elements. Lotio includes 14 basic blocks. Every block also shares the universal controls described in Block Settings.
Layout Blocks
Layout blocks are container blocks that organize and arrange other blocks. They are the backbone of Lotio's page-building system: instead of fixed section layouts, you nest containers inside one another to create columns, carousels, tabs, accordions, and menus without writing code. Lotio includes 5 layout blocks, plus the private child blocks they manage.
Background Blocks
Background blocks paint the backdrop of the container they sit in. Drop one inside a Section, a Group, or a Layout item and it stretches to fill that container behind its other blocks, so you can layer a color, an image, or a video under any content without changing the container's own Appearance settings. Lotio includes 4 background blocks.
Motion & Effect Blocks
Motion and effect blocks add movement, live numbers, and interactive widgets to your pages: scrolling ribbons, typing headlines, counters, charts, and before/after sliders. Lotio includes 11 motion and effect blocks. Most of them also share the padding and animation controls described in Block Settings.
Form & Localization Blocks
Form and localization blocks give you the building pieces for custom sign-up forms and let visitors switch the store's market and language. Lotio includes 4 form and localization blocks. All four inherit their base styling from Theme settings: the Input block follows Input fields, the Submit button follows Buttons, and the two selectors follow your Typography and Colors.