How this store is built
This is a portfolio storefront by Shamil Valiev (source on GitHub). Every feature below maps to a requirement that senior Shopify and headless roles ask for, and links to the files that implement it. 40 of 40 are done.
Data comes from mock.shop (a public, auth-free Storefront API) or, with one environment change, a development store seeded with Shopify's generated test data. Checkout here is mocked. Discounts shown in the storefront are estimates; the Rust Function computes the real ones at checkout.
Stack
- Hydrogen 2026.10
- React Router 7 (framework mode, SSR)
- Oxygen worker runtime
- TypeScript
- Tailwind 4
- gql.tada typed Storefront API queries
- Rust Shopify Function (checkout discounts)
- Playwright, axe and Lighthouse CI
How the A/B test and the discount Function work
A/B test. Each visitor gets a random but stable id in a cookie. The server picks arm A or B from it before rendering, so there is no flicker, and ?exp=hero:b forces an arm. Results would be read by arm in an analytics tool; this demo does not include a results dashboard.
Discount Function. Rust compiled to WebAssembly, deployed in a Shopify app and run by Shopify on the cart and checkout of the dev store. It is tested with cargo test fixtures in CI. On the public demo (mock.shop) prices are an estimate from the same rules written in TypeScript.
QA override for the A/B test
Force a home hero arm with ?exp=hero:b (or ?exp=hero:a), and turn every experiment off with ?exp=off. Assignments are otherwise deterministic from the first-party vid cookie.
Platform
Hydrogen, React Router 7 and TypeScript with streaming SSR
DoneAnswers: Hydrogen / React / TypeScript / SSR
Typed Storefront API queries with gql.tada
DoneAnswers: Hydrogen / React / TypeScript / SSR
Commerce logic
Rust discount Function: multipack tiers, reward ladder, bundle offer
DoneAnswers: Shopify Functions (Rust), custom discount logic, Scripts to Functions
Pure TypeScript offer engine shared by PDP, cart and bundle builder
DoneAnswers: Tiered pricing, bundling
Experimentation
Server-side A/B framework: deterministic bucketing, cookie, QA override
DoneAnswers: A/B testing, CRO, experimentation
Home hero A/B test with exposure analytics events
DoneAnswers: A/B testing, CRO, experimentation
Content and SEO
Typed content layer shaped like metaobjects, reads real metafields first
DoneAnswers: Metafields / metaobjects, content modelling
Feature registry that drives the /build page
DoneAnswers: Ownership / communication
JSON-LD: Product and Offer, BreadcrumbList, Organization, WebSite with SearchAction
DoneAnswers: SEO, structured data
Canonical URLs and Open Graph / Twitter meta helpers
DoneAnswers: SEO, structured data
Paginated sitemap.xml and robots.txt resource routes
DoneAnswers: SEO, structured data
Agentic commerce
/llms.txt describing the catalog and how an agent adds to cart
DoneAnswers: Agentic commerce (2026)
Shopify Standard Actions on cart and product elements
DoneAnswers: Agentic commerce (2026)
Quality and delivery
Playwright end-to-end: browse, PDP, add to cart, drawer, cart page
DoneAnswers: Testing, QA automation
Accessibility checks with axe on home, collection, PDP and cart
DoneAnswers: Accessibility, WCAG 2.1 AA
Unit tests for pure logic (content, SEO, offers, bucketing)
DoneAnswers: Testing, QA automation
GitHub Actions: typecheck, unit, build, e2e, Lighthouse CI
DoneAnswers: CI/CD, GitHub workflows
Core Web Vitals budgets and image strategy
DoneAnswers: Core Web Vitals
Product page
Multipack selector with per-unit price and savings
DoneAnswers: PDP conversion features
Sticky mobile add-to-cart bar
DoneAnswers: PDP conversion features
Specs accordion, FAQs and badges from the content layer
DoneAnswers: Metafields / metaobjects, content modelling
Accessible comparison table in a dialog
DoneAnswers: PDP conversion features
Add-ons rail: add first, then open the drawer
DoneAnswers: PDP conversion features
Back-in-stock form for sold-out variants
DoneAnswers: PDP conversion features
Recently viewed products, SSR-safe
DoneAnswers: PDP conversion features
Cart and AOV
Cart reward ladder: free shipping, free gift, extra discount
DoneAnswers: AOV / attach rate
Automatic gift line, idempotent and not quantity-editable
DoneAnswers: AOV / attach rate
Complementary recommendations rail in the cart drawer
DoneAnswers: AOV / attach rate
Estimated savings line, labelled as applied at checkout
DoneAnswers: AOV / attach rate
Markets and promotions
Country and currency selector with @inContext on every query
DoneAnswers: Markets, multi-currency, i18n
Time-windowed announcement bar evaluated on the server
DoneAnswers: Promotions / campaign ops
Bundling
Build-your-kit page: pick three, kit pricing, shared bundle id
DoneAnswers: Bundle builder
Storefront essentials
Cart drawer with optimistic line updates
DoneAnswers: Hydrogen / React / TypeScript / SSR
Predictive search
DoneAnswers: Hydrogen / React / TypeScript / SSR
Collection browsing with filters and sorting
DoneAnswers: Hydrogen / React / TypeScript / SSR
Customer accounts via the Customer Account API
DoneAnswers: Hydrogen / React / TypeScript / SSR
Analytics with customer privacy consent
DoneAnswers: Analytics and measurement
Shop Pay button on the product page
DoneAnswers: Checkout and payments
Ownership
/build page listing every feature with file links
DoneAnswers: Ownership / communication
README with architecture diagram and switch-to-real-store steps
DoneAnswers: Ownership / communication