Hyva Storefront Rebuild - PDP, PLP, Cart, Quick View, Wishlist, My Account, and Checkout rebuilt on Hyva (Customers, Frontend Team, Core Experience)
Magento 2 Hyva Migration: A Luma to Hyva Storefront Migration
This case study is a real-world example of our work as a Hyva development company, carrying out a Magento 2 Hyva migration for a retailer running both B2C and B2B customer journeys on a legacy Luma frontend. The existing storefront limited performance and modern UI flexibility, so we planned a full Luma to Hyva storefront migration that kept every existing feature working, from wishlist and gift vouchers to B2B pricing and quoting, while rebuilding the frontend on Hyva, Alpine.js, and Tailwind CSS.
Industry
eCommerce & Retail
Focus Area
Magento 2 Storefront Migration
Core Platform
Magento 2
Frontend
Hyva + Tailwind CSS + Alpine.js
Deployment Model
Custom / On-prem
Outcomes
Outcomes
Faster Frontend
Removed unused assets and scoped styles to reduce render-blocking CSS.
Better Web Vitals
Optimized images and delivery to improve LCP across key pages.
Smaller Fonts
Converted Avenir fonts to WOFF2, reducing the critical font footprint.
Reliable Cart Sync
Resolved private content caching issues affecting cross-device Mini Cart behavior.
Business Challenges
Legacy Frontend Migration
Root Cause: The existing storefront ran on Magento's legacy Luma frontend, which limited performance and modern UI flexibility.
Business Impact: Migration had to move to a modern, performance-focused storefront without disrupting live commerce operations.
Functional Continuity
Root Cause: New UI/UX requirements needed to be introduced while every existing business feature kept working.
Business Impact: Risk of breaking wishlist, gift voucher, account, and other live functionality during the rebuild.
Dual Customer Journeys on a B2B Magento Storefront
Root Cause: B2C and B2B customers needed different access and authentication rules within one platform.
Business Impact: Without clear separation, B2B pricing, quoting, and guest rules could leak into the B2C journey and vice versa.
Journey Complexity Across Touchpoints
Root Cause: Product discovery, checkout, cart, wishlist, gift voucher, and store-locator experiences all needed Figma-aligned rebuilds.
Business Impact: A partial rebuild would leave inconsistent UX across major customer touchpoints.
Upgrade-Safe Third-Party Integration
Root Cause: Third-party services needed to be integrated without modifying vendor code.
Business Impact: Directly editing vendor modules would break future Magento and extension upgrades.
Solution Approach
View Model-Driven Hyva Architecture for the Luma to Hyva Migration
What We Did: Built the Hyva frontend on Alpine.js interactions driven by View Models rather than legacy Knockout patterns, as the core of the Luma to Hyva storefront migration.
Why It Matters: Keeps the frontend lightweight and predictable while staying aligned with Magento's service-contract architecture.
Upgrade-Safe Custom Modules
What We Did: Developed custom Magento modules for Store Locator, Blog, Gift Voucher, B2B Access, Customer Account, Request Quote, and payments using plugins, observers, and data patches, an approach to upgrade-safe Magento customization that avoids touching vendor code.
Why It Matters: Business functionality extends cleanly without ever touching vendor or core Magento code.
Scalable Search & Discovery
What We Did: Combined Algolia Search and Elastic Suite for filtering, sorting, and category merchandising.
Why It Matters: Product discovery stays fast and relevant as the catalogue and traffic grow.
Use Cases Delivered
AJAX-Based Interactions - Cart, Wishlist, My Account, and Request Quote all work without full page reloads (Customers, Core Experience)
Algolia-Powered Search - Product search, filtering, and results built on Algolia, using an Algolia search Magento integration in place of the default catalogue search (Customers, Marketing, Product Discovery)
Advanced Product Presentation - Swatches, configurable options, image/video galleries, zoom, and swipe/drag support (Customers, Product Discovery)
B2B Access Control - Separate authentication and guest-access rules for B2B customers on the same B2B Magento storefront as the B2C journey (B2B Customers, Sales, Access & Accounts)
Store Locator with Maps - A Magento store locator Google Maps integration built directly into the storefront (Customers, Customer Experience)
Gift Voucher Lifecycle - A gift voucher Magento module handling cron-based scheduled delivery, redemption, and expiry (Customers, Operations, Commerce Operations)
Checkout Payment Integration - A Hyva checkout payment integration connecting a third-party payment gateway to Hyva Checkout (Customers, Finance, Payments)
Technologies and Tools
Core Platform
Magento 2
PHP 8.2+
MySQL
Storefront
Hyva Theme
Hyva Checkout
Magento Alpine.js
Tailwind CSS
storefront stack
Search
Algolia Search
Elasticsearch / Elastic Suite
Integrations
Payment Gateway
Google Maps
Amasty Extensions
Tools
Git
Composer
Magento CLI
Lighthouse
Performance Optimisation
- Delivered measurable Hyva theme Magento performance gains by removing unused legacy assets and scoping page-specific styles to cut render-blocking CSS.
- Improved Core Web Vitals with server-rendered images, preload hints, and WebP delivery, lifting LCP across key pages.
- Converted Avenir fonts from TTF to WOFF2 to reduce the critical font payload.
- Audited performance with Lighthouse across homepage, PDP, PLP, and Cart to confirm gains held after launch.
BUSINESS OUTCOMES
Faster, Leaner Frontend
Removed unused legacy assets and scoped page-specific styles to cut render-blocking CSS.
Improved Core Web Vitals
Server-rendered images, preload hints, and WebP delivery lifted LCP across key pages, as part of a broader Magento 2 Core Web Vitals optimisation effort.
Smaller Font Payload
Converted Avenir fonts from TTF to WOFF2 to reduce the critical font footprint.
Reliable Cross-Device Cart Sync
Resolved private content caching issues affecting cross-device Mini Cart behaviour.
Consistent Product Availability
Fixed search/filter stock inconsistencies with a Magento PLP pagination fix that resolved count mismatches.
Future-Proof, Upgrade-Safe Codebase
Maintains compatibility with current Magento and PHP versions, with vendor code left untouched.
Recent Case Studies
Optimize your cloud infrastructure, implement robust solutions, and stay ahead of trends with our resource hub.
Retail
Enterprise Integration Platform
MuleSoft-powered omnichannel retail integration for enterprise commerce operations
View Case Study
Retail
Optical Retail & Contact Lens Commerce Platform
Explore how an optical retail and contact lens commerce platform streamlines online sales, product management, and customer experiences.
View Case Study
Let's Talk
See Cinovic's Expertise in Action Book Your Free 15-Minute Development Demo
Join 100+ teams scaling with Cinovic. Fill out the form below to get personalised tour of the platform.
Frequently Asked Questions About Magento 2 Hyva Migration
It means replacing the Luma frontend with the Hyva theme while keeping every existing feature working. Wishlist, gift vouchers, B2B pricing, and checkout all get rebuilt on the new frontend rather than left behind, so the migration modernises the storefront without losing functionality.
Yes. Access and authentication rules can be configured separately for B2B and B2C journeys within a single Magento installation, so a B2B Magento storefront and a public B2C storefront can share the same backend without pricing or access rules leaking between them.
Custom functionality is built as plugins, observers, and data patches in dedicated modules rather than direct edits to vendor or core Magento files, so future Magento and extension upgrades don't conflict with the migration's custom work.
Yes, an Algolia search Magento integration typically replaces default catalogue search and filtering with faster, more relevant results, while still working within Magento's existing product and category structure.
Common gains include lighter JavaScript and CSS payloads, improved Core Web Vitals like LCP, and better Lighthouse scores across homepage, PLP, and PDP, driven by Hyva's lightweight Alpine.js and Tailwind CSS architecture compared to the legacy Luma stack.