Hyvä Widgets: Improve Magento 2 Store Performance

Learn in this detailed blog post about what are Hyvä Widgets. 

This simple framework can streamline your CMS framework without any need for extensive coding. 

Let’s learn more.

What are Hyvä Widgets?

Hyvä Widgets are a package of prebuilt widgets built for the Hyvä theme ecosystem to create pages quickly without any special requirements.

Unlike CMS extensions with heavy dependency and unnecessary complexity, Hyvä Widgets aims to reduce them and provide the right amount of settings to work within the ecosystem.

Developers can use these Hyva widgets as a toolset to create custom content templates or build custom layouts using Tailwind/Alpine technologies.  

A simple solution to avoid custom page builder troubles. 

How They’re Useful in Theme Development?

Hyvä Widgets plays a crucial role in theme development, here is how they help:

✅ No extra libraries are needed as it is built using Tailwind CSS and Alpine.js

✅ Allow developers to define UI components in a modular and reusable way and also work with headless setups

✅ Instead of heavy coding, Hyvä Widgets enable developers to manage frontend components through the Magento Admin CMS interface

✅ Developers can rapidly adjust layout, color, spacing, and responsiveness directly in the widget’s template

✅Uses native TinyMCE drag-and-drop functionality 

How to Use Hyvä Widgets in Magento 2?

To get started with Magento 2 Hyvä Widgets, you must have – 

• Magento 2.4.3 or higher version
• Hyvä Themes version 1.1.10 or higher
• Access to Hyvä Themes via Private Packagist or gitlab.hyva.io 

Now, follow these five easy steps to install Hyvä Widgets:

Step 1: Install Hyvä Widgets

Step 2: Enable the Module

Step 3: Modify Tailwind Purge Settings

Step 4: Build the styles.css File

Step 5: Insert Widgets from Admin Panel

Step 1: Install Hyvä Widgets

First, ensure you have the necessary packages installed. If you hold a Hyvä theme license, the process is straightforward:

You can install the Hyvä Widgets module via Composer:

composer require hyva-themes/magento2-hyva-widgets

For contributions and technology partner, the installation process requires a few more steps:

Gitlab access is required

composer config repositories.hyva-themes/magento2-hyva-widgets vcs [email protected]:hyva-themes/magento2-hyva-widgets.git
composer require hyva-themes/magento2-hyva-widgets:dev-main

After that, run:

bin/magento setup:upgrade

2: Enable the Module

Now, make sure the module is enabled, for that you need to activate the the Hyvä Widgets module by the following command:

bin/magento module:enable Hyva_Widgets
bin/magento setup:upgrade

3: Modify Tailwind Purge Settings

Navigate to the Tailwind configuration file located at ./app/design/frontend/[Your]/[Theme]/web/tailwind/tailwind.config.js
Then add the hyva-themes/magento-hyva-widgets module to the purge list configuration as shown:

purge: {
    content: [
        ...
        '../../../../../../../vendor/hyva-themes/magento2-hyva-widgets/**/*.phtml'
    ]
}

4: Build the styles.css File

Now that you’ve integrated Hyvä Widgets into your theme, the next step is to check if everything is displaying correctly on your live site.
For that, run npm run build-prod from the web/tailwind directory of your theme

Step 5: Insert Widgets from Admin Panel

With Hyvä Widgets successfully installed and configured, you can now add them to your store in two ways:

• Navigate to the admin panel and then Content > Widgets to create and manage widgets manually.

Using the WYSIWYG Editor or PageBuilder you can insert widgets directly into CMS pages, blocks, or product descriptions using the built-in visual editor.

Types of Hyvä Widgets

Hyvä Widgets comes in various forms, each serving a specific purpose in Magento 2 frontend development. 

Let’s break down the four types and how they are with examples.

Hyvä Multi Field Widget

The Multi-Field Widget allows you to group multiple fields inside one widget. It is perfect for creating a neat widget without creating multiple separate widgets.

This widget has various customizable contents like reusable elements, widget titles, Multi-field data, and Display type.

Also, you can add the fade animation(10 options available) and adjust padding and spacing as required. 

For example, a widget showcasing a full-width image with a title and call-to-action button displayed at the top of the homepage.

Hyvä Banner Widget

The Banner Widget is used to create visually appealing sections, often with images, CTA buttons, and background styling. It helps draw attention to promotions, sales or announcements. 

This comes with multiple modifiable content options such as banner image(height, width, title, text), content text background, alignment, and more.

Additionally, you can change banner layout with different variations along with banner fade animation and spacing & padding adjustments.

For example, a big homepage with a background image, a main headline (“Summer Sale 2025!”), a subtitle, and a “Shop Now” button.

Hyvä Category Products

Category products lets you display products dynamically from specific categories. It pulls products automatically, making it easy to showcase a collection without manual updates.

It has content options to customize, category product listing options, animation option, widget types and padding & spacing.

For example, display a “New Arrivals” product carousel that automatically shows the latest products from your “New In” category.  

Hyvä Content Widget

The Content Widget is a general-purpose widget designed to add free-form HTML content wherever you need it. It gives you complete control over the markup and styles using Tailwind CSS.

This widget provides a WYSIWYG editor, which allows visual editing, a container, content fade animation, text font color, and spacing and padding.

For example, a custom “About Us” section with rich text, images, and Tailwind-based styling on the homepage.

Other Helpful Hyvä Resources

Hyvä Widgets can work like magic in your Magento 2 store—enhancing your frontend experience and boosting sales overnight when used effectively.

Here are some helpful resources for you: 

• How to Add a Popup Modal in Magento 2 Hyvä Theme?
• How to Implement Loader in Hyvä Theme Magento 2?
• How to Create a Hyvä Child Theme in Magento 2?