Overview
Ronin takes inspiration from Shopify's Horizon theme architecture, the block-based design system that enables deep nesting and modular layouts. Ronin 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 Ronin.
Block Settings
Most blocks in Ronin 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 Ronin. These are the blocks you use most often to build your store's pages: text, images, video, icons, buttons, and small utility elements. Ronin 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 Ronin'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. Ronin 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. Ronin 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, progress rings, and before/after sliders. Ronin includes 10 motion and effect blocks. Several 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. Ronin 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.