Hyvä Theme – A New Frontend For Magento 2

Since it was first released in 2007, Magento has received much support from the user community and was named the best e-commerce platform in 2021 by the Gartner Magic Quadrant. Along with that development, many 3rd party themes are also topics people discuss and are particularly interested in. Hyvä theme is one of them.

It is no exaggeration to say: The Hyvä theme is a new leap beyond the framework of Magento LUMA and all 3rd Magento themes today. Besides, it is also a great alternative to PWA. Why is that so? Let’s find out below this article!

I.What is the Hyvä Theme?

Wilem Wigman created the Hyvä theme. To put it simply, Hyvä Theme is a super-upgraded version of Magento LUMA on the basis of retaining the original structure of Magento, not moving in a completely different direction like PWA.

With this project, the Hyvä theme has no more Javascript, RequestJS, or stylesheets. Hundreds of individual JavaScript files are replaced by a single JavaScript framework, Alpine.js. Besides, all old CSS is also replaced with tailwind CSS. Along with that, Wigman has rewritten both the layout XML files and the sample PHTML.

This simplifies many different page codes without affecting their functionality. From there, creating Magento websites is very different from what we have ever seen. And especially, it’s impressively fast – something you definitely don’t see in stores that use old Luma.

I understand why the Hyvä theme is so hot, it seems to bring a new fire to Magento users. Hyvä theme has broken all mainstream frameworks and created its own path. I like this theme because of the way it believes in what a Magento theme should be, rather than being stuck in the same old ways.

II. Magento 2 Hyvä Theme Introduction

Simplified and faster, are the 2 best words to describe Hyvä theme. To better understand it, let’s learn more about some of its principles below:

2.1. Theme with almost No JavaScript Libraries

As mentioned above, Hyvä theme rejected all previous layout.xml and .phtml files. It is also no longer Requestjs or heavy JavaScript like in traditional Magento themes. Hyvä theme has almost eliminated most of the JS libraries, except for the essential one: Alpine.js

2.2. Minimum Dependencies

For the purpose of reducing dependencies on third-party libraries, you will only be able to find two dependencies in Hyvä themes: TailwindCSS and Alpine.js. Both are used to increase the user-friendly experience

2.3. Principles of Hyvä Core

It is really impressive that the goals that Wigman outlined for Hyvä have all been achieved. Certain changes in technology have really made for refined experiences.

• Reduce complexity: This is the number one principle they work towards. Hyvä Magento 2 themes are feature-rich yet simple
• Better performance: fast websites were the next goal when they built this theme – something Magento Luma is really lacking right now. They incorporate advanced technologies to enhance website performance.
• Improved experience for developers: A friendly, easy-to-use working environment is also what Hyvä theme aims to do.
• Improved development speed: Thanks to a simplified structure along with a good working environment, developers can deploy and customize Hyvä Magento themes much faster than other similar solutions.
• Dependency restriction: As mentioned above, the Hyvä theme contains only 2 dependencies. This ensures the reliability of the theme.
• Reduce Research Time: It won’t take you long to become a Hyvä Magento 2 theme developer as frontend changes for Hyvä are easier than ever.

2.4. Tools Behind Hyvä

It can be seen that the point that makes the Hyvä theme different is that they have used the tools behind Hyvä in an extremely reasonable way. The main engines like TailwindCSS and Alpine.js are all rooted in the Laravel ecosystem.

Along with the modern frontend stack, the old Magento Luma mechanism is still leveraged for continued development. These tools make it possible for Hyvä themes to build more beautiful, fast, and reliable frontends.

III. Hyvä as a PWA Alternative

3.1. Is the PWA not trendy?

If anyone has been following Magento for a long time, it is probably not too unfamiliar with the name PWA (Progressive Web Apps). The appearance of PWA seems to have revolutionized the world of Magento 2 front-end solutions.

Building a PWA web application helps to optimize the user experience on the web similar to that of a mobile app or a desktop app. In simpler terms, a PWA is simply a website that acts like a mobile app, without you having to do any downloads like other mobile apps.

In addition, PWA also integrates common mobile application capabilities such as background synchronization, push notifications, offline operation, barcode scanning, etc.

