From Luma to Lightning-Fast: SunLiner’s Hyvä Migration

If you are a part of the Magento world - whether as a shop owner or a developer - chances are you’ve heard of “Hyvä”. Four years ago, it began as an alternative frontend solution, and since then, it’s become the future of Magento frontends. But Hyvä is more than just another theme built on top of Magento’s default theme - it’s a completely new approach to crafting a Magento frontend.

We first encountered Hyvä when it was still in its early days, and we were immediately intrigued. Even in its infancy, it showed great promise, and we were eager to be part of its journey. Our chance came with SunLiner.

SunLiner, a valued client of ours since 2018, migrated from Magento 1 to Magento 2 in 2020. When we introduced them to Hyvä, promising significantly improved shop performance and compliance with Google Core Web Vitals, they were curious. In March 2022, SunLiner went live with Hyvä, and the improvements in performance were noticeable right away. In this blog post, we’ll share our experiences, the challenges we faced, and the impressive results we achieved.

The Shop

To understand the challenges SunLiner faced, let’s first look at their business. SunLiner is a leading German retailer specializing in high-quality parasols, along with accessories and spare parts. They offer a catalog of 20 brands and around 2,000 products. What sets these products apart is the huge amount of product variations they offer. From sizes to frame colors to fabric choices - with more than 500,000 unique product combinations, the product configurations are as diverse as they are intricate.

Most parasols are configurable products, each representing a specific umbrella model. These models come in various sizes and shapes, such as 300cmx300cm or ⌀ 500cm, and the differences are reflected in the specifications. Therefore, it’s essential to dynamically adjust product data on the product page (PDP) to match the selected size (child product). Since this feature isn’t standard in Magento, we developed a custom solution. This module also updates data for related and upsell product sliders based on the chosen child product.

Additionally, product variations affect pricing and delivery times. To manage this, we implemented another module to display delivery times based on selected options, updating dynamically as the customer makes changes.

The Task

When SunLiner migrated to Magento 2 in 2020, they designed their store based on the default Magento 2 Luma theme. Unfortunately, the Luma theme is known for slowing down performance and having a complicated structure and development process. Customizations made to meet SunLiner’s specific requirements only made things worse, resulting in poor performance and failing to meet Google Core Web Vitals standards.

Since the design was neither outdated nor undesirable, we aimed to transition the heavily customized Luma-based theme to Hyvä, while maintaining the store’s original look and feel. This task was more complex than it seemed, as Hyvä and Luma differ significantly in both technology and design. On top of that, we had to integrate a large number of customizations into the new framework.

The goal was clear: Create a lightning-fast shop, without making it look any different.

The Challenge

Hyvä is built on modern technologies like Tailwind CSS and Alpine JS. This creates compatibility challenges with third-party extensions designed for Magento’s standard frontend stack (LESS, Require JS, JQuery, etc.). While many extension vendors have since updated their modules to support Hyvä, this wasn’t the case when we began the migration. We had to manually adapt both third-party modules and our own implementations to ensure they worked seamlessly with Hyvä.

Key Compatibility Challenges

Ensuring compatibility with critical extensions for SunLiner’s unique needs was one of the most challenging parts of the migration.

GoGento Smart Custom Options

The GoGento ”Smart Custom Options“ extension plays a crucial role in managing SunLiner’s complex product configurations. For example, take the BaHaMa Jumbrella:

• Each umbrella model is a configurable product with 28 child products, each representing a different size.
• Each child product has four custom options with multiple selectable values, leading to a stunning 1,512 possible variations per child.
  ( 7 * 2 * 2 * 54 = 1,512 )
• Across all 28 child products, that means 42,336 unique configurations for a single umbrella model.

Additionally, for certain models, some options are mutually exclusive, adding an extra layer of complexity to the module’s logic. We implemented the official compatibility module and continue to maintain it, ensuring it works flawlessly with Hyvä.

MageArray CSV Table Matrix Pricing

Another crucial extension was MageArray ”CSV Table Matrix Pricing“, which was essential for products like the Leiner free-standing awning. Customers can configure dimensions freely, and prices vary accordingly. We adapted this extension’s frontend functionality to integrate smoothly with Hyvä.

Additional Adaptations

We also ensured compatibility with:

• Spaggel Tooltip for enhanced product information.
• Amasty Layered Navigation, especially the price slider.
• Amasty Shop by Brand, especially the brand slider.
• Sunliner’s Delivery Times module, which dynamically updates delivery time hints based on selected options.

Special Design Adjustments

The primary requirement was to preserve the shop’s original appearance. While we adopted some design elements from Hyvä, such as the slide-in minicart and full-screen mobile menu, we focused on maintaining the original design. For example, we replaces Hyvä’s card-based product detail design with a tab-based layout similar to Luma. Nowadays, Hyvä projects might use the Hyvä-UI components library, but this wasn’t available at the time.

Here are some special adjustments we made for the Hyvä migration:

