How to Set up Hyvä Theme for Your Magento 2 Store

Hyvä is a modern front-end theme for Magento 2. It offers a performance-focused, developer-friendly alternative to Magento's default themes like Luma. Now, when you've chosen the Hyvä Theme for your eCommerce store, you ask how to install it properly. And no wonder why.

Key Takeaways

• Before installing the Hyvä theme or setting up Hyvä for your store, you need to get Secure Shell Protocol access, set up the Composer, and buy the Hyvä Theme License.
• While installing Hyvä, configure Composer to access the Hyvä repository, deploy the static content after theme installation, and apply the theme via the Magento admin panel.
• NEKLO provides end-to-end Hyvä theme development and setup services and ensures that your Magento store has an appealing customized design and top performance.

Our Hyvä Developer, Dmitry Grinchik, offers practical tips on setting up the Hyvä theme to get the best performance and user experience for your Magento 2 store. With his hands-on experience, Dmitry walks you through the process, showing how to make the most of Hyvä's features, all while keeping things simple and efficient. Keep reading!

Prerequisites

Before Hyvä theme installation, there are several things you need to consider.

Magento 2 Installation

Ensure you have a working Magento 2 store. Hyvä is compatible with Magento 2.4.0 and higher (the latest Magento version is 2.4.7). We recommend you upgrade to the latest Magento 2 for better functionality and performance before installing the Hyvä theme.

SSH Access

Secure Shell Protocol (SSH) is a secure method of remotely connecting to a server. It is essential before installing the Hyvä Theme on a Magento 2 store. SSH access allows you to install necessary software packages and dependencies required by the Hyvä Theme, such as Composer, Node.js, and other tools, manage files securely, and make server-side configurations and adjustments.

‍

To get SSH access to your Magento store, open your terminal and navigate to the root directory of your Magento 2 installation. Run the following commands to add the repository:

Replace /path/to/your/magento2/directory with the actual path to your Magento installation.

Composer

Hyvä is installed via Composer, so make sure Composer is set up on your server.

‍

Composer is a dependency management tool for PHP that is essential for managing Magento 2 and installing themes like Hyvä. Before installing the Hyvä Theme, Composer needs to be properly set up because it plays a critical role in dependency management and version control.

Purchase a Hyvä License

Hyvä is a premium theme, so you’ll need to purchase a license from the official Hyvä Themes website. After purchasing, you’ll get access to their private repository, documentation, and community support.

• There is nor recurring fee for the Hyvä Theme license.
• Despite Hyvä not offering a free trial, they have a 30-day money-back policy.
• The license cost is a one-time payment amounting €1,000.

Hyvä Theme Installation Step-by-Step Guide

Now, when all the prerequisites are checked and fulfilled, it’s high time to move right to the installation process. Let’s jump in!

‍

Step 1: Install Hyvä via Composer

Before you can add the Hyvä repository, you need to authenticate Composer with the credentials provided by Hyvä. This is because the Hyvä theme is hosted in a private repository that requires authentication.

‍

The first step is to configure Composer to use your credentials for accessing the Hyvä repository. Use these credentials you received after license purchase to authenticate with Composer. 

‍

You can do this by running:

‍

This commands tells Composer to store these credentials for Hyvä repository, which Hyvä uses to distribute their packages.

‍

Once the repository is added, you can install the Hyvä theme package:

This command will download the Hyvä theme and install it in your Magento 2 environment.

‍

Once the installation is complete, it’s recommended to run the Magento setup commands to ensure everything is properly integrated.

‍

Run the following commands:

These commands will update the database schema, compile dependency injection, deploy static content, and flush the cache to reflect the changes in your Magento store.

‍

Well, the hardest part is over! 

Step 2: Apply Hyvä Theme

After the theme is installed, you need to apply it to your store. This can be done via the Magento admin panel or using the command line.

‍

Via Admin:

• Go to Content > Design > Configuration.
• Edit the store view where you want to apply Hyvä.
• In the Applied Theme dropdown, select the Hyvä theme.

Via Command Line:

Replace [HYVA_THEME_ID] with the actual theme ID, which you can find from the theme table in the Magento database.

