I designed and developed a custom Shopify storefront for Art Brand Studios from zero-to-one, a premium e-commerce platform selling officially licensed artwork from Disney, Marvel, Pixar, Harry Potter, Star Wars, Thomas Kinkade, and more. As the sole web designer and developer, I owned the entire project end-to-end: UX, visual design, branding, and front-end development.
Shopify Development / UX/UI Design / Branding / E-Commerce / Front-end Development / SEO Automation
Project Highlights
Sole Designer & Developer
End-to-end ownership from zero-to-one, taking Figma concepts to production Liquid templates. Designed and developed in parallel to rapidly ship a premium Shopify experience for fine art collectors.
75+ Product Variants
Designed a step-by-step mobile configurator that walks customers through product, size, frame, and upgrades with live preview updates at each step, turning a complex 75+ variant selection into a guided experience.
14,000 SEO Optimizations
Automated image alt text and filename pipelines across 200+ products, saving the marketing team 40+ hours of manual data entry.
One Design System
A single cohesive storefront designed to elevate $5,000+ museum originals and accessible $30 prints with equal credibility.
The Challenge
Consolidate aging legacy sites and dozens of officially licensed IP brands into a single Shopify storefront. Mid-project, the team pivoted from BigCommerce to Shopify to free up licensing budget. That constraint became an opportunity to build the system right from the start.
My Role
As the sole web designer and developer, I built the product configurator, mobile experience, SEO automation, reusable component systems, and content management architecture. Every visual decision served a 150x price range, balancing a curated gallery feel for collectors with an approachable experience for first-time fan buyers.
Technical Infrastructure
Building hyper-custom features on top of Shopify's platform rather than against it led to a proxy architecture that is maintainable, upgrade-safe, and decoupled by design.
Decoupled Mobile JS
The Mobile Variant Modal uses a proxy pattern to mirror desktop selections without modifying core theme files, keeping mobile and desktop in perfect sync.
Zero-Code Configuration
Three theme settings control product behavior site-wide: title styling, upsell visibility, and mobile layout. New product types, discounts, and copyright text update automatically without developer intervention.
Metafields as Infrastructure
Metafields power automated discounts, copyright hierarchy, and variant sorting without admin overhead.