Woset Illustrative E-commerce Product Grid

Overview

Woset is a playful, illustrative e-commerce platform that challenges traditional retail aesthetics with a hand-drawn, "creative-first" approach. It serves as a strong reference for builders looking to implement non-grid-based layouts, custom filtering animations, and high-energy product storytelling within a functional Shopify framework.

Design System

• Color Palette & Visual Hierarchy: The background uses a soft, off-white/cream hex (#FDFBF7) to mimic paper, providing a neutral canvas for the vibrant, primary-color-heavy illustrations. Hierarchy is established through size rather than color; the bold black typography commands attention while yellow accent buttons (btn--yellow) serve as the primary calls to action.
• Typography System: The site uses a high-contrast serif/gothic mix. The hero headline is oversized and tightly tracked. Product titles in the grid use a clean, medium-weight sans-serif (A1 Gothic), while interactive elements like filters use uppercase labels for clarity.
• Page Structure & Section Flow:
  1. Header: Minimalist centered logo with utility links (Shop, World, Information) and a localized language switcher.
  2. Hero: Large, centered typography statement.
  3. Interaction Layer: Horizontal pill-shaped filter buttons with a rotate-on-hover effect.
  4. Product Grid: A staggered, masonry-style layout where product cards are defined by oversized, illustrative JPG/WebP images rather than strict borders.
• Reusable Components:
  • Interactive Pilling Filters: The js-product-filter buttons utilize a unique btn--hover-rotate class that adds organic motion to a standard UI element.
  • Illustrative Product Cards: Each card contains a large image link, a "Quick Add" button that appears on hover, and basic metadata (title and price) positioned below.
• Interaction & Motion: The HTML reveals a js-loading-overlay and js-cart-msg notification system, suggesting a seamless AJAX-based shopping experience. Filters use active state classes (is-active) to provide immediate visual feedback.
• Implementation Clues: Built on Shopify, the layout uses custom CSS classes like product-grid-item and a containerized structure (hero-text .container). It relies on lazy-loading for image performance while maintaining a complex, illustrative aesthetic.

Use Cases

• Who should clone this: Brands in the education, stationery, kid-focused tech, or artisanal craft spaces that want to emphasize creativity over corporate efficiency.
• Effective Remixes: This pattern works perfectly for digital marketplaces selling assets (fonts, brushes, templates) or boutique apparel brands wanting an "art-gallery" feel for their collections.
• Practical Remix Directions: Builders can retain the staggered grid logic but swap the hand-drawn illustrations for high-fashion editorial photography. The "Quick Add" button logic can be easily integrated into more standard layouts to improve conversion without clutter.
• Suggested Clone Scope: Start by cloning the Product Filter + Staggered Grid combination. This allows you to capture the core "look and feel" of the site without needing to build out the entire world-building content (the "World"/"Information" sections).