Theme Blocks
Wave takes inspiration from Shopify's Horizon theme architecture — the powerful block-based design system that enables deep nesting and modular layouts. However, Wave 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 Wave.
Unlike traditional Shopify themes where sections have fixed layouts, Wave'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, product card, 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) | Wave |
|---|---|---|
| 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 Wave
- Add a section to your page (e.g., a blank Section or a Hero Banner).
- 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
Wave's blocks are organized into these categories:
Basic blocks
The fundamental content elements — Heading, Text, Image, Button, Icon, Video, Divider, Spacer, and more.
Layout blocks
Container blocks that organize other blocks — Group (flex container), Layout (grid/carousel/masonry), and Carousel controls.
Product blocks
E-commerce blocks — Product Card, Price, Add to Cart, Variant Picker, and more.
Article blocks
Blog content blocks — Article Card, Article Media, Article Title, and more.
Collection blocks
Collection display blocks — Collection Card, Collection Media, Collection Title, and more.
Universal block settings
Every block in Wave shares a set of universal settings for spacing, visibility, animation, and color scheme. These ensure consistent design control across all block types.