Development fork of the Schumacher-Knepper theme. Used for testing and staging before pushing to my client's production repository. (password = 123)
A bespoke premium Shopify theme developed for Domaine Viticole Schumacher-Knepper, an independent, historic wine producer from the Moselle Valley in Luxembourg. Built on top of Shopify's high-performance reference theme Dawn, this project introduces a luxurious 'Liquid Glass' aesthetic and several custom functional components tailored to premium wine commerce. Key features include an age verification security gateway that intercepts actions in the DOM capture phase, dynamic breadcrumbs leveraging custom metafield references and product categories, a dynamic heritage slideshow counting down to Wintrange Wineries' founding year (1714), and hardware-accelerated animations that deliver zero Cumulative Layout Shift (CLS) on mobile viewports.
Sub-16ms JavaScript evaluation and render loop execution for countdown timer, maintaining a locked 60 FPS (or 120 FPS on high-refresh ProMotion screens) during layout animations.
100/100 Lighthouse Performance score for critical path loading on desktop, with zero Cumulative Layout Shift (CLS) achieved through strict aspect-ratio bounding and dynamic viewport height (100dvh) implementation.
$0/month infrastructure cost. The theme operates entirely on Shopify's serverless SaaS infrastructure, maximizing performance through static Liquid rendering, localized browser caching, and zero third-party external API script dependencies.
Capturer-Phase Event Interception: Designed a custom DOM interceptor running in the event-capturing phase (useCapture = true) to halt Dawn's default AJAX cart submittals and dynamic checkout actions prior to theme handler execution, dynamically appending verified cart compliance attributes (Age_Verified, DOB_Entered, and Verification_Timestamp) before programmatic re-triggering.
Hardware-Accelerated 'Liquid Glass' Styling: Engineered high-end glassmorphic UI cards, modals, and elements leveraging hardware-accelerated transitions via CSS 'transform: translateZ(0)' and 'will-change: backdrop-filter', maximizing frame rates and minimizing repaint overhead under heavy load.
iOS Scroll Locking & Dynamic Viewport Height: Solved persistent Safari background body scrolling and layout shifts by pairing a body-level overflow hide overlay with touch-action disabling, anchoring the verification modal cleanly with Dynamic Viewport Height (100dvh) rules.
IntersectionObserver-Optimized Deceleration: Engineered a custom countdown web component targeting 1714 that leverages an IntersectionObserver to conserve mobile CPU cycles, animating the visual progression over 2.5s with requestAnimationFrame and an easeOutExpo easing curve for a premium, decelerating feel.
Exhaustive situation-action-result breakdowns showcasing problem-solving and architectural execution.
The default Shopify Dawn theme triggers immediate asynchronous cart updates and dynamic checkouts. Incorporating a secure age verification modal to comply with Luxembourgish digital commerce regulations required blocking all purchase actions without breaking Dawn's native asynchronous checkout state or cart drawer triggers.
Implemented a capture-phase event listener ('document.addEventListener('submit', ..., true)') that catches add-to-cart form submissions and payment clicks before they propagate to Dawn's theme handlers. When no adult verification cookie is found, it intercepts the submit action, displays the glassmorphic gate, collects the user's DOB, validates age, sets a secure 30-day session cookie, dynamically injects required legal verification cart attributes, and executes a programmatic click event to complete the transaction.
Low-level component relationships, system boundaries, and runtime flows.
The Schumacher-Knepper theme architecture is founded on a progressive enhancement model that leverages Shopify's high-speed edge liquid rendering engine alongside vanilla DOM Web APIs. Custom visual attributes are styled using local component-scoped stylesheets that declare and customize modern CSS custom properties (e.g. '--media-radius'), exposing clean, reusable design tokens directly to the Shopify Theme Editor. Dynamic compliance gating operates at the capturing boundary of the DOM, ensuring that checkout forms cannot submit without validated cookie states. High-refresh animations, such as the decrescendo heritage timer, leverage hardware-accelerated composition layers and IntersectionObserver checks to run seamlessly on low-tier mobile processors, maintaining zero dependencies on heavy JavaScript libraries.
This project demonstrated the superior stability and speed of native browser Web APIs over large third-party JavaScript libraries. Utilizing capture-phase event listeners proved to be an incredibly powerful way to intercept, validate, and enrich core ecommerce flows without modifying vendor theme code. Additionally, constructing the 'Liquid Glass' design system reinforced the need for hardware-accelerated CSS properties to render heavy effects (like backdrop-filter blurs) smoothly on mobile browsers, showing that luxury design can co-exist with excellent performance.
Rendered live in real-time. Direct URL: https://schumacher-knepper-v2.myshopify.com
Metaobject Category Breadcrumb Resolution: Designed a custom breadcrumbs snippet that maps dynamic collection hierarchies through standard collection reference and metaobject category references (product.metafields.custom.primary_collection), introducing safe fallbacks to ensure structured product navigation paths.
Enforced 100% legal compliance on all checkout paths, cleanly injecting validated verification timestamps and age verification flags directly into Shopify's database records with zero conversion rate friction.
Mobile viewports (specifically iOS Safari) suffered from background scrolling (scroll bleed) and vertical shift reflows whenever the age verification popup or dynamic drawer modals were active, failing strict visual quality assurance checks.
Created a multi-faceted scroll lock. Applied 'overflow: hidden !important' to the root '<html>' and '<body>' tags under the active modal class, coupled with a 'touch-action: none' overlay layer to block Safari touch-scrolling. Positioned the modal using dynamic viewport height ('100dvh') and enabled graphics card hardware-acceleration via 'transform: translateZ(0)' on blur overlays.
Achieved absolute mobile layout stability and complete, bug-free scroll locking across all iOS and Android web browsers, with zero vertical shifts or backdrop movement during modal navigation.
