Depanneur Beverage E-commerce Hero

Overview

This hero section from Depanneur is an excellent reference for high-end e-commerce branding, utilizing a full-screen background video to create an immediate sensory connection. It demonstrates how to balance the heavy visual weight of video with minimalist, high-contrast navigation and branding, making it a strong clone candidate for lifestyle or beverage brands.

Design System

• Color Palette & Visual Hierarchy: The design uses a muted, cinematic video background to provide most of the color and movement. This is contrasted by high-visibility elements: a white primary logo (.logo) and bright red typography on the glassware within the video. The navigation text is kept in a clean off-white/grey to ensure legibility without competing with the background content.
• Typography System: The system focuses on sans-serif clarity. Navigation links use a small, capitalized font with tight letter spacing for a modern, utilitarian feel. The custom script logo in the center provides the only decorative break in an otherwise rigid typographic hierarchy.
• Page Structure & Section Flow: The layout is built around a #page-wrapper containing a .main-page div. The hero occupies 100vh using a .featured-tile container which houses a <video> element with autoplay, muted, and loop attributes to ensure constant ambient motion.
• Reusable Components:
  • Sticky Split-Nav: A unique navigation layout where links like "Beverages" and "Merchandise" are anchored left, while "Get in touch" and "B2B" are anchored right, framing the central logo.
  • Mobile Overlay Menu: A clean .mobile-menu component that uses a full-screen takeover with absolute-positioned close icons (#hide-menu-icon) and vertical link stacking.
  • Background Video Container: The CSS structure for the .bg class provides a reusable blueprint for responsive, edge-to-edge video backgrounds.
• Interaction & Motion: The core interaction is the passive autoplay video. The navigation transition indicates a high-translucency/low-opacity background that allows video motion to bleed through the header.
• Implementation Clues: The HTML confirms this is a Liquid-based Shopify build (template--...__index-featured-title), using standard Shopify section architecture. It also integrates specialized e-commerce components like <shop-cart-sync> for real-time inventory and cart management.

Use Cases

• Who should clone this: This pattern is ideal for direct-to-consumer (DTC) brands that rely on visual storytelling and atmosphere—specifically craft breweries, specialty food vendors, and boutique apparel brands.
• Effective Remixes:
  • Luxe Apparel: Swap the beverage video for high-contrast fashion editorial footage while maintaining the split-nav header.
  • Service-Based Portfolios: Use the hero video to showcase dynamic workflows (e.g., a design agency or architectural firm) before scrolling into a minimalist grid of work.
• Remix Directions: Builders can easily adapt the info architecture by moving the logo to the far left to accommodate a larger menu or by adding a ghost button as a primary Call-To-Action (CTA) overlaying the center of the video.
• Suggested Clone Scope: For a fast build, clone the .shopify-section.featured-tile video container and the split-header navigation. The mobile menu is a secondary but valuable piece if building out a full Shopify theme remix.