{"id":2063,"date":"2024-10-24T15:37:42","date_gmt":"2024-10-24T12:37:42","guid":{"rendered":"https:\/\/plumrocket.com\/learn\/?p=2063"},"modified":"2024-11-27T15:50:50","modified_gmt":"2024-11-27T13:50:50","slug":"how-to-install-hyva-theme-on-magento-2","status":"publish","type":"post","link":"https:\/\/plumrocket.com\/learn\/install-hyva-theme","title":{"rendered":"How to Install Hyv\u00e4 Theme on Magento 2"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full disable_zoom\"><img loading=\"lazy\" width=\"1600\" height=\"600\" src=\"https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2024\/10\/install-hyva-theme.png\" alt=\"How to Install Hyv\u00e4 Theme on Magento 2\" class=\"wp-image-2076\" srcset=\"https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2024\/10\/install-hyva-theme.png 1600w, https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2024\/10\/install-hyva-theme-300x113.png 300w, https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2024\/10\/install-hyva-theme-1024x384.png 1024w, https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2024\/10\/install-hyva-theme-768x288.png 768w, https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2024\/10\/install-hyva-theme-1536x576.png 1536w, https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2024\/10\/install-hyva-theme-1568x588.png 1568w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n\n\n\n<p><a href=\"\/hyva-theme-development\" target=\"_blank\" rel=\"noreferrer noopener\">Hyv\u00e4 theme<\/a> is a cutting-edge open-source frontend theme for Magento 2 built to speed up the website\u2019s performance. It is based on lightweight technologies, such as Alpine.js and Tailwind CSS, making Hyv\u00e4 hit outstanding performance results.<\/p>\n\n\n\n<p>Indeed, Hyv\u00e4 uses a completely different approach than Luma, a standard Magento 2 theme. According to our <a href=\"\/learn\/hyva-luma-performance-comparison\" target=\"_blank\" rel=\"noreferrer noopener\">comparison of Hyv\u00e4 and Luma<\/a> themes, there is a huge performance gap, especially on mobile devices.<\/p>\n\n\n\n<p>Retailers shouldn\u2019t 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\u2019s why installing Hyv\u00e4 themes on Magento 2 stores is necessary to ensure high performance and maintain customer loyalty.<\/p>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<div class=\"wp-block-columns has-background\" style=\"background-color:#dde6f6\">\n<div class=\"wp-block-column\">\n<p class=\"has-text-align-left\" style=\"line-height:1.7\">Elevate your Hyv\u00e4 Frontend with our powerful <a href=\"\/magento-hyva-extensions\" target=\"_blank\" rel=\"noreferrer noopener\">Hyva-compatible extensions<\/a> designed to boost performance and functionality.<\/p>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<h2>Prerequisites for Magento 2 Hyv\u00e4 Theme Setup<\/h2>\n\n\n\n<p>Before installing the Hyv\u00e4 theme on Magento 2, make sure you meet the following requirements:<\/p>\n\n\n\n<h3>General Requirements<\/h3>\n\n\n\n<ul><li>Magento 2.4.3 or later.<\/li><li>PHP 7.4, 8.1 or 8.2<\/li><li>A valid <a href=\"https:\/\/www.hyva.io\/license\" target=\"_blank\" rel=\"noreferrer noopener\">license key<\/a> for the theme (for customers) or access to <a href=\"https:\/\/gitlab.hyva.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">Hyv\u00e4 Gitlab Repositories<\/a> for partners.<\/li><li>Node JS 16 or later (Node JS 16 is necessary for Tailwind CSS style building. However, it\u2019s recommended to build styles in a development or staging environment, and then the pre-compiled styles deploy on the production.)<\/li><\/ul>\n\n\n\n<h3>System Requirements<\/h3>\n\n\n\n<p>The rest of the system requirements are based on the Magento version. You can find them <a href=\"https:\/\/experienceleague.adobe.com\/en\/docs\/commerce-operations\/installation-guide\/system-requirements\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/p>\n\n\n\n<h3>Other<\/h3>\n\n\n\n<p>Since GraphQL API fetches some data from modules and passes it to Hyv\u00e4, make sure the following modules are enabled before installing the Hyv\u00e4 theme:<\/p>\n\n\n\n<ul><li>Magento_BundleGraphQl<\/li><li>Magento_CatalogCustomerGraphQl<\/li><li>Magento_CatalogGraphQl<\/li><li>Magento_CatalogRuleGraphQl<\/li><li>Magento_CatalogUrlRewriteGraphQl<\/li><li>Magento_ConfigurableProductGraphQl<\/li><li>Magento_CustomerGraphQl<\/li><li>Magento_DirectoryGraphQl<\/li><li>Magento_DownloadableGraphQl<\/li><li>Magento_EavGraphQl<\/li><li>Magento_GraphQl<\/li><li>Magento_GroupedProductGraphQl<\/li><li>Magento_QuoteGraphQl<\/li><li>Magento_GraphQlCache<\/li><li>Magento_RelatedProductGraphQl<\/li><li>Magento_ReviewGraphQl<\/li><li>Magento_SalesGraphQl<\/li><li>Magento_StoreGraphQl<\/li><li>Magento_SwatchesGraphQl<\/li><li>Magento_UrlRewriteGraphQl<\/li><li>Magento_WishlistGraphQl<\/li><\/ul>\n\n\n\n<h2>How to Install Hyv\u00e4 Theme on Magento 2<\/h2>\n\n\n\n<h3>Step 1: Set Up the Composer Repository<\/h3>\n\n\n\n<p>This step is slightly different for customers and partners in terms of which repository the theme will be downloaded from. Let\u2019s explore both scenarios:<\/p>\n\n\n\n<h4>For customers<\/h4>\n\n\n\n<p>To start, you will need a valid license and a private package list key.<\/p>\n\n\n\n<ol><li>Add your personal key for authentication:<\/li><\/ol>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-php\">composer config --auth http-basic.hyva-themes.repo.packagist.com token yourLicenseAuthentificationKey<\/code><\/pre><\/div>\n\n\n\n<ol start=\"2\"><li>Add the repository link:<\/li><\/ol>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-php\">composer config repositories.private-packagist composer https:\/\/hyva-themes.repo.packagist.com\/yourProjectName\/<\/code><\/pre><\/div>\n\n\n\n<h4>For partners<\/h4>\n\n\n\n<p>You should have Partner access to Hyv\u00e4 Gitlab. Then, add links to repositories using the following commands:<\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-php\">composer config repositories.hyva-themes\/magento2-theme-module git git@gitlab.hyva.io:hyva-themes\/magento2-theme-module.git\ncomposer config repositories.hyva-themes\/magento2-reset-theme git git@gitlab.hyva.io:hyva-themes\/magento2-reset-theme.git\ncomposer config repositories.hyva-themes\/magento2-email-module git git@gitlab.hyva.io:hyva-themes\/magento2-email-module.git\ncomposer config repositories.hyva-themes\/magento2-default-theme git git@gitlab.hyva.io:hyva-themes\/magento2-default-theme.git\ncomposer config repositories.hyva-themes\/magento2-order-cancellation-webapi git git@gitlab.hyva.io:hyva-themes\/magento2-order-cancellation-webapi.git<\/code><\/pre><\/div>\n\n\n\n<h3>Step 2. Instal Hyv\u00e4 Theme<\/h3>\n\n\n\n<p>Run the following commands to install Hyv\u00e4 theme on Magento 2:<\/p>\n\n\n\n<ol><li>Install the Hyv\u00e4 theme:<\/li><\/ol>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-php\">composer require hyva-themes\/magento2-default-theme<\/code><\/pre><\/div>\n\n\n\n<ol start=\"2\"><li>Upgrade Magento:<\/li><\/ol>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-php\">php bin\/magento setup:upgrade<\/code><\/pre><\/div>\n\n\n\n<ol start=\"3\"><li>Compile the application:<\/li><\/ol>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-php\">php bin\/magento setup:di:compile<\/code><\/pre><\/div>\n\n\n\n<ol start=\"4\"><li>Deploy static content:<\/li><\/ol>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-php\">php bin\/magento setup:static-content:deploy<\/code><\/pre><\/div>\n\n\n\n<ol start=\"5\"><li>Flush the cache:<\/li><\/ol>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-php\">php bin\/magento cache:flush<\/code><\/pre><\/div>\n\n\n\n<h3>Step 3. Website Configuration<\/h3>\n\n\n\n<ol><li>Hyv\u00e4 doesn&#8217;t support text CAPTCHA, so you need to disable it and use Google reCAPTCHA:<\/li><\/ol>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-php\">php bin\/magento config:set customer\/captcha\/enable 0<\/code><\/pre><\/div>\n\n\n\n<ol start=\"2\"><li>To avoid problems with JavaScript and CSS, it is recommended to disable merging and minification:<\/li><\/ol>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-php\">php bin\/magento config:set dev\/template\/minify_html 0\nphp bin\/magento config:set dev\/js\/merge_files 0\nphp bin\/magento config:set dev\/js\/enable_js_bundling 0\nphp bin\/magento config:set dev\/js\/minify_files 0\nphp bin\/magento config:set dev\/js\/move_script_to_bottom 0\nphp bin\/magento config:set dev\/css\/merge_css_files 0\nphp bin\/magento config:set dev\/css\/minify_files 0<\/code><\/pre><\/div>\n\n\n\n<ol start=\"3\"><li>Enable the Hyv\u00e4 theme.<\/li><\/ol>\n\n\n\n<p>In the admin panel, navigate to <strong>Content &gt; Design &gt; Configuration<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" width=\"1175\" height=\"371\" src=\"https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2024\/10\/install-hyva-theme-1.png\" alt=\"Enable the Hyv\u00e4 theme: 1\" class=\"wp-image-2067\" srcset=\"https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2024\/10\/install-hyva-theme-1.png 1175w, https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2024\/10\/install-hyva-theme-1-300x95.png 300w, https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2024\/10\/install-hyva-theme-1-1024x323.png 1024w, https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2024\/10\/install-hyva-theme-1-768x242.png 768w\" sizes=\"(max-width: 1175px) 100vw, 1175px\" \/><\/figure><\/div>\n\n\n\n<p>Select the required store, website, or store view and activate the Hyv\u00e4 Default theme for it.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" width=\"1175\" height=\"371\" src=\"https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2024\/10\/install-hyva-theme-2.png\" alt=\"Enable the Hyv\u00e4 theme: 2\" class=\"wp-image-2068\" srcset=\"https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2024\/10\/install-hyva-theme-2.png 1175w, https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2024\/10\/install-hyva-theme-2-300x95.png 300w, https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2024\/10\/install-hyva-theme-2-1024x323.png 1024w, https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2024\/10\/install-hyva-theme-2-768x242.png 768w\" sizes=\"(max-width: 1175px) 100vw, 1175px\" \/><\/figure><\/div>\n\n\n\n<div class=\"wp-block-group pr-notice pr-notice-warning\"><div class=\"wp-block-group__inner-container\">\n<p><strong>Important Information:<\/strong><\/p>\n\n\n\n<p>If Hyv\u00e4 is selected at the store view level and \u201cNo Theme\u201d is chosen at higher levels, it may cause issues with the theme&#8217;s functionality. You should select the Hyv\u00e4 theme at the higher levels as well to ensure stable performance.<\/p>\n<\/div><\/div>\n\n\n\n<ol start=\"4\"><li>Generate configuration for the Hyv\u00e4 theme.<\/li><\/ol>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-php\">php bin\/magento hyva:config:generate<\/code><\/pre><\/div>\n\n\n\n<h3>Step 4. The Final Website Deployment<\/h3>\n\n\n\n<p>Execute the commands sequentially:<\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-php\">php bin\/magento setup:upgrade\nphp bin\/magento setup:di:compile\nphp bin\/magento setup:static-content:deploy\nphp bin\/magento cache:flush<\/code><\/pre><\/div>\n\n\n\n<h2>Conclusion<\/h2>\n\n\n\n<p>Installation of the Hyv\u00e4 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.<\/p>\n\n\n\n<p>If you have any inquiries or would like to learn more about our <a href=\"\/hyva-theme-development\" target=\"_blank\" rel=\"noreferrer noopener\">Hyv\u00e4 development services<\/a>, please don&#8217;t hesitate to get in touch. We&#8217;re here to help!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hyv\u00e4 theme is a cutting-edge open-source frontend theme for Magento 2 built to speed up the website\u2019s performance. It is based on lightweight technologies, such as Alpine.js and Tailwind CSS, making Hyv\u00e4 hit outstanding performance results.<\/p>\n<p>Retailers shouldn\u2019t 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\u2019s why installing Hyv\u00e4 themes on Magento 2 stores is necessary to ensure high performance and maintain customer loyalty.<\/p>\n","protected":false},"author":10,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[165],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v16.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Install Hyv\u00e4 Theme on Magento 2: A Full Guide<\/title>\n<meta name=\"description\" content=\"Discover how to install Hyv\u00e4 theme on the Magento 2 store in just 4 steps. Improve your website&#039;s speed, functionality, and user experience!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/plumrocket.com\/learn\/install-hyva-theme\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Install Hyv\u00e4 Theme on Magento 2: A Full Guide\" \/>\n<meta property=\"og:description\" content=\"Discover how to install Hyv\u00e4 theme on the Magento 2 store in just 4 steps. Improve your website&#039;s speed, functionality, and user experience!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/plumrocket.com\/learn\/install-hyva-theme\" \/>\n<meta property=\"og:site_name\" content=\"Magento Tutorials for Beginners &amp; Professionals\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-24T12:37:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-27T13:50:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/plumrocket.com\/learn\/wp-content\/uploads\/2024\/10\/install-hyva-theme.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/posts\/2063"}],"collection":[{"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/comments?post=2063"}],"version-history":[{"count":21,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/posts\/2063\/revisions"}],"predecessor-version":[{"id":2186,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/posts\/2063\/revisions\/2186"}],"wp:attachment":[{"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/media?parent=2063"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/categories?post=2063"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/plumrocket.com\/learn\/wp-json\/wp\/v2\/tags?post=2063"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}