Skip to main content
Loading storefront…

Shielva Storefronts

  • ICPs
  • Research
  • Motion engine
  • Platform

ICP-led commerce design

One commerce engine.One commerce engine.
Three buyers, three page grammars.Three buyers, three page grammars.

A Gen-Z lipstick buyer, a time-poor salon client and a conscious menswear shopper don't read a page the same way — so they shouldn't get the same page. Each storefront below is designed from its ICP's buying trigger backwards: layout, conversion widget, motion and structured data.

Makeup & cosmeticsVELOUROpen demo
Who
Gen-Z & young millennial women, 18–30. Discover on Instagram/Reels, buy on impulse, price-aware ($15–45).
Buying trigger
“Will this shade actually suit me?” — shade anxiety is the #1 reason carts are abandoned.
Page grammar
Product-as-hero, color-led, social proof everywhere. Pinned product choreography, shade rail, UGC wall.
Conversion widgets
  • Shade finder (depth × undertone)
  • Bundle builder — any 3 for $65
  • Photo review wall + rating histogram
  • Mobile sticky ‘Find my shade’
Scroll signature
Color-wash + product choreography: lipstick uncaps as you scroll, the page's hue deepens.
Structured data
Product + Offer + AggregateRating (ItemList), BreadcrumbList
  • Conversion rateShade finder removes the guesswork
  • AOV3-item set vs single lipstick
  • ReturnsRight shade first time
Hair & beauty salonMaison NoorOpen demo
Who
Working professionals 25–45 within 5 km. Time-poor, event-driven (wedding, interview, date), search “salon near me”.
Buying trigger
“Can I get a good stylist at a time that works — and what will it cost?”
Page grammar
Booking-first, calm editorial. The booking widget IS the hero. Transparent prices, senior-stylist proof, local trust.
Conversion widgets
  • Above-the-fold booking (service · stylist · day · time)
  • Price menu with ‘Book this’ deep-links
  • Before/after slider
  • Noor Circle membership
Scroll signature
Calm editorial: arch masks open, hair strands draw in, process steps crossfade on a pinned scene.
Structured data
HairSalon (LocalBusiness) + OpeningHours + OfferCatalog + ReserveAction, FAQPage
  • BookingsBook in < 60 s without calling
  • Local organic trafficHairSalon schema + hours + FAQ
  • Repeat revenueMonthly membership
Clothing & apparelATELIER NORDOpen demo
Who
Conscious millennials 25–40, mid-premium ($50–400). Research before buying, value quality & ethics, hate returns.
Buying trigger
“Will it fit, and is it worth the price?” — fit + value are the two objections.
Page grammar
Editorial / brutalist. Giant type, horizontal lookbook, data-driven transparency.
Conversion widgets
  • Fit finder with confidence score
  • Shop-the-look hotspots
  • True-cost price breakdown
  • Drop countdown + waitlist
Scroll signature
Brutalist travel: wordmark splits around the hero garment, lookbook pans sideways, cost bars scrub with scroll.
Structured data
Product + Offer + AggregateRating (ItemList), BreadcrumbList
  • Conversion rateFit certainty + free exchanges
  • ReturnsSize recommended from profile
  • AOV & list growthShop the look, drop waitlist

Research

What category leaders do — and what we borrowed

Patterns observed on the leaders' public sites. Their Lighthouse scores were not measured; ours are measured on this build.

Reference brands, their conversion pattern and the metric it moves
VerticalBrandPatternMoves
MakeupFenty BeautyShade finder in the first scroll; swatches across skin tonesCVR, fewer returns
MakeupRare BeautyViral hero products, photo reviews, mission blockCVR, repeat
MakeupGlossierRoutine sets, UGC wall, editorial hub linking to productsAOV, organic
MakeupCharlotte TilburyVirtual try-on, ‘complete the look’, tutorial hubCVR, AOV
SalonDrybarBook Now hero, photo style menu, Barfly membership, location pagesBookings, LTV
SalonBlo Blow Dry BarNearest-location booking, prices shown upfrontBooking completion
SalonToni&GuySalon finder per location, trend editorialLocal organic
FashionEverlaneCost-breakdown transparency, fit-aware reviewsCVR, trust
FashionReformationPer-product footprint, model height/size shownCVR, repeat
FashionSkimsDrops, waitlists, size-inclusive imageryList growth, launch CVR

Motion engine

Framer-grade motion, zero animation library.

One ~3 KB engine: a single rAF loop and two IntersectionObservers. Sections opt in with HTML attributes — data-reveal for entrances, data-scroll for scroll-linked scenes — so server-rendered sections animate without shipping per-section JavaScript. Progress is smoothed with a frame-rate-independent lerp, so it feels inertial while native scrolling, find-in-page and screen readers keep working.

  • fullDesktop, fine pointerPinned scenes, scroll-scrubbed progress (--p) with inertial smoothing, horizontal travel.
  • litePhones & touch tabletsNo pinning — sections stack, rails become native swipe carousels, short entrance reveals.
  • reducedprefers-reduced-motionEverything visible immediately. No transforms, no ticker.

The platform behind the pages · live

Admin + full commerce workflow, on Shopify Payments

  1. CatalogueProducts, variants (shade / size), bundles, memberships, inventory per location
  2. CartGuest cart merged into the account cart at sign-in, free-shipping meter, validated bundle pricing
  3. CheckoutShopify hosted checkout with Shopify Payments — cards, Apple Pay, Google Pay, Shop Pay; tax + shipping rates from Shopify
  4. OrdersShopify webhooks (HMAC-verified) → Postgres → order, transaction and fulfillment timeline for admin and customer
  5. Post-purchaseReturns & exchanges refunded through Shopify, verified reviews, confirmation / shipped / review-request / win-back emails
  6. Bookings (salon)Stylist hours & holidays, 10-minute slot holds, deposits paid on Shopify checkout, reminders, no-show tracking
  • Page builderPages assembled from the ICP section library (hero types, finders, rails, proof walls). Reorder, A/B test, schedule.
  • Content & SEOPer-page title, description, canonical, schema toggles, collection copy, blog / editorial hub.
  • CatalogueProducts, variants, media, bundles, memberships; price & stock pushed to Shopify; sync by SKU or Shopify CSV import.
  • Orders & customersOrders with Shopify Payments transactions, refunds, timelines; customer lifetime value; segments with CSV export.
  • BookingsServices, staff, hours, holidays, memberships.
  • Theme tokensBrand colors and radius with a live WCAG contrast check — the same token layer these storefronts run on.

SEO baseline (every storefront)

Built to rank, not just to move.

  • Server-rendered HTML for every section — motion is progressive enhancement, crawlers see all copy
  • Structured data per ICP: Product/Offer/AggregateRating, HairSalon + FAQPage, BreadcrumbList
  • Unique title + meta description + canonical + Open Graph per page
  • sitemap.xml + robots.txt generated from the route table
  • One display font per route (preloaded via next/font) — protects LCP
  • No images in the LCP path for the demos; CMS media will ship via next/image (AVIF, sized)
  • Semantic landmarks, skip link, ARIA radiogroups / tabs / slider, visible focus

© 2026 Shielva — storefront design playbook.