The Challenge
Sanzi is a fast fashion brand for women — an offshoot of the Valenci brand, focused on accessible, stylish pieces. They needed an ecommerce presence that felt premium without the premium theme price tag, and more importantly, one that actually fit their brand.
Off-the-shelf Shopify themes weren't cutting it. Too generic, too bloated, too many features they'd never use.
The brief: build a custom theme from scratch.
The Approach
We built a complete Shopify Online Store 2.0 theme with no external dependencies. Every line of CSS, every JavaScript function, every Liquid template — all custom.
Design system first:
Before writing any code, we established:
- Typography: Cormorant Garamond (display) + Jost (body)
- Colour palette: Black, champagne gold, warm cream backgrounds
- Animation principles: Subtle, purposeful, expo-out easing
- Component library: Cards, buttons, overlays — all with consistent styling
Key Features
Homepage
- Hero section with editorial imagery
- Two-column category navigation with image blocks
- Featured collection grid
- Brand statement section
Product Experience
- Second image reveal on hover
- Quick-add functionality
- Size guide modal
- Image gallery with zoom
- Care instructions accordion
- Related products
Cart
- Slide-out cart drawer (AJAX-powered)
- Quantity controls
- Dedicated cart page for checkout
Collection Pages
- Full-width product grid
- Filter drawer
- Sorting options
- Pagination
Technical Implementation
Sanzi/ ├── assets/ │ ├── base.css # Variables, typography, components │ └── theme.js # Vanilla JS functionality ├── sections/ # All customisable sections ├── snippets/ # Reusable components ├── templates/ # JSON templates for flexibility └── config/ # Theme settings schema
Why zero dependencies?
- Performance: No unused code from libraries
- Control: Every interaction behaves exactly as designed
- Maintenance: No breaking changes from third-party updates
- File size: Smaller assets = faster loads
All JavaScript is vanilla — event delegation, Intersection Observer for scroll effects, fetch API for AJAX operations.
Design Principles
- Editorial Elegance — Clean layouts, generous whitespace, refined type
- Warm Minimalism — Black and gold softened with cream tones
- Subtle Animation — Micro-interactions that feel premium
- Mobile-First — Touch-friendly, responsive throughout
- Performance — Speed as a feature, not an afterthought
The Result
Sanzi has a Shopify store that looks and feels nothing like a template. It's fast, it's on-brand, and the team can customise everything through Shopify's native theme editor.
No ongoing theme licence fees. No bloated code. Just a clean, performant store that converts.
Tech Stack
- Platform: Shopify Online Store 2.0
- Templating: Liquid
- Styling: Custom CSS with CSS custom properties
- JavaScript: Vanilla JS (no frameworks)
- Integrations: Native Shopify cart, checkout, customer accounts
