Hyvä Themes is the latest (and currently the best) way to build storefronts for your Magento 2 website. That’s what we think anyway so let us explain why…
Up until this point, Magento’s out of the box frontend framework (or the LUMA stack as its otherwise known) is slow, difficult to work with and hasn’t been updated since Magento 2 was first released.
The goal of any merchant is to build the most profitable store, right? The existing LUMA stack will prevent you from doing this and there are now much better alternatives out there that you should be considering. One of these alternatives is Hyvä Themes and we are going to introduce you to this amazing framework here in this article.
This article will cover what Hyvä Themes actually is, the benefits and considerations merchants should be aware of, and ultimately why it’s (in our opinion) the best option for the majority of Magento 2 merchants.
What Is The LUMA Stack?
The LUMA stack is the default theme that comes with Magento 2 out of the box. 90% of Magento 2 themes that have been created to date, started with the LUMA framework. The LUMA and BLANK theme might spring to mind? Maybe the screenshot below will jog your memory?
The LUMA framework was released as part of the Magento 2 application in 2016 and has not been updated since it was launched. Adobe has no plans to update the LUMA stack and it doesn’t provide you with the best possible frontend framework. It’s quite the opposite actually!
LUMA has become an outdated technology, bloated by its overuse of JavaScript which makes the frontend performance sluggish and inefficient. It causes pages to load at a much slower rate because the size and number of JavaScript and CSS files included on the page are excessive.
It’s also extremely over engineered and complex which makes developing new themes very time consuming for developers and their time is your money. And that’s even before custom features have been added.
Enter The Room…Hyvä Themes!
Hyvä Themes aims to resolve the problems with LUMA by removing the pain points of Magento 2 frontend development. It eliminates and replaces hundreds of individual JavaScript files and bloated libraries, with one single JavaScript framework; Alpine.js.
That way you get to say goodbye to the swollen architecture of LUMA and the overly complex frontend codebase slowing down performance.
Hyvä Themes basically removes all of the bad complex stuff from LUMA and replaces it with lightweight and easy-to-use frameworks that considerably lowers the learning curve for a developer to get up to speed with building the Magento 2 frontend.
So you still get all the benefits of the Magento 2 frontend, but just without the downsides.
Out of the box, Hyvä Themes provides you with scores of up to 100 out of 100 across all of Google’s core web vitals on both desktop and mobile. You don’t get better than that! This means that you start from the top rather than with LUMA where you start from the bottom with your performance metrics. A much better approach in our view as the only way your site performs bad with Hyvä Themes is if you degrade your site performance with your own development.
The Birth of Hyvä Themes
Hyvä Themes was created by a Dutch Magento developer called Willem Wigman. Willem was asked by his wife to create an online ecommerce website for a small business that she wanted to start. He knew that the Magento 2 LUMA frontend stack would take him too long to develop so he decided to try and build something in a completely different way.
The solution he created is what is today known as Hyvä Themes. Willem started by removing everything from the frontend and starting with a completely blank web page. He then inserted two frameworks that he knew he could work quickly with. These frameworks were Tailwind CSS and Alpine JS.
The Benefits Of Using Hyvä Themes
Here are five of the biggest benefits of using Hyvä Themes to build your frontend for your Magento 2 website.
1. Website Speed & Performance
We’ve already mentioned this one, but why is it so important?
Firstly, a strong page speed score has SEO benefits.
It’s something Google takes into account when ranking sites – search engines favour faster-performing sites. If you want higher organic visibility, then you need a fast performing website.
Secondly, a fast-loading site will improve user retention.
We know that a one second delay in page speed score can trigger a 16% decrease in customer satisfaction. Now imagine a two or three second delay…
Hyvä Themes is also known to perform much faster than Adobe’s new frontend framework, PWA studio. This new framework is not yet complete but you can achieve the same performance benefits as PWA studio at a fraction of the development costs.
Fast loading pages keep web visitors engaged. If your store is too slow, then you’ll suffer from reduced dwell times, high bounce rates, and ultimately fewer conversions.
LUMA’s architectural structure negatively impacts storefront performance, especially on mobile devices and weaker connections. On the other hand, Hyvä offers rocket fast speeds across all devices, even on a slower connection.
2. Increased Conversion Rates
A side effect of increased website performance is increased conversion rates. It was proven in a recent study that for every one second your page loads above the global benchmark (two seconds for desktop, four seconds for mobile) you are losing out on up to 7% on your conversion rates.
Add that up over the space of a year and that’s a large chunk of revenue that your business is missing out on.
That definitely doesn’t need to happen!
3. Reduced Costs & Time To Market
Site performance is not the only thing that Hyvä Themes speeds up.
The simplicity of the architecture of Hyvä Themes is easier for developers to work with. Because the theme is built on modern web development tools and given the reduced frontend code and files to plough through, it’s also easier for developers to develop new features and functionality as well as debug issues.
This massively reduces development time and costs saving you, the merchant, money.
The easier Hyvä Themes is to build and alter, the fewer hours of your agency’s time you pay for. So you get a better, faster product at a fraction of the price when compared to developing with the out of the box LUMA stack.
4. Developer Experience
Although Hyvä Themes is relatively new (approximately nine months at the time of writing this article), there’s already a huge community around the product. The famous developer community that has built itself around Magento has never been so rejuvenated in the lifetime of Magento 2.
Why is this important?
Because the bigger the open source community around the product, the more free compatibility extensions (more on these later) you get included in your licence and the faster the Hyvä Themes project will evolve. And it doesn’t seem to be slowing down anytime soon.
There are currently over 800 active developers (and growing) on its main community Slack channel – a hub of experts and enthusiasts all sharing knowledge and best practice to benefit one another’s projects.
You might ask: how does that benefit me?
Well, the more knowledge-sharing going on, the more ideas and solutions you have to rely upon if any problems arise when developing your site. That way, your questions are answered quickly and the overall quality of output increases.
5. Adaptability
If you have an existing Magento 2 site, don’t worry.
Hyvä Themes does not require you to start afresh i.e. with a new install of Magento 2. Instead, you can just replace the current theme and avoid having to recreate the backend/admin panel functionality. Because that’s already in place.
And if you’re starting a new project on Magento 2 from scratch or migrating from Magento 1, you can still harness the power of Hyvä Themes.
But you should know that Hyvä Themes is only available on Magento 2 (not Magento 1).
Ok Great! But What Are The Downsides To Hyvä Themes?
There’s no doubt that Hyvä Themes is disrupting the Magento ecosystem. But whilst we think Hyvä Themes is the best frontend for Magento 2, that doesn’t mean it’s perfect.
Here are some things to be aware of before embarking on your first Hyvä Themes project;
1. Magento Version Compatibility
Okay, this one is pretty simple.
Using Hyvä Themes requires Magento 2.4 or higher. If you’re operating on an earlier version, you’ll need to upgrade first before using Hyvä Themes. Adobe will stop supporting v2.3 of Magento 2 as of March 2022 so if you don’t have plans to upgrade to v2.4 then you may end up in a spot of bother after this date if you decide not to do so. Pretty simple and not a lot to gripe about here!
2. Checkout
Currently, Hyvä Themes doesn’t come with a new Magento checkout however, that being said they do have a number of checkout solutions that you can use with the framework.
The most common being the LUMA checkout fallback extension that’s included in your licence. This little gem enables you to use the existing Magento 2 out of the box checkout or any third party checkout extension with the framework without any issues.
It’s also worth noting that the Hyvä Themes development team are working on two alternative checkout solutions that are due to be released in the near future. One is a react JS based checkout and the other is another custom built solution called the Magewire checkout. Both solutions are very much in their infancy but show huge potential as alternative checkout solutions for Magento 2 websites and both are compatible with the Hyvä Themes framework.
Another concern with Hyvä Themes taken care of! See below some useful resources for you:
3. No Third Party Extension Support
Out of the box not all third party extensions will work with Hyvä Themes. You will need a developer to make some of them compatible. This does not apply to all extensions. Let us explain…
Most Magento modules are written with the same technologies as the LUMA themes so won’t be functional when using Hyvä Themes. Where these technologies are used, a rewrite of Javascript, templates, and CSS is required.
This is not a huge amount of work so please don’t listen to people out there claiming that it’s all doom and gloom because it’s not.
But it’s good to know that this writing is limited to storefront output. All backend code, external integrations, and admin panel-related output are not affected.
The team at Hyvä Themes have an answer to this problem though and that is the Hyvä Themes compatibility module library. This library of compatibility extensions comes included with every Hyvä Themes licence and allows the merchant to install and use any of the compatibility extensions that have been submitted to this library by the Hyvä Themes open source community.
Foundation Commerce has developed a number of Hyvä Themes compatibility extensions. We made the Klaviyo and Klevu Magento 2 extensions compatible as well as Mageworx Layered Navigation and Mageplaza’s Instagram Feed.
All of these modules have been submitted to the Hyvä Themes compatibility library and are now available for all Hyvä Themes developers to use. Pretty much all other agencies and developers are contributing to this library and overtime we are confident that every extension will be there.
Another point to note here is that you have the exact same problem with PWA Studio. With PWA Studio you can only retrieve data from the backend of the system using APIs so any extensions you install will need to have API endpoints for you to connect with in order to use their functionality in your frontend. Extension developers are launching these extensions as add-ons which you have to pay extra for and the take up on this has been very slow to date.
So in short, third party extension compatibility with Hyvä Themes isn’t really a problem…well not for us anyway!
4. Adobe Commerce Compatibility
All points in this section of the article were up to date at the time that this article was published.
Hyvä Themes is currently compatible with all Magento 2 Open Source features. Unfortunately the same cannot be said for Adobe Commerce. The Hyvä Themes is currently concentrating on making their framework compatible with all Adobe Commerce features and they are expecting this to be complete within the next 3-6 months.
It must also be said that PWA Studio is still not fully compatible with Adobe Commerce either so no framework can guarantee compatibility as of yet. Our view is that Hyvä Themes will be fully compatible before PWA Studio so watch this space…
5. Hyvä Themes Licence Costs
There’s a growing community around the Hyvä Themes product sharing code, but unfortunately, it isn’t fully open-source. As with most great things in life, there’s a cost and believe us the cost of a Hyvä Themes licence is an absolute bargain!
The license cost is a one-off payment of €1,000 and that allows a merchant to use the product in a single instance of Magento 2. If you have multiple websites built on one Magento 2 instance then one licence is all you need!
The licence covers all future updates and includes support from the developer community, access to all code, the necessary online documentation and the compatibility library.
If you are looking to rebuild your Magento 2 frontend, you will save at least double the Hyvä Themes licence fees in developer costs so it really is a no brainer! Not only do you save money on the initial build costs but you will also save money on all future development costs also.
6. Hyvä Themes Longevity
A question we get asked a lot is “What happens if the Hyvä Themes team stop supporting their product?”. This is a very valid question and one that merchants should be asking.
The simple answer to that is they won’t.
Having worked with the Hyvä Themes team since the launch of their product we know that Hyvä Themes is here to stay and is only going to get bigger and better. If the worse came to the worst and Hyvä Themes dropped support for their product, it would then become an open source project and be continued by the growing community that is already surrounding it.
Will you get at least five years out of our your new Hyvä Themes frontend?
Nobody can predict the future and say for certain but looking at how far the product has come in less than a year, we would say it’s going to be around for the foreseeable future. Another concern that we feel is null and void.
Conclusion
Here at Foundation Commerce, we’re big advocates of Hyvä Themes and the benefits it brings to merchants. Hyvä Themes is basically the Magento 2 frontend on steroids! We believe it has immense potential and should be considered by any Magento 2 merchant who is serious about growing their online business.
We’re now including Hyvä Themes in every Magento 2 website build that we take on. As with most things, we’re one step ahead.
Oh, and we’re definitely not short on expertise and experience. We’ve already launched a number of very successful Hyvä Themes Magento 2 websites including…
With 2 more currently in development at the time of writing this article.
For more information about Hyvä Themes, see the links below:
Hyvä Themes Information
Hyvä Themes Demo
Looking to super charge your Magento 2 websites frontend performance? Get in touch with us today and let’s take your online store to the next level! Click here and let’s get started.