Designed and evolved reusable React media architecture across Fender, Jackson, and PreSonus storefronts, preserving the core experience through an SFCC-to-Shopify Plus migration.
Fender, Jackson, and PreSonus needed rich product media across multiple storefronts while the commerce platform moved from Salesforce Commerce Cloud to Shopify Plus.
I treated the gallery as reusable frontend architecture rather than a platform-specific component. The rendering model stayed in place while commerce-specific data ingestion changed around it.
The original media experiences were difficult to evolve. Several brands shared core requirements but had different catalogs and storefront implementations.
Binding the gallery to SFCC data would have increased lock-in and forced a rewrite during the migration. The design also needed to accommodate new media and merchandising requirements over time.
Kept media rendering separate from commerce-platform ingestion. Adapters normalized product and media data before it reached React, so the gallery never depended on SFCC or Shopify response shapes.
When Shopify Plus replaced SFCC, the adapter changed while the rendering layer and core interactions largely remained.
Built the original gallery as a React application injected into SFCC PDPs, then integrated it with Shopify Liquid storefronts.
React owned the interactive media layer; each commerce platform continued to own page composition and product context.
Because the gallery consumed normalized data, one rendering system could support varied media without introducing platform-specific behavior.
The same boundary later supported the server-rendered primary-image and hydration strategy described in the Large-Scale Ecommerce Performance Optimization case study.
We improved initial rendering and Core Web Vitals without replacing the interactive gallery.
I owned the architectural direction and balanced the long-term migration path with the media needs of Fender, Jackson, and PreSonus.
The project established a shared pattern for React inside commerce templates and avoided separate implementations for each brand.