Shopify Theme Development

Shady Rays - Shopify 2.0 Migration & Heavy Customization

Led the migration from legacy Shopify theme to 2.0 architecture with extensive customizations for a high-traffic sunglasses e-commerce store.

Client Shady Rays
Delivered Nov 2023
Type Shopify Theme Development
Technologies 10 tools
Shady Rays - Shopify 2.0 Migration & Heavy Customization

Shady Rays was already an established brand with a functional Shopify store, but they needed to migrate to Shopify 2.0 to take advantage of newer features while preserving all their existing customizations and even improving upon them.

The Migration Challenge: The existing store had years of accumulated customizations built on the old theme architecture. Simply switching themes wasn't an option—we needed to carefully audit every feature, understand its purpose, and recreate it in the new 2.0 environment.

My Process: I started by creating a comprehensive inventory of all custom features, from the custom product filtering system to specialized checkout flows. Then, I rebuilt each feature using Shopify 2.0's modern architecture: JSON templates, section groups, and app blocks.

For the collection pages, I implemented custom AJAX-based filtering that stored filter states in localStorage, allowing customers to navigate between pages without losing their filter selections. The product pages featured dynamic image galleries that changed based on color selection, size guides with detailed measurements, and a custom fit finder tool.

Performance Improvements: The migration gave us an opportunity to dramatically improve site speed. I implemented:

  • Critical CSS inlining for above-the-fold content
  • Lazy loading for images with proper sizing and format optimization (WebP with fallbacks)
  • Code splitting for JavaScript to reduce initial bundle size
  • Preloading of key resources and DNS prefetching
  • Optimized Liquid code to reduce rendering time

Advanced Features: I developed custom Liquid sections for social proof (showing real-time purchases and reviews), a sophisticated gift card section with preview capabilities, and a build-your-bundle feature that let customers create custom multi-product packages with dynamic pricing.

Mobile Experience: Given that over 70% of traffic came from mobile devices, I rebuilt the mobile navigation from scratch, implementing a thumb-friendly menu system, swipeable product galleries, and simplified mobile checkout.

The Result: A modernized store running on Shopify 2.0 with all original features preserved and enhanced, page load times cut by 40%, and a mobile experience that increased mobile conversions by 28%. The merchant also gained the ability to easily customize page layouts through the theme editor without developer help.

Technology Stack

Shopify 2.0 Liquid Templating JSON Templates Shopify Ajax API Section Rendering API JavaScript ES6+ CSS3 / SCSS WebP Image Optimization Shopify CLI Git
View Live Site

Project Info

  • Client Shady Rays
  • Delivered November 2023
  • Type Shopify Theme Development

Stack

Shopify 2.0 Liquid Templating JSON Templates Shopify Ajax API Section Rendering API JavaScript ES6+ CSS3 / SCSS WebP Image Optimization Shopify CLI Git

Available for new projects

Let's build something great together

Open to freelance, contract, and full-time opportunities. Let's discuss your next project.