Elevating your Magento Website with Hyvä Themes

Elevating your Magento Website with Hyvä Themes

Hyva themes

What is SEO?

Magento 2 is particularly popular in the e-commerce market since it gives store owners complete control over their stores.

Hyvä products were developed from scratch and are based on Magento 2 Themes. Hyvä developers fixed the issues with poor performance and sluggish page loading by removing the majority of JavaScript files and rewriting the majority of layout.xml and .phtml files. The goal of this theme is to remove any third-party libraries used by Magento 2 such as Knockout, Require, jQuery, and unnecessary JS libraries and LESS stylesheet files that cause render-blocking for optimization.

The Hyvä theme utilizes far fewer JS files than other standard Magento themes, and these libraries are straightforward, light, and strong while maintaining resource speed and a top-notch user interface.

The ViewModels, Tailwind CSS, and AlpineJs V2 were used to create Hyvä Themes. AlpineJS makes writing JavaScript much more user-friendly. It might be problematic if you have to rely on several third-party solutions, but as more extensions receive Hyvä compatibility, it will become better. In contrast, the Hyvä theme employs superior, more current, well-planned alternatives that are always built with maximum performance in mind. This revised architecture is similarly simpler and less complicated in design.

This needed an entirely new approach to JS and CSS development. This also means that developers should reconsider their asset creation method. Hyvä employs PostCSS, so you must use the npm run, build-dev, or build-prod scripts to generate the required files. The construction takes very little time and is done swiftly.

When you first check the Hyvä theme, both the Hyvä/reset and Hyvä/default themes are available. These themes have connections, such as Magento/luma and Magento/blank. As a consequence, the Hyvä/reset theme functions as both a base theme without a parent theme and a parent theme for the Hyvä/default theme.

Both the Hyvä/reset theme and the blank Magento theme have different purposes. By deleting the LessCSS styles from Magento, the Hyvä theme may create a Tailwind CSS-based environment.

Integrating Hyvä theme with Magento 2 will help to make the store incredibly quick, better optimized, and provide a positive shopping experience for customers.

Have you thought about using Hyvä Themes as the front-end solution for your eCommerce website? Have any questions you’d like to have answered before making a final decision?

Here are some frequently asked questions and their answers to help you make that critical development decision—LUMA or Hyvä.

1. What are Hyvä Themes?

Hyvä (the Finnish word for “good”) Themes are the latest way to create storefronts for your Magento 2 website. It addresses some of the most prevalent problems with Magento’s previous front end, LUMA.

Two tools—Tailwind CSS and Alpine.js—replace hundreds of separate JavaScript files and bulky libraries. This allows you to say goodbye to LUMA’s bloated architecture and the excessively convoluted frontend codebase that hinders the eCommerce performance of your website.

2. Why is Hyvä Themes a better alternative to other modern front-end solutions?

  • Compared to other frontend frameworks, there is a lower development cost (PWAs often cost £100k+).

  • The framework’s simplicity also results in significantly lower ongoing maintenance costs and a significantly shorter time to market.

  • Boost the efficiency of your website and achieve SEO web benchmarks like the Core Web Vitals Assessment.

3. How do Hyvä themes achieve better performance?

Mainly by using less code. TailwindCSS allows smaller CSS files with only the directives that are actually needed. Furthermore, JavaScript is only used where it is actually necessary, which decreases the overhead. The reduction of the number of layout blocks and the consistent use of ViewModels instead of blocks are the other important factors 

4. Will all my current extensions work with Hyvä Themes?

Your present extensions and whether they rely on the LUMA JavaScript libraries will determine how this will work. You can utilize a variety of different extensions from the public compatibility extension library, which is available right away with the license, in your projects. Even if they aren’t supported right away, the majority of the big extension vendors are already working to make their products completely compatible with Hyvä Themes.

Amasty, Aheadworks, Mirasvit, WebKul, and Mageworx are some of the leading extension developers available to merchants—each making a commitment to continue making their extensions compatible.

5. Can I try Hyvä Themes out before buying a license?

Not without a license, not on a live website. However, they have produced a really neat demo that provides an excellent overview of how it functions as a front-end solution.

Visit the following URL:

You can check the performance of the page using Google Page Speed and see just how quick the framework is.

6. What are the checkout solutions available for Hyvä Themes?

The most common is the LUMA checkout fallback extension, which comes with your license. Specific routes can be configured to use a different theme (one based on Luma) instead of Hyvä. This feature enables the Luma Checkout to work with Hyvä as well. The Hyvä theme is not active on those pages. Tailwind CSS and Alpine.js are not loaded. Instead, the browser loads RequireJS and all other Luma theme dependencies. However, if you want to switch, there are a few other checkout options we recommend you look into:

  • Hyva Checkout.

  • Magewire Checkout – a game changer for customizing the checkout experience in Magento 2 that will be available soon.

  • One Step Checkout.

7. Does Hyvä have page builder compatibility?

Yes. Now that PageBuilder is part of Magento Open Source, the compatibility module Magento_PageBuilder has been merged with the Hyvä Theme module.

8. Is Hyvä compatible with Magento 2 OpenSource?

Hyvä Themes are compatible with Magento OpenSource from version 2.4.x upwards.

9. Could you share some of the Hyvä developer experience?

Although Hyvä themes are relatively new, this project is supported by a sizable development community. More than 800 developers are currently active in the main community, which is a gathering place for specialists and enthusiasts who share knowledge, expertise, and best practices to advance one another’s projects. They even have a business Slack channel which you’re added to as soon as you purchase a license.

10. Showcases of Hyvä Theme Stores.


Hyva Widgets

