Theme Blocks
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.
Unlike traditional Shopify themes where sections have fixed layouts, Ronin's blocks are modular content elements that you can place inside any section and nest 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, 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) | Ronin |
|---|---|---|
| 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 and layout blocks |
| Customization | Section-level settings | Per-block settings |
How blocks work in Ronin
- Add a section to your page (for example, a blank Section or a hero).
- 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
Ronin ships 45 theme blocks (37 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, Icon, Button, Badge, Divider, Spacer, Text with image, Breadcrumb, Logo, and more.
Layout blocks
Container blocks that organize other blocks: Layout (grid, carousel, or masonry), 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, Circle bar, 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 Ronin, product details (vendor, title, price, variant picker, buy button, and so on), article parts, and collection content 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
Most blocks in Ronin share a set of universal settings for spacing, visibility, animation, and color scheme. These give you consistent design control across all block types.