Leif Modern Botanical E-commerce Store

Overview

Leif is a modern botanical e-commerce store that blends minimalist design with editorial storytelling. It is an excellent clone reference for its asymmetric hero layouts, high-end product presentation, and innovative scent-selection UI that replaces traditional filters with a visual accordion system.

Design System

• Color Palette & Visual Hierarchy: The site uses a sophisticated neutral palette of off-white (#FAF9F6), soft greens, and deep charcoal/black for text and primary actions. Visual hierarchy is established through ample whitespace and large-scale editorial imagery that transitions seamlessly into product grids.
• Typography: The system relies on a mix of a bold, high-contrast sans-serif (used for the logo and product headings like "Flannel Flower") and a clean, mid-weight sans-serif for body text and navigation. Font scales are varied, using oversized headers in hero sections to create a lifestyle-magazine feel.
• Page Structure:
  1. Asymmetric Hero: Split layout with fixed-height image/video containers on the left and content blocks on the right.
  2. Featured Collection Carousel: A standard horizontal swiper for products with a custom "Add to Cart" footer integration.
  3. Editorial Interstitial: High-quality imagery paired with long-form storytelling blocks.
  4. Scent Family Scroller: A unique vertical layout (home-scent__grid) that uses image-heavy cards to represent different product lines.
  5. Instagram Gallery: A clean horizontal image slider.
• Reusable Components:
  • Product Cards: Features a dual-image hover effect (product-card__secondary-image), price sub-headers, and scent profile notes (e.g., "Floral & Grassy").
  • Tertiary Buttons: Minimalist black-bordered buttons that use a solid fill on hover.
  • Newsletter Popup: A split-screen modal with brand photography on one side and a clean Klaviyo form on the other.
• Interactions & Motion: The site utilizes the Swiper.js library for smooth horizontal carousels. An accordion-style logic (accordeon-js) is used for the "Meet the Family" section, where clicking a scent title dynamically updates the main feature image without a page reload.
• Implementation Clues: The site is built on Shopify, utilizing custom liquid sections. It relies on utility-first naming conventions (e.g., md-hide, md-show) for responsive visibility and standard container-based grid layouts.

Use Cases

• Who should clone this: Brands in the beauty, apothecary, home fragrance, or boutique lifestyle space wanting an elevated, non-corporate aesthetic.
• Effective Remixes: This pattern works best for low-SKU retailers where the product's sensory qualities (scent, texture, origin) are the primary selling points. The scent accordion can be remixed as a "material selector" for furniture or a "flavor profile" for artisanal food brands.
• Remix Directions: Swap the botanical photography for minimalist product renders or geometric art. The asymmetric hero section can be isolated and reused as a high-conversion landing page for single-product launches.
• Clone Scope: A full-page clone is ideal to capture the flow between commerce and story. However, the product-card with hover transitions and the home-scent vertical grid are the most valuable standalone components for a quick section-based remix.