Composable Component Tree
A layered hierarchy — root, set, portal, frames — separates feed orchestration from playback logic, enabling stories to be placed in feeds, product pages, and theme blocks without duplicating behaviour.
Shoppable Stories Platform
Role
Architecture & Implementation
Platform
Shopify Theme
Year
2025
Overview
Retail discovery on mobile is increasingly story-driven, yet standard e-commerce layouts struggle to deliver the same immersive, sequential browsing experience consumers expect from social platforms. The business needed a native storefront format that could surface editorial content, brand campaigns, and sport-specific collections without pulling users out of the purchase journey.
Starting from a basic story playback concept, the platform was evolved into a full commerce storytelling system. By combining familiar story navigation, author-based grouping for sport verticals and brands, and embedded product cards within frames, the experience turns passive browsing into direct commerce — designed, architected, and built end-to-end as a composable component system within the Shopify theme.
Technical Highlights
The platform combines composable web components, event-driven orchestration, and metaobject-backed content to deliver a scalable and reliable solution. The architecture was designed to support placement across the storefront while keeping playback behaviour consistent regardless of where stories are embedded.
Author & Content Model
Evolved from a simple frame sequence into author-grouped stories — enabling content organised by sport (football, running) or brand, each with its own identity and thumbnail ring in the feed.
Shoppable Collection Frames
A dedicated frame type pauses autoplay and renders a scrollable product grid, bridging editorial storytelling and direct product discovery without breaking the story flow.
View State Persistence
Client-side view tracking syncs seen/unseen ring states across the DOM and survives Shopify section reloads, matching the social-native expectation that stories indicate what has already been watched.
Architecture
The core challenge was replicating a mobile-native, fullscreen story experience inside a Shopify theme — a server-rendered, section-based environment where components mount and unmount dynamically during theme editor and section updates.
The implementation architecture uses a tree of Lit web components orchestrated through bubbling custom events. A root controller manages which story set is active and coordinates navigation between sets; each set owns its trigger, portal, and frame content. The portal renders into document.body via a modal layer, isolating the fullscreen viewer from surrounding layout constraints. Content is modelled as Shopify metaobjects — story sets with ordered frames, optional product collections, thumbnails, and author metadata — with Liquid composing static markup and the client components owning all interaction and timing.
Several product concepts were introduced during implementation to extend the original scope: author identity for editorial grouping, collection frames as a shoppable end-cap to each story, and seen/unseen ring state tied to local view persistence. These evolved the basic story viewer into a merchandising channel the content team could operate independently.
Playback & Interaction
The platform relies on an event-driven interaction model for all story lifecycle transitions — open, close, complete, and cross-set navigation.
The frames engine handles autoplay with segmented progress bars, supporting both timed image frames and multi-loop video playback. Tap zones advance or rewind; a hold gesture pauses progress without interfering with product link clicks. Collection frames are treated as a distinct frame type — autoplay suppressed, progress immediately complete, user free to browse the embedded product grid. When a story completes, events propagate upward to advance to the next author set or close the viewer, preserving a continuous feed experience across sport categories and brand channels.
Outcome
The result is a scalable commerce storytelling platform that provides immersive, shoppable content discovery directly within the storefront.
By connecting familiar story UX patterns, author-based content organisation, and in-frame product cards, the system delivers editorial engagement while shortening the path to purchase. The composable architecture — designed and implemented as a cohesive component system — provides a foundation for future expansion without reworking the core playback or orchestration layers.