Figma to Shopify Custom PDP: Liquid, CSS and Vanilla JS
Website Type
E-commerce
Tech Stack
Shopify Liquid, HTML, CSS, Vanilla JavaScript, BEM Architecture
Role
Shopify Liquid Developer: Custom Theme and CRO-Focused Frontend
Live Project
Engineered a premium, high-converting Shopify Product Detail Page from a Figma design using pure custom Liquid, scoped BEM CSS, and Vanilla JS with zero third-party app dependencies to preserve Core Web Vitals performance.
Key builds: pixel-perfect 2-column hero layout, hybrid tab/accordion engine (desktop tabs auto-compile to mobile accordion via JS), TikTok-style portrait video testimonial modal with seamless source clearing, and a 5-column comparison matrix with native CSS horizontal scroll on mobile.
