Project Overview
A flexible Timeline + Tab component designed for Cozyla's storytelling pages.
It allows customers to navigate between different stages or product series intuitively.
The Challenge
Cozyla wanted to present their brand journey and product stories interactively —
without embedding external apps or scripts that bloat performance.
The Approach
We built a native section system that combines both timeline scrolling and tab navigation logic,
entirely managed via Shopify's theme editor.
Process
- UX Wireframe — Designed a scroll-linked visual flow.
- Development — Liquid + vanilla JS + CSS animation triggers.
- Editor Integration — Custom schema with repeatable blocks.
Key Features
- Dual-mode display (Timeline / Tabs)
- Theme editor field control for each stage
- Lightweight, fully native implementation
Results & Impact
+34% engagement on product storytelling pages
0 third-party apps, 100% natively maintained by the client team.
Technical Stack
Shopify Liquid
JavaScript (Scroll Logic)
CSS Animation
Client Feedback
"Finally, we can tell our story dynamically, with no extra maintenance."
— Cozyla Team
Insight
A perfect example of using UX patterns as storytelling devices in Shopify themes.