Concept Project · Demo
FIRN
Concept outdoor e-commerce store: big-equipment-brand product storytelling on a Shopify structure.
01 / The brief
A premium outdoor-gear brand (high-performance coolers, camp kitchen, climate gear, outdoor cooking) needs a storefront that matches its products. The stated reference: the big equipment brands, where a product page tells a story instead of stacking thumbnails.
The scope: category navigation, product grid, detail pages with full technical specs, cart, checkout. And one clear constraint: the site has to make a €300 product feel worth it, without a single studio photo.
02 / The approach
A real storefront, not a landing page
Category navigation, product grid, product detail with spec tables and scroll storytelling, persistent cart, mock checkout, with an explicit demo notice at every sensitive step.
Zero fake reviews
No customers means no reviews. Instead of inventing stars, product pages convince with typographic hierarchy, specs and product detail. Honesty as a design decision.
A structure modeled on Shopify
Collections, variants, structured product data: the catalog is organized the way a real Shopify store would be, so the demo translates directly.
Performance first
Type-led art direction, animations limited to transform and opacity, performance budget held on mid-range mobile.
03 / What this demonstrates
- Complete e-commerce information architecture: categories, collections, product pages, cart, checkout.
- Cart-and-checkout thinking (cart states, persistence, the flow to payment), exactly what setting up a real store requires.
- Structured product data: specs, variants, technical tables.
- Product storytelling that sells a premium positioning without studio photos or fake reviews.
- Restraint under a performance budget: the site stays fast, even animated.
This is the front-end side of the service I actually sell: Shopify store setup and management. FIRN shows I understand the structure of a catalog as well as the surface that sells it.
04 / Stack
- Next.js
- React
- TypeScript
- Tailwind CSS
- GSAP