• Replacing Magic Toolbox’s Magic Slideshow: Magic Slideshow, used for homepage and product gallery sliders, was incompatible with Hyvä. We replaced it with Hyvä’s native slider and added auto-sliding functionality.
• Flexible Gallery Slider: The gallery slider transitions between vertical and horizontal orientations based on screen size and orientation, providing an optimized experience for both desktop and mobile users.
• Sticky Navigation: SunLiner wanted a sticky navigation bar that stays fixed while scrolling on desktop. On mobile, the entire header remains sticky to ensure the burger menu is always accessible.
• Scroll to Related Products: We introduced an Ajax-based add-to-cart process, that scrolls to related & upsell product sliders instead of reloading the page after a product was added to the cart.

Child Product Data

To dynamically update product details like name, SKU, and attributes based on the selected child product, we developed a custom solution. This includes ensuring that related & upsell product sliders are updated dynamically via Ajax with child product specific data.
Take a look at the product page of the BaHaMa Jumbrella, before and after selecting a child product:

This solution was initially developed specifically for SunLiner. However, we realized that it could be beneficial for other Magento stores as well, so we adapted it into a standalone module. The module, called Child Product Data works with both the Hyvä and Luma default themes, ensuring seamless integration across different Magento frontends.

The Checkout

In March 2024, SunLiner also became our first shop to launch with the new Hyvä Checkout.

Hyvä Checkout builds upon Magewire, which uses server-side rendering and live updates instead of traditional JavaScript-heavy approaches. This reduces latency and improves load times, leading to a smoother user experience.
With Hyvä Checkout, shops can choose between a one-page or two-step checkout. This flexibility, combined with its performance advantages, make Hyvä Checkout a game-changer for Magento-based shops.

SunLiner opted for a modern, one-page version to replace Magento’s default two-step checkout. With a new design it not only enhanced usability, but also aligned better with the shop’s overall aesthetic.

We also customized the checkout with some features to meet SunLiner’s needs:

• Image of the selected color: Customers can now see an image of the selected custom option “color” during the checkout, reducing confusion and errors.

• Delivery Hints: Right next to the shipping methods we display delivery estimates, keeping customers informed about expected shipping times.

• Heavy Goods Surcharge Hint: We added a hint for products with a heavy goods surcharge, ensuring full transparency about additional costs. The surcharges are implemented using the Fooman “Surcharges” extension, which is already fully compatible with Hyvä.

The Performance

» What’s the speed of your website? - Yes. «

One of the most striking results of SunLiner’s migration to Hyvä was the massive improvement in performance, particularly in relation to Google Core Web Vitals. Under the Luma-based theme, the shop struggled with slow load times, high JavaScript overhead, and inefficient rendering - issues that severely impacted both user experience and SEO.

With Hyvä, everything changed. The lightweight frontend eliminated Luma’s inefficiencies, making the shop leaner and faster. The improvement was immediately noticeable. As Ron van der Molen, CEO of GoGento, put it: “Bizarre, the frontend speed is almost instant.”

The results speak for themselves: Google PageSpeed Insights now shows outstanding Core Web Vitals scores:

• Largest Contentful Paint (LCP): Well below the 2.5-second threshold, even for pages with complex product configurations.
• Cumulative Layout Shift (CLS): Excellent scores, ensuring a stable visual experience as pages load.
• Interaction to Next Paint (INP): Around 100ms, making the shopping experience feel fluid and responsive.

The Takeaway

Migrating SunLiner to Hyvä was an exciting journey filled with unexpected challenges. Adapting custom features, ensuring third-party module compatibility, and optimizing performance all required creative solutions. However, the results were well worth the effort. The shop now offers an exceptional user experience, lightning-fast performance, and top-tier Core Web Vitals, setting a new standard for Magento stores.

A huge thank you to SunLiner for trusting us with this step and embracing the Hyvä journey together. Their openness to innovation made this transformation possible, and we’re proud to have been part of it.

Throughout the process, the Hyvä community was an invaluable resource, offering support and continuously improving the ecosystem. When we first implemented Hyvä for SunLiner, it was still in its early stages - full of potential but with some challenges to navigate. Since then, it has evolved into an even more powerful solution, with an ever-growing ecosystem, expanding compatibility with third-party modules, and a strong focus on achieving the highest possible accessibility standards.
Hyvä has fundamentally changed how Magento frontends are built. Its impact on performance, maintainability, and overall efficiency makes it a game-changer for Magento stores looking to stay competitive. The rapid adoption of Hyvä across the industry proves that it’s more than just an alternative - it’s redefining what a Magento frontend can be.

If you’re thinking about a Hyvä migration, improving performance, or making your modules compatible, we’re happy to help. Our experience with Hyvä, from its early days to its current evolution, allows us to provide tailored solutions that maximize speed, efficiency, and user experience. Let’s bring your Magento store to the next level - faster, smoother, and future-proof! Learn more about our services here. 🚀