Hyvä theme is a cutting-edge open-source frontend theme for Magento 2 built to speed up the website’s performance. It is based on lightweight technologies, such as Alpine.js and Tailwind CSS, making Hyvä hit outstanding performance results.

Indeed, Hyvä uses a completely different approach than Luma, a standard Magento 2 theme. According to our comparison of Hyvä and Luma themes, there is a huge performance gap, especially on mobile devices.

Retailers shouldn’t neglect the factor of speed because it significantly influences purchases. If a website suffers from slow loading times, modern users may abandon their carts and shop elsewhere. That’s why installing Hyvä themes on Magento 2 stores is necessary to ensure high performance and maintain customer loyalty.

Elevate your Hyvä Frontend with our powerful Hyva-compatible extensions designed to boost performance and functionality.

Prerequisites for Magento 2 Hyvä Theme Setup

Before installing the Hyvä theme on Magento 2, make sure you meet the following requirements:

General Requirements

Magento 2.4.3 or later.
PHP 7.4, 8.1 or 8.2
A valid license key for the theme (for customers) or access to Hyvä Gitlab Repositories for partners.
Node JS 16 or later (Node JS 16 is necessary for Tailwind CSS style building. However, it’s recommended to build styles in a development or staging environment, and then the pre-compiled styles deploy on the production.)

System Requirements

The rest of the system requirements are based on the Magento version. You can find them here.

Other

Since GraphQL API fetches some data from modules and passes it to Hyvä, make sure the following modules are enabled before installing the Hyvä theme:

Magento_BundleGraphQl
Magento_CatalogCustomerGraphQl
Magento_CatalogGraphQl
Magento_CatalogRuleGraphQl
Magento_CatalogUrlRewriteGraphQl
Magento_ConfigurableProductGraphQl
Magento_CustomerGraphQl
Magento_DirectoryGraphQl
Magento_DownloadableGraphQl
Magento_EavGraphQl
Magento_GraphQl
Magento_GroupedProductGraphQl
Magento_QuoteGraphQl
Magento_GraphQlCache
Magento_RelatedProductGraphQl
Magento_ReviewGraphQl
Magento_SalesGraphQl
Magento_StoreGraphQl
Magento_SwatchesGraphQl
Magento_UrlRewriteGraphQl
Magento_WishlistGraphQl

How to Install Hyvä Theme on Magento 2

Step 1: Set Up the Composer Repository

This step is slightly different for customers and partners in terms of which repository the theme will be downloaded from. Let’s explore both scenarios:

For customers

To start, you will need a valid license and a private package list key.

Add your personal key for authentication:

composer config --auth http-basic.hyva-themes.repo.packagist.com token yourLicenseAuthentificationKey

Add the repository link:

composer config repositories.private-packagist composer https://hyva-themes.repo.packagist.com/yourProjectName/

For partners

You should have Partner access to Hyvä Gitlab. Then, add links to repositories using the following commands:

composer config repositories.hyva-themes/magento2-theme-module git git@gitlab.hyva.io:hyva-themes/magento2-theme-module.git
composer config repositories.hyva-themes/magento2-reset-theme git git@gitlab.hyva.io:hyva-themes/magento2-reset-theme.git
composer config repositories.hyva-themes/magento2-email-module git git@gitlab.hyva.io:hyva-themes/magento2-email-module.git
composer config repositories.hyva-themes/magento2-default-theme git git@gitlab.hyva.io:hyva-themes/magento2-default-theme.git
composer config repositories.hyva-themes/magento2-order-cancellation-webapi git git@gitlab.hyva.io:hyva-themes/magento2-order-cancellation-webapi.git

Step 2. Instal Hyvä Theme

Run the following commands to install Hyvä theme on Magento 2:

Install the Hyvä theme:

composer require hyva-themes/magento2-default-theme

Upgrade Magento:

php bin/magento setup:upgrade

Compile the application:

php bin/magento setup:di:compile

Deploy static content:

php bin/magento setup:static-content:deploy

Flush the cache:

php bin/magento cache:flush

Step 3. Website Configuration

Hyvä doesn’t support text CAPTCHA, so you need to disable it and use Google reCAPTCHA:

php bin/magento config:set customer/captcha/enable 0

To avoid problems with JavaScript and CSS, it is recommended to disable merging and minification:

php bin/magento config:set dev/template/minify_html 0
php bin/magento config:set dev/js/merge_files 0
php bin/magento config:set dev/js/enable_js_bundling 0
php bin/magento config:set dev/js/minify_files 0
php bin/magento config:set dev/js/move_script_to_bottom 0
php bin/magento config:set dev/css/merge_css_files 0
php bin/magento config:set dev/css/minify_files 0

Enable the Hyvä theme.

In the admin panel, navigate to Content > Design > Configuration.

Select the required store, website, or store view and activate the Hyvä Default theme for it.

Important Information:

If Hyvä is selected at the store view level and “No Theme” is chosen at higher levels, it may cause issues with the theme’s functionality. You should select the Hyvä theme at the higher levels as well to ensure stable performance.

Generate configuration for the Hyvä theme.

php bin/magento hyva:config:generate

Step 4. The Final Website Deployment

Execute the commands sequentially:

php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy
php bin/magento cache:flush

Conclusion

Installation of the Hyvä theme on Magento 2 is a key decision to optimizing your website. It can help you to reach an outstanding performance and end up in sales if correctly implemented.

If you have any inquiries or would like to learn more about our Hyvä development services, please don’t hesitate to get in touch. We’re here to help!