However, building a really great online store based on a PWA solution is still a big challenge for many users of the market. Because it needs to integrate more complex features, and the change process almost has to be redesigned from the ground up. This makes many store owners, especially those who have been loyal to Magento for a long time and still want to keep the old values, feel dissatisfied. And either way, the PWA still can’t deliver the full experience as a native app.

However, it is clear that Adobe Commerce is turning completely to PWA development, not intending to upgrade and improve the old version of Luma anymore. Therefore, the Hyvä theme appears as a solution that can satisfy that request of users: Not completely innovative like PWA still retains the old value of Magento but in an upgraded version.

It is not entirely accurate to say that PWA is not trendy. It depends more on the needs and desires of the business owner. If you want to update the new one, you can choose PWA. If you want to make changes on the basis of keeping the previous Magento store data, choose the Hyvä theme.

3.2. What makes Hyvä Magento 2 a better choice?

As mentioned above, the Hyvä theme will be suitable for businesses and websites that want to keep the old data, or simply have been loyal to the old Magento interface, and just want to improve it. However, making Hyvä the second hottest choice at the moment, there are a few reasons as follows:

• Not too dependent on external libraries: Built from extremely flexible frameworks: Tailwind CSS, AlpineJs, and Magento. Hyvä theme has a lot of space for developers to easily create and develop products.
• Enhance user experience: This must be the goal that every store wants to achieve. Magento 2 combines the One Step Check Out feature to make the user experience on e-commerce platforms faster and more compact.
  
  The implementation of One Step Check Out allows you to view the total number of prepaid orders and update them dynamically when there are changes; Faster and easier checkout page loading; Automatically updates item quantity and status… As can be seen, Hyvä makes managing e-commerce content much easier.

• Save costs for your business: Compared to rebuilding from scratch, taking advantage of what is already there to build a new one will save more money for previous Magento stores.

IV. Hyvä Theme Demo

Here is a demo of a Magento 2 store with the Hyvä theme:

4.1. Home page

The following homepage for Magento 2 with Hyvä theme. It consists of 3 main parts:

4.2. Type

A category page on Hyvä theme storefront:

4.3. Product

A product page of Hyvä theme has the interface as shown below:

You can check out a more detailed demo at their website: https://demo.hyva.io/

V. Hyvä Github

You can easily learn more about Hyvä theme Github here: https://github.com/hyva-themes. There are 4 main repositories you can refer to:

5.1. Magento 2 Hyvä Admin

This module gives you a new way to create admin grids without disturbing all existing grids and forms. This improves developer experience while creating new grids.

5.2. Magento 2 React Checkout

This module is built with React. With it, checkout is highly customizable for Magento 2.

5.3. Magento 2 Graphql Tokens

This Hyvä theme module adds a GraphQL token to the CustomerData section to trigger GraphQL calls from the Magento template. However, this module is currently only compatible with Magento 2.3.4 and higher.

5.4. Magento 2 Checkout Example

This module allows you to seamlessly customize Hyvä React Checkout. Custom Webpack configuration makes it easy to extend the React source of the original React Checkout module.

VII. Hyvä Cost

Currently, a Hyvä license costs €1000 (without VAT). With this license, what will you get?

Licenses include:

• Use Hyvä theme for life, including unlimited updates
• One-time install of Magento 2 with unlimited domains and store views.
• Access to Hyvä Theme code via Private Packagist and Gitlab for free
• Access to compatible third-party modules
• Private Slack Hyvä Community Access and Support
• Free Online Documentation
• In particular, you only need one license even if you have multiple sites built on a single Magento 2 instance.

In addition, you may spend an extra €500 per year on support and updates.

VIII. Pros & Cons of Using Hyvä

If compared with Magento Frontend and PWA, the Hyvä theme is in the middle. Hyvä still supports PWA and is compatible to a certain extent with older modules. However, no program is absolute. Therefore, instead of seeing Hyvä being loved and used by everyone, this article will give you the advantages and disadvantages of the Hyvä theme to help you review and make the most accurate decisions. 

8.1. Pros

8.1.1. Hyvä Theme Performance

