IGRAČKE · DISCOVERY-LED
- Themes & characters
- shop by age
- price bands
- deals, gifting and impulse
IN DEVELOPMENTECOMMERCE · SHOPIFY HYDROGEN
Toyland
Toyland is a toy and baby retailer in Montenegro getting a new storefront. I designed the complete commerce experience - discovery, category and product pages, mobile behavior, interactions and states - and then implemented it myself in Shopify Hydrogen, against the real product catalogue.
DESIGNED · CLAUDE DESIGN · POČETNA · 1440→BUILT · HYDROGEN · SAME PAGE, SAME VIEWPORT
capture 01 · home · desktop 1440
The mockups use controlled sample content; the implementation runs against the real Shopify catalogue. The goal was never to reproduce sample data - it was a design system that holds up when real products, titles, prices and states arrive.
TWO WAYS OF BUYING
Toyland sells two quite different kinds of products. Toys are bought on discovery - characters, themes, age, gifting, impulse. Baby equipment is bought on consideration - specifications, safety standards, trust and comparison. One storefront had to support both behaviors without splitting into two shops.
60+ mockups · desktop & 390 mobilestate & interaction specs
DESIGN → BUILD
Designed in detail first. Then built to match.
The redesign was worked through in Claude Design in detail - responsive behavior, states and interactions - then implemented in Hydrogen and measured against the mockups (QA below).
CATEGORY · 390 · DESIGNED → BUILT
capture 04 · plp · 390
A tinted department band, applied-filter language and product density specified for the viewport - then carried into the real catalogue.
PDP · DESKTOP · DESIGNED → BUILT
capture 05 · pdp · in-stock product · desktop
Gallery, buy box, delivery and returns, product detail hierarchy and recommendations treated as one complete purchase decision.
PRODUCT DISCOVERY
Mega menu → category → search.
The same taxonomy model informs all three: departments, themes and characters, age and price bands appear across the menu, PLP facets and search suggestions.
PRIMARY · plp - tinted department band · chip rail · facets · sort · live count · quick add
capture 03 · plp · facet rail + applied filter · 1440 · hydrogen
capture 02 · mega menu open · hydrogen
Suggestions, products and categories draw on the same taxonomy as the menu and the facets.
capture 07a · predictive results · desktop
PDP · COMMERCE DETAIL
DETAIL · THE BUY BOX
The buy box carries the decisions.
Most of the commerce thinking on the PDP sits in one column: price with savings and instalment presentation, stock and delivery state, variant chips, what's in the box, content accordions and a recommendations rail below. On mobile the add-to-cart goes sticky, so the decision never scrolls away.
Some things deliberately don't render yet: the store has no review data, so star ratings stay off everywhere until real reviews exist - no fake stars.
MOBILE & STATES
Mobile is its own design, not stacked desktop.
The phone gets its own header with a persistent search field and department chip rail, a full-bleed hero, bottom-sheet filters and a sticky add-to-cart.
SAME PAGE · DESIGNED → BUILT · 390
capture 06 · pdp 390 · sticky add-to-cart
TOUCH TARGETS
+
drawn glyph · 30–38px
tappable area · 44pxControls are drawn compact, but the spec requires 44px touch targets - so the build grows the tappable area under the drawn glyph. Designing the behavior, not just the pixels.
SEARCH, DESIGNED AS STATES
Not one happy-path dropdown.
I worked through what happens while results load, when nothing matches, when something fails and when the connection drops - and how the whole interaction changes on a phone. All six are designed states; results and no-match additionally get build-capture slots. Error and offline are not production-verified.
Idledesign
capture 07b · results · 390 · hydrogen
capture 08 · no results · 390 · hydrogen
Errordesign only
QA · DESIGN FIDELITY
Measured against the design, not eyeballed.
A comparison harness in the repo renders each mockup and the running storefront at the same viewport in the same browser, pairs their sections and diffs the computed styles - background, colour, type, radius, padding, gap.
Designmockup rendered
Same viewport1440 / 390 · same fonts
Implementationrunning Hydrogen build
Automated comparisoncomputed styles, per paired section
0PROPERTY MISMATCHES
Example - the redesigned homepage, latest run: all 8 sections paired against the mockup at 1440 with zero computed-style mismatches. The harness is committed in the repo and re-run per surface.
Real catalogue content differs from the mockups by design - the checks cover the surrounding UI system. Product-card content and interaction states stay manual review.
WHERE IT STANDS
In development, not yet live. The storefront runs against the real Shopify catalogue. Remaining work includes client assets and store setup - hero photography, payment and shipping configuration, a reviews provider - alongside a tracked engineering backlog before launch.
mobile lighthouse · /kategorije/lego · local production build
Measured on the category PLP - real products, real images and the discovery UI - rather than a placeholder-heavy homepage.
