Avnzor is a fast-moving health and beauty brand with 1,300+ monthly orders 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 1,300-order/month store running, maintaining Algolia search continuity, and ensuring the new stack passed accessibility audits the old theme had never attempted.
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.
Merchandising primitives — Avnzor
Six primitives. Three metaobjects. Every surface. The team ships campaigns by composition, not coding.
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.