Avnzor

Avnzor is a fast-moving health and beauty brand doing 5,000+ orders/month across skincare, haircare, and supplements. In Phase 1, the problem was operational: the team was dependent on a developer for every campaign update, every new product surface, every merchandising change. The storefront was a black box. Nothing could be changed without code.

Phase 1 solved that. But as the brand scaled, the Shopify Plus theme hit a new ceiling. There was no component model, no design token system, no Arabic-first layout logic, and no accessibility. The product roadmap — a personalized wellness quiz, lab-upload-driven bundles, subscription logic, a bilingual experience that felt native in Arabic — required capabilities the theme architecture could never support. The only real answer was a clean rebuild on Hydrogen.

The challenge in Phase 2 wasn’t just technical migration. It was doing it while keeping a store doing 5,000+ orders/month running, maintaining Algolia search continuity, and ensuring the new stack passed accessibility audits the old theme had never attempted.

Phase 1 removed the engineering bottleneck. Phase 2 removed the ceiling Phase 1 could not: no component model, no token system, no accessibility, and Arabic treated as a translation layer instead of a layout direction.

Phase 1 was about merchandising independence. I built the theme as a kit of primitives — content blocks the team could compose without code, backed by metaobjects that held the brand’s product, ingredient, and routine data in structured form. The design system encoded the editorial standards so the team couldn’t accidentally drift off-brand even when iterating quickly. Klaviyo was integrated for lifecycle flows. The result: the buying team could ship campaigns and new product surfaces on their own.

Phase 2 was about architectural independence. Three parallel tracks had to move in concert: the semantic foundation (ARIA, keyboard navigation, RTL), the design system (tokens from primitive hex values up to component-level semantics), and the integration layer (Algolia for search and recommendations, Clerk for auth, Vercel for deployment and QA annotation). Getting the font stack right — Archivo for Latin, Almarai for Arabic — unlocked RTL rendering across the entire storefront with no inline overrides. Getting the token architecture right (primitive → semantic → component) meant dark mode, RTL, and future theme variations could all be driven from one source of truth.

The guiding principle across both phases: the storefront is infrastructure, not a skin. Every decision was made for replaceability and long-term team ownership.

Context: Avnzor’s team was small and non-technical. Every storefront change required a developer. Campaigns were slow, seasonal updates were stressful, and the team had no visibility into what they could change without breaking something.

Choice: Section-based theme with metaobjects as the data layer. Metaobjects stored the brand’s ingredient data, routine tags, and product relationships in structured form — separate from the templates. Content blocks were designed as configurable Shopify blocks so the team could compose new product surfaces from existing primitives without touching code.

Trade-off: Higher upfront build complexity. Every section needed to be designed as a system component, not a one-off layout.

Context: Shopify offers headless options at different levels — a customized theme with headless-adjacent patterns, or a full Hydrogen app.

Choice: Custom Hydrogen app. Avnzor’s roadmap — quiz-driven personalization, lab upload, subscription bundles, bilingual — required full control over routing, data fetching, and component architecture. No theme could accommodate that without accumulating technical debt faster than value.

Trade-off: Significantly longer initial build time and no out-of-the-box theme editor. Every component had to be designed and built from scratch.

Context: Starting with components shows faster visible progress. Starting with a token hierarchy creates a multiplier for everything built after.

Choice: Token hierarchy first. Primitive tokens (navy-500, gold-500) → semantic tokens (text-foreground, bg-muted, text-accent) → component usage. Button, Checkbox, and Dialog primitives all consume the same token set — making RTL and dark mode a config change, not a refactor.

Trade-off: Slower visible progress in the first two weeks. Framed clearly to the client as investment, not delay.

Context: Accessibility audits are typically scheduled post-launch. For a storefront targeting GCC markets with assistive technology users, that order felt backwards.

Choice: Hard gate per route. Full audit across home, collections, PDP, cart, search, sign-in, and CMS pages before any preview URL went out — 34 issues across four severity batches, all resolved first.

Trade-off: Added roughly two weeks to the initial delivery timeline. The alternative — retrofitting ARIA and keyboard navigation into production components — would have taken longer and been far more disruptive.

Context: Shopify’s native search is English-first and has no recommendation layer. Avnzor’s catalog spans 1,000+ Arabic-named SKUs.

