LoveSeen Beauty E-commerce Landing Page

Overview

LoveSeen is a high-visibility beauty e-commerce platform that excels at blending high-fashion editorial imagery with conversion-focused retail elements. It serves as an excellent clone reference for its effective use of full-bleed split-screen visuals and a seamless integration of user-generated content (UGC) within a minimalist framework.

Design System

• Color Palette & Visual Hierarchy: The palette is neutral and sophisticated, using off-whites (#faf6f5), deep blacks (#00091b), and natural skin-tone photography. The visual hierarchy is dominated by the full-screen hero image, with navigation and CTA buttons rendered in thin, high-contrast strokes to prevent distraction from the product application shots.
• Typography: The site features a mix of a modern serif for branding (LoveSeen logo) and a clean, wide-spaced sans-serif for functional navigation and buttons. CTA text often uses uppercase with generous character spacing to maintain a light, airy aesthetic.
• Page Structure: The layout follows a classic vertical stack: a transparent global header, a full-height split-screen hero section, followed immediately by a horizontal UGC carousel (ugc__slider) powered by Swiper.js.
• Reusable Components:
  • Hero Split-Screen: A responsive <picture> container that adapts across breakpoints (mobile-optimized crops visible in HTML).
  • Ghost Button: Minimalist transparent buttons with sharp borders (button--hero) that use data-attributes for hover color states.
  • UGC Carousel: A Swiper-based slider with custom labels (ugc__label) that display social handles on hover/overlay.
• Interaction Patterns: The site uses a js-scroll trigger system for entrance animations. The buttons feature inverted color transitions on hover (swapping #faf6f5 and #00091b), and the UGC slider supports free-mode horizontal scrolling.
• Implementation Clues: Built on Shopify, the code utilizes a modular approach with shopify-section wrappers. It leverages the <picture> element heavily for responsive art direction, switching between landscape images for desktop and vertical crops for mobile (max-width: 375px).

Use Cases

• Who should clone this: This pattern is ideal for luxury beauty, skincare, or lifestyle brands that rely on high-quality photography and social proof to establish brand authority.
• Effective Remixes: Perfect for "New Arrival" drops where art direction is the primary selling point. The split-screen hero can be remixed to show "Before vs. After" results or "Day vs. Night" product applications.
• Practical Directions: Re-use the minimalist header and UGC slider logic to modernize a standard Shopify store. The ghost button style (OH HI in screenshot) translates well to any minimalist retail interface.
• Clone Scope: A quick-section clone of the hero and UGC slider is recommended for landing pages; a full-page clone is best for those migrating a brand towards a minimalist, high-impact aesthetic.