Online Store 2.0 Architecture
Online Store 2.0 fundamentally changed how Shopify themes work. The shift from hardcoded templates to JSON-driven configurations gives merchants unprecedented flexibility while making themes more maintainable.
JSON Templates vs. Liquid Templates
JSON templates define page structure through section references, while Liquid templates contain rendering logic. This separation allows merchants to customize pages without touching code.
// templates/product.json { "sections": { "main": { "type": "main-product", "settings": {} }, "recommendations": { "type": "product-recommendations", "settings": { "heading": "You may also like" } } }, "order": ["main", "recommendations"] }
This isn't for most stores – and that's the point.
Custom apps, headless storefronts and complex theme work make sense when off-the-shelf hits a ceiling and the revenue justifies the spend. If that's you, we can scope it.
Published starting point: From $5,000 · Typical delivery window: 4–24 weeks
Start a custom build quoteAtomic design principles translate well to Shopify theme development, creating a hierarchy of reusable components.
Component Hierarchy
- Atoms (Snippets): Buttons, icons, form inputs, price displays
- Molecules (Snippets): Product cards, search bars, cart items
- Organisms (Sections): Product grids, headers, footers, hero banners
- Templates: JSON configurations combining sections
- Pages: Specific instances of templates with content
File Organization
snippets/
├── atoms/
│ ├── icon-*.liquid
│ ├── button.liquid
│ └── price.liquid
├── molecules/
│ ├── product-card.liquid
│ ├── cart-item.liquid
│ └── search-form.liquid
└── utilities/
├── image.liquid
└── responsive-image.liquidSection Schema Design
Well-designed section schemas make content editing intuitive while preventing configuration mistakes.
Schema Best Practices
- Group related settings using header separators
- Provide sensible defaults for all settings
- Use info settings to guide merchants
- Limit block types to what's actually needed
- Define presets for common configurations
{% schema %} { "name": "Feature Grid", "settings": [ { "type": "header", "content": "Content" }, { "type": "text", "id": "heading", "label": "Heading", "default": "Why Choose Us" }, { "type": "header", "content": "Layout" }, { "type": "select", "id": "columns", "label": "Columns", "options": [ { "value": "2", "label": "2 columns" }, { "value": "3", "label": "3 columns" }, { "value": "4", "label": "4 columns" } ], "default": "3" } ], "blocks": [ { "type": "feature", "name": "Feature", "settings": [ { "type": "image_picker", "id": "icon" }, { "type": "text", "id": "title" }, { "type": "richtext", "id": "description" } ] } ], "max_blocks": 8 } {% endschema %}
CSS Architecture
Shopify themes benefit from a hybrid CSS approach: BEM for component-specific styles and utility classes for common patterns.
BEM Naming Convention
/* Block */ .product-card { } /* Element */ .product-card__image { } .product-card__title { } .product-card__price { } /* Modifier */ .product-card--featured { } .product-card--sold-out { }
CSS Custom Properties
Use CSS custom properties for theme settings, enabling real-time preview in the theme editor.
:root { --color-primary: {{ settings.color_primary }}; --color-secondary: {{ settings.color_secondary }}; --font-heading: {{ settings.type_header_font.family }}; --font-body: {{ settings.type_body_font.family }}; }
JavaScript Architecture
Modern Shopify themes use ES modules and lazy loading to minimize JavaScript's impact on page performance.
Component-Based JS
Each interactive component should have its own JavaScript module, loaded only when needed.
// Lazy load component when element enters viewport const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { import('./components/product-gallery.js') .then(module => module.init(entry.target)); observer.unobserve(entry.target); } }); }); document.querySelectorAll('[data-product-gallery]') .forEach(el => observer.observe(el));
Section Rendering API
Use the Section Rendering API for dynamic updates without full page reloads–essential for cart drawers, quick view modals, and filters.
Performance Patterns
Performance Checklist
- ✓ Use responsive images with srcset
- ✓ Lazy load images below the fold
- ✓ Inline critical CSS
- ✓ Defer non-critical JavaScript
- ✓ Minimize Liquid loops on initial render
- ✓ Preload LCP image
- ✓ Use content_for_header for app scripts
This isn't for most stores. If it's right for yours, let's scope it properly.
We build custom apps, headless storefronts, and complex theme architectures for stores doing $500K+/yr where off-the-shelf solutions hit a ceiling. We'll give you a scope and number – not a pitch deck.
Published starting point: From $5,000 · Typical delivery window: 4–24 weeks
Start a custom build quoteFinal scope and price are confirmed after technical discovery.
Frequently Asked Questions
What makes a Shopify theme well-architected?
Should I start from Dawn or buy a paid theme?
How do I keep theme performance from degrading over time?
What's the difference between OS 2.0 and legacy themes?
Shopify Engineering
Related Articles
Themes, Liquid, custom apps, headless architecture, B2B and platform implementation.
Shopify Development Cost Guide
Realistic cost drivers for theme builds, apps, integrations, migrations and advanced Shopify work.
Read articleLiquid Template Best Practices
Performance-aware Liquid patterns for maintainable Shopify themes.
Read articleTechnical SEO for Shopify
Shopify-specific crawlability, metadata, schema, indexation and architecture controls.
Read article