Boo
LiveA fully custom Shopify storefront built from scratch for a modern e-commerce brand. Every section on the homepage was built custom in Liquid: split hero, hex-prism carousel, best-sellers grid, and shop color grid. A single reusable section schema powers six independent homepage instances, keeping the codebase lean. The product page includes a glass card layout, a centre carousel, and a clickable lookbook section. Performance work covered carousel animation speed on desktop and mobile, lazy-loaded carousel videos that only fetch when scrolled into view, and corrected video preload behaviour to eliminate over-fetching.
ShopifyLiquidJavaScriptCSSReact
- Problem
- The client needed a storefront that felt premium and brand-specific, not a reskinned default theme. Key requirements were a visually distinctive homepage, a polished product browsing experience across devices, and snappy performance despite heavy use of video and carousel content.
- Solution
- Built every homepage section from scratch in Liquid: split-hero-features (×6 instances from one schema), hex-prism carousel, best-sellers-on-sale, and shop-color-grid. The product page got a custom glass card layout, a centre product carousel, and a clickable lookbook. Lazy loading was added to carousel videos so they only fetch when the carousel reaches them, and preload logic was fixed to avoid over-fetching on initial load. Carousel animation timings were tuned separately for desktop and mobile to match the brand feel.
- Challenges
- Driving six visually different homepage sections from a single section schema required careful schema design to stay flexible without becoming bloated. Syncing video preload state with carousel position, so videos are ready when needed but not wastefully pre-fetched, was the most technically involved part of the performance work.
- Outcome
- A production storefront with 9 fully custom sections across homepage, product, and collection pages. Carousel performance is noticeably smoother than the previous implementation, and the single-schema homepage architecture keeps the theme maintainable as the brand adds new content blocks.