Magento 2 is a powerful e-commerce platform, and the right theme can make a significant difference in both the look and performance of your online store. Hyvä Themes has quickly gained popularity due to its modern design, exceptional performance, and developer-friendly nature. In this guide, we’ll walk you through the steps to install Hyvä Themes in Magento 2.
What is Hyvä Themes?
Hyvä Themes is a Magento 2 theme that focuses on performance and simplicity. It’s built with modern front-end technologies and offers a leaner and faster alternative to the traditional Luma theme. With Hyvä Themes, you get a clean codebase, reduced JavaScript payload, and improved Lighthouse scores, making your site faster and more user-friendly.
Prerequisites:
- Magento version 2.4.3 CE or higher. If your Magento is older than 2.4.3, it’s recommended to upgrade your Magento store first and then implement the Hyvä Theme.
- Valid Hyvä Themes license (Refer to this – https://www.hyva.io/license )
- For licensees: Private Packagist Key (refer to Hyvä license instructions)
- For partners: Access to Hyvä Gitlab
- SSH access to your Magento server
- Basic understanding of Composer
- PHP version 7.4, 8.1 or 8.2
Steps to Install Hyvä Themes in Magento 2:
Step 1: Configure Composer Repositories
- Access Hyvä GitLab to obtain access to their repositories.
- Use Composer commands to configure repositories for Hyvä themes and any additional modules. This command adds your key to your project’s auth.json file.
- Replace yourLicenseAuthentificationKey with your own key for the below command.
composer config --auth http-basic.hyva-themes.repo.packagist.com token yourLicenseAuthentificationKey
- Replace yourProjectName with your project name for the below command.
composer config repositories.private-packagist composer https://hyva-themes.repo.packagist.com/yourProjectName/
Step 2: Install Hyvä Themes and Dependencies
- Run the Composer command to install the Hyvä theme package and its dependencies.
composer require hyva-themes/magento2-default-theme
Step 3: Upgrade Magento
- Navigate to your Magento root directory and run the upgrade command to update the Magento database schema.
php bin/magento setup:upgrade
Step 4: Activate Hyvä Theme
- Login to your Magento Admin Panel.
- Navigate to Content > Design > Configuration.
- Locate the Hyvä theme (usually hyva/default) and activate it.
- Ensure a theme is set on the Website level as well (it can be Luma or another theme).
Step 5: Flush Cache (Optional)
- In developer mode, navigate to System > Tools > Cache Management and flush the Magento cache.
Congratulations! You’ve successfully installed Hyvä Themes on your Magento 2 store. Open your store’s URL in a web browser to see the new Hyvä Theme in action.
Install Different Checkout Options with Hyvä Themes:
Step 1: Install ThemeFallback Module
Use the following command to install ThemeFallback module
composer require hyva-themes/magento2-theme-fallback
Step 2: Install the Checkout Module
The below command will help you use Luma Checkout with Hyvä Themes
composer require hyva-themes/magento2-luma-checkout
The below command will help you use React-based Checkout
composer require hyva-themes/magento2-react-checkout
The below command will help you use Hyvä One Step Checkout. This will work only if you have purchased the license for Hyvä Checkout.
composer require hyva-themes/magento2-hyva-checkout
Hyvä Checkout Installation & Configuration
Step 1: Install Hyvä Checkout
Run the following command to install Hyvä Checkout:
composer require hyva-themes/magento2-hyva-checkout
Step 2: Disable Magento HTML Minification (if enabled)
In the Magento configuration, navigate to:
Stores > Configuration > Advanced > Developer > Template Settings > Minify Html
Disable the HTML minification by setting it to “No” or run the following command:
bin/magento config:set dev/template/minify_html 0
Note: This step is only necessary if HTML minification is currently enabled (by default, it is disabled). While HTML minification can be enabled since Hyvä v1.1.6, it’s still recommended to keep it disabled for better compatibility.
Step 3: Run Setup Upgrade
After installation, update Magento’s setup with the command:
bin/magento setup:upgrade
Step 4: Generate Tailwind Styles for Checkout
To generate the styles using Tailwind CSS, replace the path vendor/hyva-themes/magento2-default-theme/web/tailwind/ with the path to your theme’s web/tailwind folder, and run the following commands:
npm --prefix vendor/hyva-themes/magento2-default-theme/web/tailwind/ ci npm --prefix vendor/hyva-themes/magento2-default-theme/web/tailwind/ run build-prod
This will ensure Tailwind CSS builds the required styles for your checkout page.
Step 3: Upgrade Magento
Navigate to your Magento root directory and run the upgrade command to update the Magento database schema.
php bin/magento setup:upgrade
Additional Tips:
- Always create a full backup of your store before making any significant changes.
- Refer to the official Hyvä documentation for detailed instructions and troubleshooting guides: https://docs.hyva.io/hyva-themes/getting-started/index.html
- Consider installing Hyvä-compatible extensions to enhance your store’s functionality. Remember to check for compatibility and follow specific installation instructions for each extension.
Conclusion:
Installing Hyvä Themes in Magento 2 can significantly enhance your store’s performance and user experience. With this guide, you should be able to seamlessly integrate Hyvä Themes into your Magento 2 store. Enjoy the improved speed and modern design that comes with this powerful theme!