Key Takeaways
- Online Store 2.0 sections everywhere allows merchants to customize any page without code
- Target sub-2-second LCP through lazy loading, minimal JavaScript, and optimized Liquid renders
- Metafields and metaobjects extend the Shopify data model without requiring custom apps
- WCAG 2.1 AA accessibility compliance is mandatory for legal protection and inclusive design
- Shopify CLI with Git-based version control enables professional development workflows
Online Store 2.0 Architecture
Online Store 2.0 fundamentally changed how Shopify themes are built. Understanding the section/block architecture and JSON templates is essential for modern theme development.
| Feature | OS 1.0 | OS 2.0 |
|---|---|---|
| Sections on homepage | Yes | Yes |
| Sections on all pages | No | Yes (sections everywhere) |
| App blocks | No | Yes (apps integrate into sections) |
| Template format | Liquid | JSON (references sections) |
| Metafields in theme | Limited | Full support |
| Dynamic sources | No | Yes (connect any metafield to settings) |
Design sections to be context-agnostic. A testimonial section should work equally well on the homepage, product page, or a custom landing page. This maximizes merchant flexibility.
Performance Optimization for Shopify Themes
Theme performance directly impacts conversion rates. Every 100ms of additional load time costs approximately 1% of conversions. Performance optimization should be a continuous priority throughout development.
- Lazy load all images below the fold using loading='lazy' attribute
- Inline critical CSS and defer non-critical stylesheets
- Minimize JavaScript: use vanilla JS instead of jQuery where possible
- Use the render tag instead of include for better Liquid performance
- Avoid deep nesting in Liquid loops (flatten data structures)
- Preload hero images and critical fonts for faster LCP
| Metric | Target | Impact |
|---|---|---|
| LCP | Under 2.0s | Primary Core Web Vital for perceived speed |
| FID/INP | Under 200ms | Interactivity responsiveness |
| CLS | Under 0.1 | Visual stability during load |
| Total JS size | Under 100KB | Parse and execution time |
| Total page weight | Under 2MB | Overall load performance |
Accessibility and Inclusive Design
Accessibility is both a legal requirement (ADA, European Accessibility Act) and a business opportunity. Accessible themes serve a larger market and demonstrate quality craftsmanship.
- Use semantic HTML elements (nav, main, article, aside) for screen reader navigation
- Ensure all interactive elements are keyboard-accessible with visible focus indicators
- Provide alt text for all images (descriptive for content images, empty for decorative)
- Maintain minimum 4.5:1 color contrast ratio for text (3:1 for large text)
- Label all form inputs with associated label elements
- Test with VoiceOver (macOS/iOS), NVDA (Windows), and keyboard-only navigation
ADA web accessibility lawsuits have increased 300% since 2018. E-commerce stores are frequent targets. Building accessibility into the theme from the start is far cheaper than retrofitting after a lawsuit.
Frequently Asked Questions
Related services from Verbsz Technologies
If this article is relevant to a project on your roadmap, these are the services our team typically delivers.