MegaGastroStore —
Hyvä Theme Migration
High-Performance
Magento 2 eCommerce
Migrated from a standard Magento theme to Hyvä, delivering lightning-fast performance, intelligent Algolia-powered search (custom-built for Hyvä compatibility), automated EU energy label compliance, and GDPR-compliant GA4 tracking via Amasty — for commercial kitchen professionals across Europe.
Overview
MegaGastroStore is a Germany-based eCommerce platform specializing in gastronomy equipment and commercial kitchen technology, serving customers across Europe. The platform underwent a complete frontend migration from its standard Magento theme to Hyvä, targeting professional buyers in the hospitality and food service industry who require specialized equipment sourced from a reliable, high-performance online store.
The platform uses the Hyvä Theme to deliver frontend performance far beyond what traditional Magento themes can achieve , combining a lightweight Alpine.js and Tailwind CSS stack with Algolia-powered search and automated EU compliance tooling. Key platform capabilities include:
- Hyvä Theme Migration , migrated from a standard Magento theme (Luma-based) to the Hyvä Theme, replacing the heavy RequireJS/Knockout.js stack with Alpine.js and Tailwind CSS for dramatically faster page performance
- Hyvä Theme frontend , Alpine.js and Tailwind CSS replace the heavy default Magento stack, delivering significantly faster page load times and a more responsive user experience across desktop and mobile
- Custom Algolia Search integration , Algolia was fully adapted for Hyvä compatibility (non-standard out of the box) with a custom-built search UI delivering fast, relevant product discovery across a large gastronomy catalog
- Automated EU energy label system , dynamic A–G energy class badges, interactive energy label popups (kWh, volume, temperature range), and auto-linked product data sheets ensuring full EU compliance without manual data entry
- Custom subcategory grid navigation , image tile-based subcategory pages reduce click depth and allow buyers to locate product categories faster across a large and varied product range
- Hyvä Checkout , streamlined one-page checkout experience reducing cart abandonment and conversion friction for repeat professional buyers
- GA4 Consent Mode via Amasty GDPR Plugin , GDPR-compliant Google Analytics 4 tracking configured using the Amasty Cookie Consent plugin, ensuring GA4 tags fire only after explicit user consent in line with EU cookie regulations
The Challenges
Theme Migration Complexity
Migrating from a standard Magento theme to Hyvä is a significant architectural undertaking , not a superficial reskin. The entire frontend layer had to be rebuilt, removing RequireJS and Knockout.js dependencies while ensuring all existing functionality, content, and third-party extensions remained intact throughout the migration.
- RequireJS and Knockout.js dependencies throughout the codebase to be replaced
- All frontend components and layouts rebuilt in Alpine.js and Tailwind CSS
- Third-party extension compatibility with Hyvä required evaluation and resolution per module
Performance Limitations of Default Magento
Traditional Magento themes rely on heavy JavaScript frameworks , most prominently RequireJS and Knockout.js , which create significant frontend performance bottlenecks. For a large gastronomy equipment catalog, page load speed directly impacts buyer engagement and conversion.
- Default Magento frontend too heavy for a large-scale product catalog
- Poor Core Web Vitals scores with standard Luma or Blank themes
- Slow rendering on mobile devices used by field buyers and procurement managers
Algolia–Hyvä Compatibility Gap
Algolia Search , the preferred search solution for high-performance Magento stores , was not compatible with Hyvä out of the box. The standard Algolia Magento module relies on RequireJS and Knockout.js, which Hyvä explicitly replaces, making a direct integration impossible without significant custom development.
- Native Algolia module incompatible with Hyvä's Alpine.js architecture
- Custom search UI required to match the Hyvä design system
- Full adapter layer built to bridge Algolia API with Hyvä frontend
EU Compliance & Energy Label Requirements
EU energy labelling regulations require that commercial appliances sold in Europe display standardized energy class information , including the A–G rating scale, kWh consumption, volume, and temperature range , with accurate data sheets linked for every applicable product. Managing this manually across hundreds of product listings was not a viable approach.
- EU regulations require energy labels on all applicable commercial appliances
- Manual data entry at scale error-prone and unmanageable
- Product data sheets and compliance guides must be linked per product
GA4 Consent & GDPR Cookie Compliance
EU regulations under GDPR and the ePrivacy Directive require explicit user consent before analytics cookies can be set. Without a properly configured consent mechanism, GA4 tracking data would be unreliable and legally non-compliant for a German-market eCommerce platform.
- GA4 tags must not fire without prior user consent under GDPR
- Google Consent Mode v2 requires specific cookie banner and data layer configuration
- Third-party consent plugins for Magento need validation before use in production
The core challenge was migrating a live Magento store from a standard theme to Hyvä , solving the Hyvä–Algolia compatibility gap with custom development, automating EU compliance tooling, implementing GDPR-compliant GA4 tracking via Amasty, and delivering a fast, intuitive buying experience for gastronomy professionals across Europe.
Our Solution
We migrated MegaGastroStore from a standard Magento theme to Hyvä , solving the Algolia compatibility gap with custom development, automating EU energy label compliance, implementing GDPR-compliant GA4 tracking via Amasty, and delivering a fast, scalable eCommerce platform purpose-built for professional gastronomy equipment buyers across Europe.
Hyvä Theme Migration
The existing storefront was migrated from a standard Magento theme to Hyvä , replacing Magento's default RequireJS and Knockout.js stack with Alpine.js and Tailwind CSS. This migration delivers dramatically faster page rendering, better Core Web Vitals scores, and a significantly lighter frontend payload across desktop and mobile.
The existing standard Magento theme was migrated to Hyvä , eliminating the heavy JavaScript dependencies of Luma/Blank themes and replacing them with a lightweight Alpine.js + Tailwind CSS architecture. All RequireJS and Knockout.js dependencies were removed and rebuilt as native Hyvä components.
All interactive UI components , dropdowns, filters, modals, energy label popups , were built using Alpine.js for reactive behavior without the overhead of a full JavaScript framework. Tailwind CSS provides a consistent, maintainable design system across all pages.
Hyvä's native Hero Icons set was used throughout the UI for consistent, accessible iconography , avoiding external icon library overhead and maintaining visual coherence across the design system.
The Hyvä Checkout module was integrated for a streamlined, single-page checkout experience , reducing the number of steps, eliminating unnecessary page reloads, and lowering cart abandonment for professional buyers completing regular purchasing runs.
Algolia Search , Custom Hyvä Integration
Algolia Search was selected for its speed and relevance capabilities across large product catalogs , but the standard Algolia Magento module is incompatible with Hyvä's Alpine.js architecture. A full custom integration was built from scratch to bridge Algolia's API with the Hyvä frontend layer.
The standard Algolia Magento module relies on RequireJS and Knockout.js , both of which Hyvä removes. A custom adapter was built to connect Algolia's JavaScript API client with Alpine.js components, enabling full search functionality within the Hyvä architecture.
A fully custom search interface was designed and implemented , matching the Hyvä design system visually while exposing Algolia's instant results, filtering, and autocomplete capabilities in a fast, accessible UI component.
Algolia's search-as-you-type results and faceted filtering allow buyers to locate specific gastronomy equipment quickly across a large and diverse catalog , reducing search time and increasing product findability for both browsing and direct-query scenarios.
Category Experience & Navigation
The category browsing experience was rebuilt with a custom subcategory grid using visual image tiles , allowing buyers to scan and navigate the product hierarchy quickly rather than reading through flat list-based category navigation. This reduces click depth and improves the speed of product discovery across a large and varied catalog.
Each top-level category displays its subcategories as a visual grid of image tiles , combining the category name with a representative product image to help buyers immediately identify the correct section without reading through text lists.
Visual tile navigation reduces the number of clicks required to reach a target product category , particularly valuable for professional buyers who visit the store regularly and need to move quickly from landing page to relevant product listing.
Subcategory tiles follow the same Tailwind CSS design system used across the rest of the store , ensuring visual consistency while keeping the component lightweight and performant.
Product Pages & EU Energy Label Compliance
EU energy labelling regulations require that applicable commercial appliances display standardized energy class data on product pages. Rather than managing this manually per product, an automated system was built that reads Magento product attributes and dynamically renders the correct energy label components, popups, and linked data sheets.
Energy class A–G badges are rendered dynamically based on a Magento product attribute , automatically displaying the correct rating without requiring manual HTML per product listing. The badge styling adjusts per class to reflect the EU colour-coding standard.
Clicking the energy badge triggers an Alpine.js-powered popup displaying the full EU energy label , including kWh consumption, volume, temperature range, and other class-specific data , all auto-populated from Magento product attributes without manual entry.
Each applicable product page automatically links to its product data sheet and relevant compliance documentation , sourced from a Magento attribute , ensuring buyers and regulatory auditors can access the required documents without any manual linking effort.
The full EU compliance system is driven by Magento product attributes , content teams set the relevant values in the Magento admin once per product, and all label rendering, popup data, and document links are generated automatically from those attributes.
Design & Deployment
The complete UI/UX was designed in Figma prior to development , establishing the full visual system, component library, and page layouts before a single line of code was written. GitHub was used for version control, collaborative development, and structured deployment workflows throughout the project.
Every page , homepage, category, product, cart, checkout, and informational pages , was designed in Figma as a complete design system. This allowed development to begin with full visual specifications, reducing back-and-forth and ensuring design-to-code fidelity.
GitHub was used for source control throughout the project , enabling parallel development across frontend and backend workstreams, structured code review, and repeatable deployment workflows to staging and production environments.
GA4 Consent Mode , Amasty GDPR Plugin
GDPR compliance requires that Google Analytics 4 tags fire only after explicit cookie consent from the user. The Amasty GDPR Cookie Consent plugin was selected and configured to manage cookie consent categories and integrate with GA4 via Google Consent Mode v2, ensuring fully compliant analytics tracking across the German-market store.
The Amasty GDPR & Cookie Consent module was installed and configured , defining cookie categories (necessary, analytics, marketing), cookie banner display logic, and per-category consent storage. The plugin handles consent state persistence across sessions.
Consent Mode v2 was configured to update GA4’s consent signals (`analytics_storage`, `ad_storage`) based on the user’s cookie banner selection , ensuring GA4 tags respect consent state and operate in a GDPR-compliant mode from the moment the page loads.
GA4 tracking tags and events were configured to fire conditionally based on consent state via the data layer , ensuring no analytics data is collected before consent is granted, and that all key eCommerce events are tracked correctly once consent is given.
The Amasty cookie banner was customised to match the MegaGastroStore brand design , maintaining visual consistency while presenting legally required consent choices clearly and accessibly to EU visitors.
System Architecture
The platform is built on a modular Magento 2 architecture with Hyvä as the frontend layer , replacing the default RequireJS/Knockout stack with Alpine.js and Tailwind CSS. Algolia connects via a custom adapter to the Hyvä frontend, while all EU compliance rendering is driven by Magento product attributes parsed through custom Alpine.js components.
Hyvä Theme , Alpine.js + Tailwind CSS
Replaces Magento's default RequireJS/Knockout stack with a modern, lightweight frontend delivering dramatically faster page loads and better Core Web Vitals scores across desktop and mobile.
Custom Algolia–Hyvä Adapter
A custom integration layer connecting Algolia's search API to Hyvä's Alpine.js architecture , solving the out-of-the-box incompatibility with a fully functional, custom-designed search UI.
EU Energy Label Engine
Attribute-driven system automatically rendering dynamic A–G energy badges, interactive compliance popups, and linked data sheets , eliminating manual product-by-product data entry across the catalog.
Hyvä Checkout
One-page checkout built with Hyvä Checkout , Alpine.js-driven reactive steps reduce checkout friction and cart abandonment compared to Magento's default multi-step checkout flow.
Subcategory Grid Navigation
Custom visual tile grid for subcategory browsing , image-based category cards reduce click depth and improve product findability across the full gastronomy equipment catalog.
Magento 2 Backend + Custom Modules
Full Magento 2 backend with custom modules handling the EU energy label rendering pipeline, subcategory grid configuration, and Algolia index management from the admin panel.
GA4 Consent Mode , Amasty GDPR Plugin
GDPR-compliant Google Analytics 4 tracking configured via the Amasty Cookie Consent plugin , Consent Mode v2 signals analytics and ad storage consent state to GA4 based on the user's cookie banner selection, ensuring compliant data collection for EU visitors.
Results & Impact
Frontend migrated from standard Magento theme
Load times vs default Magento themes
Custom search running natively in Hyvä
Automated energy label compliance
Streamlined Hyvä Checkout experience
Consent Mode configured via Amasty GDPR plugin
Business Impact
Frontend successfully migrated from a standard Magento theme to Hyvä , Alpine.js and Tailwind CSS replace the legacy RequireJS/Knockout stack, delivering dramatically faster page loads, better Core Web Vitals, and a lighter frontend across all devices
Significantly faster page load performance compared to default Magento themes , Hyvä's lightweight frontend architecture delivers better Core Web Vitals and a more responsive experience across devices
Algolia-powered search running natively within Hyvä , a technically non-trivial integration solved through custom development, delivering instant, relevant product discovery across a large gastronomy catalog
EU energy label compliance automated at scale , dynamic badges, interactive popups, and linked data sheets rendered from Magento attributes, eliminating manual regulatory data entry across the entire catalog
Streamlined one-page checkout via Hyvä Checkout , reduced cart abandonment and improved conversion rate for professional buyers completing regular wholesale orders
GDPR-compliant GA4 tracking configured via the Amasty GDPR Cookie Consent plugin , Google Consent Mode v2 signals analytics consent state to GA4 based on user cookie banner choices, ensuring fully compliant data collection for EU visitors
Visual subcategory tile navigation reduces click depth and browse-to-product time , buyers navigate the full gastronomy product hierarchy faster through image-based category grids rather than text-only lists
Technology Stack
Final Outcome
Before
- Standard Magento theme , slow, heavy frontend with poor Core Web Vitals
- No GA4 consent mode , analytics tracking without GDPR cookie consent
- Default Magento themes delivering slow, heavy frontend performance
- Algolia incompatible with Hyvä , no usable search solution out of the box
- Manual EU energy label data entry required per product
- Text-list category navigation with high click depth across large catalog
After
- Complete Magento 2 store migrated to Hyvä , fast, lightweight Alpine.js + Tailwind CSS frontend replacing the standard theme
- Significantly faster load times , lightweight Alpine.js + Tailwind CSS frontend
- Algolia running natively in Hyvä via custom adapter and search UI
- EU energy labels automated from Magento attributes , zero manual entry
- Visual subcategory tile grid reducing navigation friction across all categories
- GA4 Consent Mode active via Amasty GDPR plugin , fully GDPR-compliant analytics tracking for EU visitors
MegaGastroStore demonstrates how migrating from a standard Magento theme to Hyvä can transform eCommerce performance for specialist B2C and B2B markets. By combining a lightweight Hyvä frontend migration, custom Algolia integration, automated EU compliance tooling, streamlined checkout, and GDPR-compliant GA4 tracking via Amasty, the platform delivers a future-ready, high-performance online store purpose-built for gastronomy professionals across Europe.
Ready to Build a High-Performance Magento Store?
Let's build a fast, scalable, and conversion-focused Magento 2 eCommerce platform for your business , whether you're migrating to Hyvä or building a new Magento store from the ground up.
Contact Us to Discuss Your ProjectFrequently Asked Questions
Standard Magento themes , Luma and Blank , rely on RequireJS and Knockout.js, which generate large JavaScript bundles and slow frontend rendering. Hyvä replaces this entire stack with Alpine.js (a minimal reactive framework) and Tailwind CSS (a utility-first CSS framework) , dramatically reducing JavaScript payload, improving Time to First Byte, and delivering better Core Web Vitals scores across the board.
For a large gastronomy equipment catalog with many product listing pages, category pages, and product detail pages, the difference in perceived load speed and mobile responsiveness is significant. Hyvä also simplifies frontend development by removing the RequireJS dependency graph, making custom components faster to build and easier to maintain.
The standard Algolia Magento module registers its search UI using RequireJS and Knockout.js , both of which Hyvä removes from the frontend. This means the out-of-the-box Algolia module simply doesn't render within a Hyvä theme without significant modification.
To solve this, a custom compatibility layer was developed: the Algolia JavaScript API client was connected to Alpine.js components built specifically for the Hyvä design system. The resulting search interface , including instant results, faceted filtering, and autocomplete , operates entirely within the Hyvä architecture, with no RequireJS or Knockout.js dependencies.
The architecture built for MegaGastroStore , Hyvä + Algolia + custom compliance tooling , is directly applicable to any large-catalog eCommerce business where performance, search quality, and regulatory display requirements matter. Industrial equipment, medical devices, electronics, appliances, and B2B wholesale platforms are natural fits.
The EU energy label system specifically is transferable to any retailer selling products subject to EU energy labelling regulations , white goods, HVAC equipment, lighting, and commercial kitchen appliances all fall under similar EU directives. The attribute-driven rendering approach is reusable across any regulated product category that requires structured compliance data on product pages.
Yes , fully. Dynamic A–G energy class badges, interactive energy label popups (showing kWh consumption, volume, and temperature range), and linked product data sheets are all generated automatically from Magento product attributes. Content teams set the attribute values once per product; the system handles all rendering and linking.
This means EU compliance scales cleanly as the product catalog grows , adding a new compliant product requires no additional template work, no manual HTML, and no separate document management. The compliance data is always tied to the product record and rendered consistently across all applicable product pages.
Magento's default checkout is a multi-step, page-reload-heavy process that introduces friction at the most critical stage of the purchasing journey. Hyvä Checkout replaces this with a single-page checkout flow built entirely with Alpine.js , all steps (shipping, payment, review) are completed within a single page view without full-page reloads.
For professional buyers placing regular orders, this reduces the time and effort required to complete a purchase. Fewer steps, faster page interactions, and no unnecessary loading states between checkout phases all contribute to lower cart abandonment rates and a more confident buying experience at the final conversion point.
GA4 consent was configured using the Amasty GDPR & Cookie Consent plugin for Magento 2. The plugin manages cookie consent categories (necessary, analytics, marketing) and handles consent state persistence across sessions. Google Consent Mode v2 was then configured to update GA4’s `analytics_storage` and `ad_storage` signals based on the user’s cookie banner selection.
This means GA4 tags only fire once the user grants analytics consent via the cookie banner , a legal requirement under GDPR for eCommerce stores targeting EU customers. The cookie banner was also customised to match the MegaGastroStore brand design while meeting all required EU disclosure standards.