‍

After activating the theme, deploy the static content. It ensures that your Hyvä theme is properly applied and optimized for performance, leading to faster page load times and a better user experience.

Then, clear the cache for better performance. 

‍

bin/magento cache:flush

‍

Voila! One more step completed, and we are moving closer to mission completion. 

Step 3: Customize Hyvä Theme (Optional)

There are four main ways of Hyvä theme customization:

• Customize Layouts: Customizing layouts in Magento 2, especially when using the Hyvä theme, involves modifying the structure and positioning of blocks and containers on your store's pages. Layout customizations are done primarily through Magento’s XML layout files. 
• Customize via SCSS: Hyvä uses Tailwind CSS. This utility-first CSS framework allows for extensive customization with minimal custom CSS. Tailwind’s configuration file can be adjusted to meet your specific design needs.
• Use Hyvä Modules: Hyvä provides a set of modules specifically designed to enhance the theme. Currently, there are 800+ Hyvä-compatible modules available on the market, and their number is constantly rising.
• Override Templates: Magento’s templating system allows you to override default templates provided by Hyvä or other modules without altering core files. Your custom template could involve changing the HTML structure, adding new PHP logic, or inserting additional content.

While you do not need technical knowledge to install the theme; its customization will probably require some help from Hyvä theme developers. Let experts handle custom code adjustments, integrations, and module development to optimize your store's design and performance.

Step 4: Test and Optimize

‍

Test Your Store

‍

Thorough front-end testing of your store is the key to its seamless performance. To ensure everything is working as expected, check different store pages, such as the homepage, product card, and checkout, to confirm that the theme is correctly applied and functional.

‍

Optimize for Performance

‍

Hyvä is already optimized for performance. However, you can further enhance your store by enabling features like full-page caching and image optimization. To measure and improve performance, rely on tools like Google Lighthouse. Its analytics provide a reliable benchmark and actionable insights for performance optimization.

Step 5: Stay Updated

Keep your Hyvä theme and Magento installation updated and benefit from the latest news, features, improvements, and security patches. You can find Hyvä updates through their repository, so periodically check for updates via Composer.

You can also join the growing Hyvä community on Slack and GitHub. This active and friendly community provides a lot of support and shared knowledge. Joining their channels or forums can be beneficial for troubleshooting and learning best practices.

Guides and Resources

• Hyvä Themes official documentation
• Hyvä theme GitHub repository
• Hyvä theme GitLab (for customers and technical partners)
• Hyvä theme issues tracking at GitHub
• Information about Hyvä Slack community

Hyva Themes in Facts and Figures

• Hyvä Themes 1.3.6 and 1.3.7 releases in April 2024 fixed several performance-related issues through new custom Alpine.js x-defer directive, no need loading customer section data via AJAX for new visitors, full compatibility with Magento 2.4.7, etc.
• In 2024, there were 800+ Hyvä-compatible extensions available on the market. 700+ agencies bought at least 1 Hyvä Theme license.
• The number of the Hyvä-powered websites continuously increases over the last 3 years: from 1,000 in 2022, to 2,200 by the end of 2023. Currently (August 2024) there are 3,847 live websites that use the Hyvä theme. 
• Hyvä UI is a modern component framework for Magento 2 that offers tools, libraries, and best practices to simplify front-end development. It is included in the Hyvä Theme license and makes customizations easier and more efficient.

Conclusion

Setting up Hyvä for your Magento 2 store involves purchasing the theme, installing it via Composer, applying it to your store, and optionally customizing it to suit your brand. Although it may look daunting, it can be accomplished without deep technical knowledge. On the other hand, customizations require experienced developers and designers. 

‍

By choosing Hyvä, you get a performance-optimized, modern frontend that can significantly improve your site's user experience.

‍

If you find the process of Hyvä theme installation, customization, and maintenance overwhelming, don't worry. We are here to help. Our experienced developers, who have been working with Hyvä since its release, are ready to assist you in building Hyvä-compatible modules, optimizing performance, and installing other Hyva products like Hyvä Enterprise and Hyvä Checkout.