A Look At Hyvä Themes

The goal of any businessperson is to build the most profitable store, right? The existing LUMA stack will prevent you from doing so, that’s where Hyvä Themes comes in. 

As a good story is incomplete without its characters, your online commerce shop front is incomplete without a fast performing and easy-to-use theme. 

There’s regular talk of new themes in the Magento ecosystem, however few have turned heads like the Hyvä theme since its launch. While there have been 3rd party themes crop up in the Magento community, none quite made the opinionated and bold leaps that Hyvä has done so successfully.

Up until this point, Magento’s out of the box frontend framework (or the LUMA stack as its otherwise known) is slow, difficult toward with and hasn’t been updated since Magento 2 was first released. 

eCommerce is a booming industry. Especially with the pandemic-induced digitalisation, almost every business is now working on building their own eCommerce page. In 2021, global eCommerce sales are expected to total $4.921 trillion worldwide.

The goal of any businessperson is to build the most profitable store, right? The existing LUMA stack will prevent you from doing so, that’s where Hyvä Themes comes in. 

Understanding 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? 

It is fair to say Luma based themes are not particular fast, and they’ve had their fair share of criticism directed towards them ever since Magento 2 launched. Luma based themes perform poorly due to the architecture and bloat of both the CSS and (more so) the JavaScript included*. The way JavaScript is loaded causes pages to take longer to become both visible and interactive, and the size and number of JavaScript and CSS files included on the page is excessive. This is further exacerbated when you consider so much of the content is ‘dead code’ (i.e. code that never runs and therefore not required).

*CSS (Cascading Style Sheets) are used to apply design, the theme (i.e. the look and feel) to a website. JavaScript is used on almost every website to provide dynamic/interactive content. This includes anything from menus, accordions and tabs to carousels/sliders, maps and more.

It’s also extremely over engineered and complex which makes developing new themes very time consuming for developers and their time is your money. That’s even before custom features have been added.

Adobe has no plans to update this framework and will eventually deprecate it. 

So, How Does Hyvä Themes Differ? 

Hyvä Themes aims to resolve the performance issues by essentially removing all the output introduced by LUMA based theme and starting a fresh with a blank canvas. The hundreds of individual JavaScript files and inflated libraries are replaced with one single JavaScript framework, Alpine.js, that allows simple dynamic interactions to be achieved with minimal code/effort. Moreover, all CSS is removed in favour of using tailwind CSS , a framework that can reduce CSS output by over 90% compared to traditional methods. 

This results in a remarkably lean, and consequently a much faster experience, even on an underpowered mobile devices with low signal (i.e sow internet speed). 

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.

Yes, we’ve highlighted the key focus on speed, but let’s look further at why you’d want to use Hyvä Themes? Or more importantly, why should you choose it over default Magento (or any other option)? Here are 5 of the biggest benefits of using Hyvä: 

1. Hyvä Themes Performance

Like we had mentioned several times, the performance of Hyvä themes is way superior to Luma-based themes. According to several tests, the Luma-based websites take more time to fully load all the elements and functions. Whereas, Hyvä themes are faster both on desktops and mobile devices.  The primary difference between Luma Themed websites and Hyvä themed websites is their Time to Interactive (TTI) metric. Hyvä themes give users the ability to interact with all the website functions in less than 2 seconds. While it takes almost half a minute for most Luma websites to become interactive.

2. Increased Conversion Rate

A side effect of having heightened performance is increased conversion rates. It was proven in a recent study that for every one second your page loads above the global benchmark (2 seconds for desktop, 4 seconds for mobile) you are losing out on up to 7% on your conversion rates. 

7 % may not seem that much but if you start to add it up over the span of 12 months, that is a large chunk of revenue your business is missing out on each year. 

3. Time To Market