As mentioned earlier. Outstanding performance compared to the old Luma version is the biggest advantage of the Hyvä theme. In fact, Hyvä themes are faster than websites using Magento Luma both on desktop and mobile devices.

This difference is shown very clearly by their Time to Interaction (TTI) index. With Magento Luma, it takes almost 30 seconds to get users to interact with all the functions of the website. While with the Hyvä theme, this number is less than 2 seconds.

8.1.2. Increase Conversion Rate

This is very easy to understand. As for performance increases, the user experience improves, and so does the conversion rate.

One study found that for every second your page loads late, it reduces pageviews by 11%; a 16% decrease in customer satisfaction; and a 7% loss in conversion rates. This will cause a huge loss to your company’s revenue.

8.1.3. Time to market

True to the original build principle: Simplicity and few dependencies, the Hyvä theme is minimalistic and dedicated to each area of ​​the UI output. As a result, it takes developers less time to achieve the modifications they need to make.

Besides, the tools used instead are all advanced technology. So it is also easier for developers to develop features and debug problems.

This saves a lot of developer time, gets the product to market sooner, and costs less.

8.1.4. Developer Experience

You’re probably wondering: “What does a developer have to do with my store and my bottom line?”. It sounds like it is right?

This is almost an invisible benefit that you get when you join the Hyvä theme community – where there is a lot of good, experienced developers out there. When you join this community, instead of spending money on consulting agencies, you can get a lot of free help here.

They are experienced developers, and ready to answer any problems that arise as you develop your website. Just ask, they are ready to answer and help you in the most unexpected way.

8.1.5. Adaptability

This is the special thing about the Hyvä theme that I was talking about just now. Hyvä also supports PWA and is still compatible with older modules to a certain extent.

If you own a Magento 2 store, you want to refresh it without having to do a fresh install of the platform and build a whole new set of custom functions. Hyvä theme is the optimal choice for you.

8.2. Cons

No theme is perfect, Hyvä theme is no exception. Below, I will give some disadvantages of Magento so that you can make the best decision when building your store.

8.2.1. Compatibility with Magento version

As mentioned earlier, the Hyvä theme only works from Magento 2.4 or higher version. This requires that you will have to upgrade your Magento version if you are using an older version before using Hyvä.

8.2.2. Payment

Hyvä does not make any specific claims about payment. Hyvä now offers both payment methods: Hyvä’s own optional payment solution and Magento Luma’s available standard payment method. The decision is up to you.

8.2.3. No third-party extension support

As an upgraded version of Magento Frontend, the Hyvä theme is only compatible with old modules to a certain extent. Many previous Magento modules were written using the same technology as the Luma theme, so it won’t work when using the Hyvä theme. Others are not fully compatible and need tweaking.

Either way, you’ll still need a developer or team of developers who can support your store.

8.2.4. License Cost

Despite the growing community of code sharing and collaboration, the Hyvä theme is not entirely open-source. You will have to pay a license cost – which is a one-time payment of €1000 to be able to use this theme.

8.2.5. Hyvä Theme longevity

No one knows the future. And no one is sure how long Hyvä can last. But looking at its growth over the first year or so, I believe it is still well received and will continue to grow.

IX. Are you ready to try?

In my personal opinion, Hyvä Themes will continue to exist and develop in the next few years. Simply because e-commerce is booming like never before and Magento 2 is still one of the most searched platforms.

The number of people who have been using Magento is very large, and they accept that the front end of Magento 2 is too cumbersome and slow. This has a direct impact and significant loss in revenue and costs for their stores.

The Hyvä theme appears as an engine that sellers can add to their slow car to get to the finish line, without having to replace it with a brand new car.

What are you waiting for without “engaging” in testing right away?

X. Concerns of Landofcoder Team with Hyvä theme

Although it is one of the hottest themes today, the extensions compatible with the Hyvä theme seem to be a weakness that they need to overcome. One Step Check Out is being applied quite well by Hyvä. What if more extensions were developed to be compatible with them?

For example, a Mega Menu Extension version of Magento 2 that is fully compatible with the Hyvä theme?

I think this would be a great idea! And the Landofcoder Team is also very excited about this project. And you, what do you think about it?

Please comment below if you also want an extension like this!