Choice: Algolia with bilingual indexing and the Recommend API for Frequently Bought Together. The sync pipeline handles Arabic title correction and indexing patches for metafield data. The FBT component renders in the correct language client-side based on locale.

Trade-off: Ongoing Algolia operational cost and custom batch-translate scripts required to maintain Arabic index quality.

Context: Avnzor sells supplements — a repeat-purchase category — through a storefront built for one-off transactions. A customer buys four bottles, takes them unevenly, runs out on four different days, and comes back only when they happen to remember. The catalog knew what people bought and nothing about what they were doing with it. SuppCo had already proved the missing piece: people will maintain a supplement stack if the tool respects their time, and a tracked routine turns a catalog into a habit.

Choice: Build the routine layer and deliberately leave out the scoring layer. SuppCo rates your stack out of 100 and tells you what you are missing — for a retailer in KSA, nutrient totals and gap analysis are a medical claim, not merchandising. So My Stack schedules rather than diagnoses: shelf placement across five time slots, adherence logging, and run-out prediction. The constraint is enforced in the code rather than in a copy review — the quiz rule set states that it names shelf placement and never dosing, and the in-cart guide names no dosages, nutrients or ranges.

Trade-off: Gave up the most engaging mechanic in the category. The score is what makes SuppCo shareable, and Avnzor cannot have one until the regulatory framing is confirmed with counsel.

Phase 1 delivered a Shopify Plus storefront with a full section-based merchandising system: configurable content blocks, metaobject-backed product and ingredient data, Klaviyo lifecycle integration, and a design system that encoded the brand’s editorial standards into the theme itself. The buying team could ship campaigns and new product surfaces without engineering involvement from day one.

Phase 2 delivered a production Hydrogen storefront on Vercel’s edge network. Every route was audited to WCAG 2.1 AA before staging — 34 issues across four severity batches, all resolved first. Homepage scores Accessibility 100, SEO 100 in Lighthouse; PDP scores Accessibility 96, SEO 100, CLS 0. The design system ships with a full token layer and extracted component primitives (Button, Checkbox, Dialog), all ready for dark mode and theme variation without class-level changes. Search is powered by Algolia in both English and Arabic. The PDP surfaces six custom metafields. The Frequently Bought Together component uses the Algolia Recommend API with bilingual product titles. Arabic renders via Almarai with zero inline overrides.

My Stack shipped as the personalization layer: a five-tap quiz that leaves a new account with a populated routine in under sixty seconds, a schedule across five time slots, one-tap dose logging from an email link with no session required, streaks, and a Refill Radar that predicts run-out and turns it into the reorder. Every entry point — quiz, product page, cart, post-purchase prompt, and the guest stack merged on login — writes through a single path, so there is no second way to create a stack item. The rule set that decides which products answer which goal is data, not code, so merchandising tunes it without a deploy.

Phase 1: The buying team now ships campaigns and new product surfaces without engineering involvement. The redesigned product pages are live, and the system became the foundation for the brand’s broader digital surface; no causal conversion figure is claimed without a controlled baseline.

Orders/month running through the rebuilt storefront, migrated without taking the store down

5,000+

WCAG 2.1 AA issues resolved before staging

34

PDP UI/UX fixes in a single audit pass

19

Lighthouse · Homepage Accessibility / SEO

100 / 100

Lighthouse · PDP Accessibility / SEO / CLS

96 / 100 / 0

Shopify collections root-caused as unpublished to Hydrogen

202

I'd start the Arabic content audit — metafield coverage across the catalog — in parallel with the Phase 2 build, not after. By the time Arabic routing was ready, a significant portion of SKUs still lacked Arabic titles and descriptions. Clean data before the feature ships is always cheaper than cleaning in response to it. I'd also build the Phase 1 metaobject schema with the eventual Hydrogen migration in mind — the structured data was directionally right but needed reshaping for the Storefront API patterns Hydrogen uses.

The scoring layer, if counsel clears the framing — a stack readout is the mechanic that would make My Stack shareable, and it is the one piece currently ruled out. Lab upload sits behind the same question. The nearer work is turning Refill Radar into subscription conversion: the run-out date is already computed, so the store knows when a customer is about to lapse before they do. Beyond that, the same quiz rule set extends from supplements into skincare routines, where the regulatory line sits in a different place again.