Because Hyvä Themes contain less bloat and introduce clean, dedicated components for each area of frontend output. Developers spend less time battling inner workings of indirectly related code to achieve the modifications they need to make. Because the theme is built on modern web development tools, it’s easier for developers to develop new features and functionality as well as debug issues. That in turn reduces development time as a whole and saves you, the merchant, money. 

The easier Hyvä Themes is to build and modify, the fewer hours of your agency’s time you pay for. All this equals to a better, faster product at a fraction the price compared to developing with the out of the box LUMA stack. 

4. Developer Experience

Why should you care if a developer enjoys working on your site? You’re asking yourself, “well, how does that impact my revenue?” Whilst it may not be something a business owner should care about, it is definitely worth taking notice of. As a good developer, experience breeds a larger community. This is to your benefit because a healthy, growing and supportive community means developers supporting your site have access to a group of like-mined individuals to ‘bounce ideas off’ and get help. 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 panic. If you want to replace your existing default theme with Hyvä, you can easily do so. Moreover, this can be achieved without having to do a fresh installation f the platform and rebuild custom functionality all over again. However, it is worth noting that Hyvä doesn’t work on Magento 2.3 or older. You need to update to Magento 2.4 or a new versions to access Hyvä seamlessly. 

Are there any downsides to Hyvä Themes? 

We have chatted about the many benefits of using Hyvä themes but surely there must e some downsides? That’s a fair comment, so we will now outline the considerations that need to be taken into account before selecting Hyvä Themes as an approach. 

1. Magento Version Compatibility 

This one is fairly simple. As mentioned previously, using Hyvä themes requires Magento 2.4 or higher. So if you are using an older version of Magento then you will need to upgrade before using Hyvä. 

2. Checkout

How does Hyvä Themes affect the checkout? The short answer is, it doesn’t. Hyvä Themes doesn’t make any specific opinion over the checkout and essentially leaves the end choice up to you (or the developer). Both the standard checkout (i.e. the one utilised with Luma based themes) and Hyvä’s own optional checkout solution are available.

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.

Most Magento modules are written with the same technologies as the LUMA themes so won’t be functional when using Hyvä Themes. Some additional work is often required to ensure the module works and looks good. However, it should be noted this is only in relation to storefront (theme) output, i.e. all backend code, external integrations and admin panel related output are not affected. 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. 

4. Licence Costs 

Not all good things in life are free. This applies to Hyvä themes. Whilst there is a growing community sharing and collaborating code, it is not entirely open-soured. There is a per installation licence for using Hyvä Themes, this cost generally falls to the merchant to pay. 

The licence cost is a one-off payment of €1000, which includes all future updates, i.e. there are no yearly or additional payments to get updates in future. The licence includes:

• One-time purchase, unlimited updates included
• Valid for one Magento 2 installation with unlimited domains and storeviews.
• Full access to the Hyvä Themes code via Private Packagist and Gitlab
• Includes access to third-party compatibility modules
• Support and Community access on our private Slack
• Access to online documentation

Furthermore, if you have multiple websites built on one Magento 2 instance then one licence is all you need! 

5. Hyvä Themes Longevity

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. A concern that we feel is null and void.

Final Thoughts on Hyvä Themes

Hyvä Themes is here to stay for years to come. This frontend has revolutionised the working of one of the most sought-after eCommerce platforms, Magento 2. 

It’s now commonly accepted that Magento 2’s standard frontend (LUMA) is too bloated and slow. Worse still, effecting change or simply maintaining storefronts is taking too much effort. This is at the expense of merchants in terms of lost revenue and cost development time (both of which slow your growth).

After quickly getting to grips with the structure and methods of Hyvä Themes, I quickly realised the benefits of it and how fast and easy Magento 2 development could really be. Hyvä cuts out many of the hoops of vanilla Magento and delivers a fast, streamlined experience for both developers and customers.

Graham Catterall – Web Developer, Reach Studios.

We believe Hyvä Themes has exponential potential and should be considered by any Magento 2 merchants who are sincere about growing their online business. 

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!