Hyva widgets

Introduction to Hyva widgets

Hyva widgets, a set of magento widgets specifically built for hyva, which are an addition to the building tools that we get with PageBuilder. It provides users with a simple and effective CMS framework to quickly sync and build pages within a common ecosystem, without any additional requirements or libraries.They can be embedded in CMS pages directly as a widget, or can be embedded in containers using the Magento 2 admin layout functionality.

PageBuilder offers flexibility for the end user, they also add unnecessary complexity to customers who just want to log in and make the necessary content changes. Hyvä Widgets aims to provide the right amount of limitations for content creators to work within a website design system.

Developers can use them as a set of tools to create custom content templates, create custom layouts quickly, while using Hyvä Theme and Tailwind / Alpine technology.

Simplicity & delivery is the main problem they solve and they do this by :

  • Using native technologies well established into Magento 2
  • No additional dependencies except Hyvä theme.
  • Familiar and simplistic interface
  • Native TinyMCE Drag and Drop functionality.


  • Magento 2.4 or higher
  • Hyvä Themes version 1.1.10 or higher
  • Access to Hyvä Themes


  1. Install via composercomposer require hyva-themes/magento2-hyva-widgets
  2. Enabling the modulebin/magento module:enable Hyva_Widgetsbin/magento setup:upgrade
  3. Adjusting the Tailwind Purge settings in ./app/design/frontend/[Your]/[Theme]/web/tailwind/tailwind.config.js, add the hyva-themes/magento-hyva-widgets module to the purge list configuration.

    purge: {

                content: [





  4. Build the styles.css file Then run npm run build-prod from the web/tailwind directory of your theme.


Widgets can be added by Admin in Content> Widgets, or by the WYSYWIG / PageBuilder editor.

  1. First, go to the Magento admin UI and navigate to Content -> Pages -> e.g. Homepage.
  2. Open the Content section Enable Editor by clicking the “Show / Hide” button .
  3. Click on the Insert Widget icon. Select the widget type from the drop down eg: Hyva Content Widget.
  4. A widget popup will appear with a list of options.
  5. When you are done editing, press “Insert Widget” in the top right corner and save the page.
  6. In production mode, the Block HTML and Full Page Cache needs to be “Refreshed” for the changes to be applied on the frontend


The module follows the design of the standard Hyvä module. Source code can be found in the vendor/hyva-themes/magento2-hyva-widgets/src/ directory of the package.

The etc folder has the widget.xml file, where we can see how the different widgets are initialized. The developers can modify or create a widget. xml in their module in order to add a field, or to add additional data or to create new widgets based on the blueprints provided by the module.

The view/frontend folder contains the template folder and the web folder. The templates are built using vanilla JS, Tailwind and Alpine. They can be overridden in a theme by creating a folder Hyva_Widgets/templates/widget/ and copying the template to override. This uses the native Magento 2 theme inheritance system.The web folder contains library code for the slider widget.

The ViewModel folder contains the class CategoryProducts. It is used in the category slider widget to provide the products for the selected categories.

Widget Types

We currently have four types of widgets that we can implement.

Hyvä Banner Widget

We can create a banner with an image or with just a background color and add some content like heading , text or button. It has different layouts that you can select – Full width, Half left caption and Half right caption.

Hyvä Category Products

We can show a listing of products from a certain category. We can list those as a grid or slider

Hyvä Content Widget

A simple content field which we can display in different ways. We can add a container around it and have some animations when it scrolls into view. It also allows using TailwindUI components.

Hyvä Multi Field Widget

It’s a listing of items which we can show as a grid or slider.A way to add multiple images with a title description optionally a button


Unconscious Biases @Work

Unconscious Biases @Work

Terrific Minds Blogs Unconscious Biases Work

Unconscious bias is, as the name suggests, unconscious. It’s a bias that we are unaware of and happens outside of our control. It occurs automatically and is triggered by our brain making a quick judgement and assessment of people and situations, influenced by our background, experiences and environmental conditions.

What we call unconscious biases are rooted in the human brain’s automatic processing systems. This unconscious decision making has played an important role in the survival and evolution of our species, without which our ancestors would have ended up as fodder for wild animals. The same ability now gets us through our day when we have to deal with multitasking, deadlines, flooded emails and more. Google even put this in numbers in their presentation on unconscious bias: “We (humans) receive 11 million bits of information every moment. We can only consciously process 40 bits.” That’s 99.999996% unconscious.

Unconscious biases can affect workplaces and organizations. It can introduce unintentional discrimination and result in poor decision making. Even a tiny bit of bias can have big consequences. The impact of little decisions can accumulate over time.


  • Affinity bias: the tendency to warm up to people like ourselves.
  • Halo effect: the tendency to think everything about a person is good because you like that person.
  • Perception bias: the tendency to form stereotypes and assumptions about certain groups that make it impossible to make an objective judgment about members of those groups.
  • Social comparison bias: the tendency, when making hiring decisions, to favor potential candidates who don’t compete with one’s own particular strengths.
  • Bias blind spot: the tendency to see oneself as less biased than other people, or to be able to identify more cognitive biases in others than in oneself.

You can’t prevent unconscious bias from happening, so stop trying to. It’s a war on evolution and the chances of winning are non-existent. So what can you do about it? Once it happens : 1. Identify it 2. Acknowledge your biases 3. Be intentional about putting biases aside when making decisions 4. Call others out on their biases Everyone has biases; it’s part of being human. From an organizational perspective, the sooner we realize this reality—and take proactive steps to overcome the biases that hold us back—the stronger our companies become, and the better positioned we’ll all be to serve our customers effectively.