The Hyvä theme creators claim that they never wanted to become a hype but they kind of did, as the talk about Hyvä theme is getting louder every month and the number of merchants ready to install it on their website is getting bigger. Our team has recently started to work with Hyvä and we are ready to share our experience.
Table of contents:
Hyvä Overview
Main Advantages of the Hyvä Theme
Hyvä Issues
The BelVG Experience with Hyvä Theme
Request Quote for Hyvä development
BelVG has a great experience implementing Hyvä theme to Magento 2 stores. Leave your information to get a free estimation.
Get free quote
Hyvä Overview
Released in February 2021, the Hyvä theme was meant to be an alternative for Single Page Application (SPA) or headless commerce. Its creators believe that headless/PWA solutions are not for everyone. So they made an alternative for those who do not want to build a JavaScript only website.
As a result, they were able to get rid of everything that annoys developers and merchants in other Magento themes: RequireJS, jQuery, Knockout, and LESS.
The creator also used a lot of tools and ideas from the Laravel ecosystem. In particular, they use TailwindCSS and AlpineJS. These frameworks ensure frontend effectiveness as they make the code clean, lightweight, and easier to read.
For example, TailwindCSS has a lot of built-in classes that the developer doesn’t have to write from scratch. Do you need a black background? There is already a class for that.
Same goes for AlpineJS which can be a good alternative for KnockoutJS. The platform has a simple and intuitive syntax and helps to speed up the development process after you get a grip on it.
Main Advantages of the Hyvä Theme
According to the promo materials, Hyvä allows a low entry level for developers, better performance, and fast development process. And these are the main reasons why you need to pay for the license. We asked our developers, who worked with Hyvä if these characteristics are true.
Low Entry Level for Developers
Hyvä uses tools that Magento developers are familiar with. The only thing they might not be comfortable with is React, which is mostly used for React-based checkout and can be avoided by using Luma fallback checkout.
We asked our frontend developer what was his opinion on interacting with Hyvä:
The main issue with Hyvä is to switch from the way Magento handles styles and JS to the way Hyvä does it. The inner part is still Magento. But when you get how it works, the development becomes faster and easier. — Sergei Voinich, Senior Frontend developer at BelVG.
The developers don’t have to ship megabytes of JavaScript, and less code means more comfort.
High Performance
A request for speed optimization is one of the most common for a standard Magento store, as Magento frontend is rather slow by default. You can spend a lot of time on optimization, but there are still limits that developers can overcome only with PWA.
Hyvä gives an alternative. The theme has a much better performance. Out of the box, Hyvä scores 100/100 in Google PageSpeed and it passes Core Web Vitals on all metrics. Which is hardly an option with the Luma theme or Single Page Applications (SPA).
The performance of the Hyvä website still depends on other things. For example, if you must add some script or oversized images. But with Hyvä, you have a much better starting point and perfect scores are possible.
When the Luma theme loads over 200 JS/CSS resources (1,5 megabytes), Hyvä loads only 2 JS/CSS resources (0,2 megabytes). If we check its demo, we can see that while loading the configurable product page, the system has a full product gallery, videos being loaded, configurable products with price logic, and a wishlist. It still only takes about 26 kilobytes of JavaScript and 40 kilobytes of CSS.
Faster Development Speed
The development process with Hyvä is quite fast thanks to the specifics of TailwindCSS and AlpineJS, as we have already described. But the developers need to spend time on learning the way these frameworks are working.
The first agencies who have developed websites on Hyvä said that their biggest project took them about 100 hours from Figma design to an MVP-level website. The project included custom design, Elasticsearch implementation, 360-degree photo view, prismic.io for custom content types, and React checkout for B2B.
These numbers are from Hyvä partners and can be not as promising in reality. The technology is still young, and the numbers can vary significantly from one project to another.
Hyvä Issues
Hyvä is a new theme and we are still learning what the drawbacks of its use can be. For now, most of them are connected with its novelty: checkout uncertainties, number of compatible modules. Here is more info about them.
Extension Compatibility Issues
For now, there are more than 200 extensions that are already compatible with Hyvä, you can see the whole list here. So yes, if you want to use a module that is not anywhere on this list yet, you will have to pay for the extra development time to make it compatible with the theme.
Hyvä compatibility with modules typically falls into three categories:
- Incompatible: modules that do not align with Hyvä.
- Natively compatible: modules without frontend components or non-Magento JS frontend components.
- Compatible with additional compatibility modules: These modules substitute incompatible parts of the original module, often involving rewritten JS scripts and PHTML templates.
In practice, making most Magento modules compatible for Hyvä is not such a big deal as the extension doesn’t need changes on the PHP/Magento side. Hyvä doesn’t affect it. You only need to make the frontend part compatible and rewrite PHTML, LayoutXML files, and JavaScript, which is not the biggest part of the work for the vast majority of modules.
For example, we made several modules for our project compatible with Hyvä, including Mageplaza Reward. As it doesn’t have a lot of js, the developer only needed to adjust styles to Tailwind that took us several hours.
Checkout Issues
The checkout options work good but the big question for the store owner is which one to choose. For now, there are three options:
- React-based checkout
- Luma fallback checkouts
- Hyvä checkout
React-based checkout is not a replacement for Luma checkout and is not a ready-to-use solution. It is a separate project, a toolkit to build your custom checkout. The tricky part is that you need to know React and Magento to use it correctly and make something interesting.
The benefits of this checkout are:
- Fast loading speed – the checkout is much faster than most of Magento solutions.
- High customization capability – as it is a toolkit, you can do almost anything you want with your checkout.
- Open source code – you can check it out here
- Almost headless approach – the react code can be used with Luma, Hyvä, or any other theme, and can make it work with a headless approach.
Here are also two more interesting facts about React checkout:
- Shipping/Payment integration – payment service providers (PSP) usually come with the third-party extension and they work with Luma checkout out of the box. With React, you need to install them manually, which is hard and long work if performed for each website. So the development team solved the issue by keeping payment gateway integration in a separate repository. React-based checkout now supports Amazon Pay, PayPal Express, Stripe, offline payment methods, and several other payment and shipping systems.
- Theme integrations – you can use different theme checkouts as a starting point and then customize it. For now, there is a basic theme available, as well as the Luma theme.
So basically this checkout allows a lot of customization, but you need a good knowledge of React to use it and the payment/shipping integration can be challenging.
Luma Fallback Checkout is a solution for those who are not comfortable with using a React checkout. It allows setting up pages where you don’t want to use Hyvä. For these pages, a default Magento theme is used.
The module is available on the Private Packagist or the Hyvä repository on GitLab. One gets access to it after buying a Hyva license.
Magento 2 Custom Development
Make you website stand out from your competitors with custom Magento development
Visit the pageHyvä checkout is a new checkout solution that the company sells as a separate product for €1000 per 5 years or as a subscription for €250 per year. It uses all the Hyvä stack such as AlpineJS and TailwindCSS, extended with Magewire PHP. Magewire is a port of the Laravel Livewire library. It allows interaction with methods and properties from the browser without using JS or PHP. This technology allows a lot of development freedom with Hyvä checkout.
- The checkout is fast. It is especially noticeable with mobile speed. Tests show 13 times faster loading speed in comparison with Luma. We are talking about demo versions, of course.
- It is easy to work with and gives customization flexibility. As the checkout is powered by Magewire PHP, most of the logic is moved to the backend. It means JS is not as necessary for customization as it used to be with Luma checkout. Developers can still use it though.
- The development is faster. Thanks to the technology Hyvä checkout uses, the development process should be easier. If the merchant wants to change something drastically, for example, make billing first and shipping second, the developer doesn’t need to rewrite the whole thing. They only need to change the order and layout-XML.
Wrapping it up with the checkout options, the cheapest and easiest option to use now is Luma-fallback. Although merchants will have to pay more if they need a lot of customization. React checkout is a great choice for a completely custom checkout. It is open-source but only React-savvy developers can work with it. The Hyvä checkout seems to be a perfect option – easy to develop, flexible, and fast. It costs €250 a year when other solutions are free.
The Cost of the License
If you want to use Hyvä for your webstore, you’ll have to buy a license. The Hyvä team decided that they don’t want to work with subscriptions. You only need to pay once to get access to Hyvä code and start working with it.
The cost is €1,000 for everything. Meaning, you get:
- unlimited number of updates
- access to the Private Packagist and Gitlab
- access to third-party compatibility modules
- support and community access to the Hyvä slack
Develop you Hyvä store with BelVG
We have experience implementing Hyvä and work with module compatibility for it. Contact us to learn more.
Request Hyvä development cost
The BelVG Experience with Hyvä
On one of our existing projects, we were facing some challenges with page speed optimization and overall theme stability. After discussions with the client, we chose to work with the Hyvä theme. It was a promising solution for existing issues, including general site performance.
The decision also coincided with the need to upgrade the store to the latest version. So, we decided to proceed with both the upgrade and the theme transition from Luma to Hyvä.
We had the following tasks on the project:
- Upgrade Magento to the Latest Version (2.4.5): This step was essential for security, performance, and staying abreast of the latest features.
- Refactor Custom Modules: To optimize our system, we aimed to eliminate duplicative modules while rewriting those crucial to our operations.
- Implement a New Theme Based on Hyvä: The decision to adopt the Hyvä theme was strategic given its advanced performance opportunities.
You can learn more about the first two tasks in our user case. In this article, let’s delve more into the Hyvä task.
Implementing Hyvä Theme
Installing Hyvä through Composer is rather straightforward. It integrates with Magento CE, encompassing nearly all its functionalities. Additionally, alongside the theme installation, we incorporated the Theme Fallback module for the checkout and CMS Tailwind Jit modules.
Tackling Module Compatibility Challenges in Hyvä
Given time constraints, we replaced several modules with compatible alternatives. If it wasn’t crucial to preserve functionality, we opted for newer modules. For instance, we transitioned from Mageplaza’s blog module to Magefan, migrating blog posts seamlessly with the help of Magefan’s migration support feature.
However, one of the few modules we couldn’t replace was Mageplaza’s Reward Points. The replacement required a data migration from one module to another. So, we decided that it would be more efficient to develop our compatibility module for Reward Points and keep user data and loyalty system settings.
Addressing Checkout Challenges
During the work, we encountered compatibility issues with checkout as many modules, such as payment and shipping methods, relied on native Magento JS. To resolve these issues, we considered all three Hyvä checkout options.
However, React and Hyvä checkouts had limited support for payment and shipping methods used on the project. Therefore, we chose a fallback approach using the Luma theme with Amasty One Step Checkout. These solutions are perfectly aligned with our project’s payment methods.
Development of the Theme
The theme development followed a standard approach, except for using Tailwind CSS and Alpine JS instead of Magento’s native LESS and JS. However, the module and theme structure remained consistent, utilizing layouts for block configurations and PHTML templates for page elements’ display.
In conclusion, although presenting some challenges, this transition to Hyvä eventually enhanced our project’s functionality and performance.
Before the optimization, the results were relatively poor, varying from 60 to 70 points out of 100. Current results on Google page speed insights varies from 85 to 95 on desktop.
Summary
According to our experience, the Hyvä theme is what it claims to be: a fast, easy-to-use theme that still has issues with checkout and compatibility modules. But using it has its perks in website performance and customization possibilities.
Using Hyvä is a reasonable choice when migrating or developing a website, or when dealing with performance issues. However, it is still unclear whether it is a good idea to migrate a Magento website with hundreds of CMS pages to Hyvä. As the process of changing styles to Tailwind can be a significant task.
