GeekCorner

Template ShopRenter on Monday. Built a custom premium webshop in five days. Faster, mobile-first, more orders from week one.

• 01User surface

  The whole experience the user sees

  This frame shows the live product: hungary's first custom-designed mystery box + geek webshop · conversion rate jumped. Every component is ours · scope, design, code, deploy.

• 02Stack behind the screen

  What's powering it: ShopRenter, Vanilla CSS, Vanilla JS

  3 stack components run behind this frame · ShopRenter, Vanilla CSS, Vanilla JS drive the visible UI; the rest sit in the data layer. All studio-owned.

• 03What we shipped

  Custom ShopRenter build (not a template)

  The brand looks the way it behaves · premium

• 04Status

  Live · geekcorner.hu.

  This isn't a demo · real traffic flows through it, with monitoring + weekly fixes attached.

• 01 · BRIEF

  Audit of the live ShopRenter template.

  Walked the live shop with the founder, mapped the seven highest-friction surfaces (hero, mystery-box reveal, product card, cart, checkout, mobile nav, post-purchase). No spec doc · screenshots + voice notes.

• 02 · BRAND

  Type, palette, motion language.

  Display serif for the hero claim, mono for SKU strings, two-tone purple/black palette. Motion language: card-flip on hover, micro-haptics on add-to-cart, no theatrical hero animation that would block the LCP.

• 03 · ARCHITECTURE

  Plain CSS / JS so the next maintainer is unblocked.

  Decision document: no framework, no build pipeline beyond minification, no asset bundler. The storefront is a folder of files the in-house team can read on day one. ShopRenter's product feed and checkout stay untouched · we ship a frontend, not a re-platform.

• 04 · BUILD

  Storefront, motion, mobile-first across two sprints.

  Sprint 1: hero, product grid, product detail, cart drawer · all responsive, container-queried per component. Sprint 2: card-flip hover, add-to-cart micro-haptics, post-purchase upsell. PSI 95+ on mobile through both sprints.

• 05 · POLISH

  SEO, structured data, analytics wired up.

  Product / Organization / WebSite JSON-LD, dynamic 1200×630 OG, canonical URLs. GA4 + Plausible cover conversion, add-to-cart, scroll-depth, cart-abandon · the launch ships with measurement, not a follow-up project to add it.

• 06 · SHIP

  Live, with conversion measured from day 1.

  Cut over on a Friday, the editorial team continued in the ShopRenter UI for new copy. Conversion lift visible inside the first week · no theatre, no 'soft launch' · just the number going up.

• 01Storefront

  Custom storefront on top of ShopRenter

  Plain HTML/CSS/JS · the underlying product feed and checkout from ShopRenter, untouched. No framework lock-in for the next maintainer.

• 02Motion

  Card-flip hover + add-to-cart micro-haptics

  60fps motion on commodity hardware · no LCP-blocking hero animation · prefers-reduced-motion respected.

• 03Mobile

  Mobile-first that doesn't look like 'mobile-friendly desktop'

  Container queries on every component · portrait stacks features, hides redundant prose, retunes spacing. PSI 95+ on mobile.

• 04SEO

  Structured data + canonical + OG image

  Product / Organization / WebSite JSON-LD, dynamically generated 1200×630 OG, canonical URLs · the SERP card fits.

• 05Analytics

  GA4 + Plausible · cart-abandon funnel from day 1

  Conversion + add-to-cart + scroll-depth + cart-abandon all wired before the cut-over · no 'measure later' debt.

• 06Handover

  Editable by the team · no developer for new copy

  All hero copy + product blurbs editable inside ShopRenter · no Markdown round-trip, no PR for a typo.

• 
  01Frame

  Hero · the mystery-box statement

  Single bilingual claim, characters lit from behind, two CTAs · the brand reads premium in 3 seconds, no slider, no template smell.

• 
  02Frame

  News strip · brand momentum

  Three-card news section signals the shop is alive · curated content cards (anime drops, conventions, new mystery boxes) instead of a static blog.

• 
  03Frame

  Product detail · all the buying-signal cells in one frame

  Price, ETA, loyalty points, manufacturer, wishlist, qty, add-to-cart · everything a buyer needs to commit, on a single screen, no tab dance.

• 
  04Frame

  Mega-menu · categories + 7-locale flag bar

  Category headers (Mystery Box, Anime, Film, Gamer, Comic Heroes) cluster against a 7-flag locale strip · the shop ships across the region without a sub-domain split.