Subset Organic Apparel E-commerce Store

Overview

Subset (formerly Knickey) is a premium organic apparel e-commerce site built on Shopify that balances high-fashion editorial aesthetics with conversion-focused UI. It serves as an excellent reference for cloning a "clean luxury" brand experience, specifically showcasing how to use social proof and complex product swatches without cluttering a minimalist layout.

Design System

• Color Palette & Visual Hierarchy: The system uses a sophisticated earthy palette. Key colors include "Willow" green (#5B7763), "Greige" (#F5F4EE) for section backgrounds, and high-contrast charcoal for primary text. A vibrant "Sky" blue and orange are used sparingly in the announcement bar and cart bubble to draw attention to utility actions.
• Typography: The hierarchy relies on a classic serif (seen in the logo and H2 headers) for a premium feel, paired with a clean, high-readability sans-serif for product titles and utility text. Large serif font sizes (e.g., text-72) are used for hero impacts, while breadcrumbs and material callouts use all-caps sans-serif at smaller scales (text-14).
• Page Structure & Flow: The flow starts with a high-utility announcement bar, followed by a split-concept full-width hero. It transitions immediately into a scrolling brand ticker for social proof, then into specialized "In Bloom" product grids, and finally into a value-proposition section ("Committed to organic cotton excellence") featuring text-over-image tiles.
• Reusable Components:
  • Product Grid Items: Highly complex cards with dual-image hover states (shop-grid-item-hover-image), integrated star ratings, and functional color swatches that update the product image.
  • Brand Ticker: A smooth CSS-animated ribbon (ticker-list) that cycles press quotes and SVG logos.
  • Featured Category Cards: A grid of vertical-aspect images with a bottom-aligned label block using specific background variables (--block-bg).
• Implementation Clues: The site is a Shopify-based build using the "Slick" slider library for the announcement bar. It heavily utilizes CSS custom properties (variables) for dynamic styling, such as --badge-bg-color for dynamic stock badges and --desktop-btn-min-width for consistent button layouts.

Use Cases

• Who should clone this: Direct-to-consumer (DTC) brands in the sustainable fashion, skincare, or home goods space that want to establish authority through editorial photography and press validation.
• Effective Remixes: The product grid logic—complete with color swatches and secondary hover images—is perfect for any catalog with multiple variants (e.g., cosmetics, paint, or tech accessories).
• Remix Directions: Replace the "organic excellence" section with personal founder stories or technical specs. Use the ticker component but swap press logos for "As Seen On" influencer handles or customer testimonials.
• Clone Scope: For a fast win, clone the Home Ticker and the Product Grid Card logic. For a complete brand overhaul, the full-page layout provides a masterclass in pacing between sales-driven product rows and brand-driven storytelling blocks.