Woven Whisky Beverage Shop Landing

Overview

Woven Whisky is a refined e-commerce landing page that blends high-end lifestyle videography with a minimalist product showcase. It is an excellent reference for high-ticket artisanal brands due to its sophisticated use of negative space, bold typography, and a cinematic hero section.

Design System

• Color Palette & Visual Hierarchy: The palette relies on a high-contrast monochromatic base (deep charcoal #1a1a1a and stark white) punctuated by warm, desaturated cream background sections (#f0eee6). The hierarchy is dominated by oversized imagery and video, using text as a supporting structural element rather than a filler.
• Typography System: The site uses a clean, sans-serif font family (likely Helvetica or a similar grotesque face). It utilizes extreme scales, featuring very large, light-weight headings for brand impact and smaller, all-caps subheaders for navigation and section utility.
• Page Structure:
  1. Age Gate: A centered modal with a custom range slider for age verification.
  2. Hero Section: A full-bleed video background with a transparent sticky header.
  3. Thematic Grid: A split-section with embedded looping videos and vertical text links.
  4. Featured Collection: A persistent 2-column grid layout for products.
  5. Editorial Content: Alternating image-with-text blocks to build brand narrative.
  6. Testimonials: A centered, minimal text slider for accolades.
• Reusable Components:
  • Age Gate Slider: A unique type="range" input styled as a refined slider with a triangular pointer.
  • Minimalist Product Cards: Image-first cards with high-contrast text and hidden-until-hover (or click) descriptions.
  • Transparent Header: A sticky nav with a white logo that maintains visibility over dark video backgrounds.
  • Outlined Buttons: Inverted "ghost" buttons (btn--secondary) that maintain a light visual weight.
• Interaction & Motion: The site utilizes a slow, atmospheric motion profile. Evidence from the HTML suggests Vimeo background integration and looping Shopify-hosted MP4s. Scroll animations (data-animate) trigger subtle fade-ins for text and product cards.
• Implementation Clues: Built on Shopify, the code reveals a modular section-based architecture (shopify-section). It uses the lazyload pattern for optimized image delivery and handles mobile responsiveness via a simple medium-up--one-half grid utility.

Use Cases

• Who should clone this: Designers building for luxury spirits, artisanal fragrances, boutique skincare, or high-end apparel where brand story and "vibe" are as important as the product specs.
• Remix Directions: Replace the dark/moody video with bright, airy lifestyle footage for a wellness brand, or keep the age-gate slider logic to create a "preference filter" or "budget selector" for other product types.
• Suggested Scope: The Age Gate Modal and Hero Video Header are the most unique structural elements worth a quick section clone. For a comprehensive store redesign, cloning the entire Editorial Layout provides a sophisticated framework for storytelling.