{"id":207,"date":"2019-11-19T10:00:56","date_gmt":"2019-11-19T10:00:56","guid":{"rendered":"https:\/\/www.emizentech.com\/blog\/?p=207"},"modified":"2022-01-21T11:45:00","modified_gmt":"2022-01-21T11:45:00","slug":"install-new-theme-magento-2","status":"publish","type":"post","link":"https:\/\/multisitelocal.ezxdemo.com\/blog\/install-new-theme-magento-2.html","title":{"rendered":"How to Install a Fresh Theme in Magento 2 &#8211; Tutorial"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"207\" class=\"elementor elementor-207\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-10717b9c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"10717b9c\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1155883f\" data-id=\"1155883f\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-784c8470 elementor-widget elementor-widget-text-editor\" data-id=\"784c8470\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"container\"><div class=\"blog_inner_text\"><div class=\"row\"><div class=\"col-lg-12\"><div class=\"blog-text casestudy-content text-justify\"><p>This all-inclusive post will depict how to install Magento 2 theme in the simplest manner.<\/p><p>For a Magento 2 e-commerce store to run in a full-fledged manner, the store should be fully-optimized at both frontend and backend level. Through the expertise of proficient Magento developers, you can optimize the backend of the store without much of a hitch. However, what about the frontend part?<\/p><p>The first and the foremost step in optimizing the frontend part as well as user-experience of your Magento 2 e-commerce store is installing a regaling and user-friendly theme on your e-commerce store.<\/p><p>The more user-friendly and soothing your theme is, the better will be the users&#8217; acquisition rate and ultimately, expeditious business growth.<\/p><p>The principal question pops up here is, how to install Magento 2 theme in your prevailing Magento 2 e-commerce store? Apart from the Magento 2 theme installation, another concern is how to select a user-friendly and lightweight theme that grabs users\u2019 attention?<\/p><p>We\u2019ve chalked out easy to follow steps that will help you to install Magento 2 theme without any fuss. Moreover, we are going to state 2 methods for installing in Magento 2 store. Let\u2019s get started.<\/p><\/div><\/div><\/div><div class=\"rocontentimg\"><div class=\"colss\"><div class=\"blog-text\"><h2><span class=\"ez-toc-section\" id=\"Method_1_%E2%80%93_How_to_Install_a_New_Theme_in_Magento_2\"><\/span>Method 1 \u2013 How to Install a New Theme in Magento 2<span class=\"ez-toc-section-end\"><\/span><\/h2><p>\u00a0<\/p><ul class=\"blog-table-point\"><li>1. Download The Theme<\/li><li>2. Upload The Theme<\/li><li>3. Run Commands<\/li><li>4. Implement the New Theme<\/li><\/ul><div class=\"blog-innertxt\"><h3><span class=\"ez-toc-section\" id=\"Download_a_New_Theme\"><\/span>#Download a New Theme<span class=\"ez-toc-section-end\"><\/span><\/h3><p>There are a plethora of websites prevailing on the Internet from where you can buy your coveted Magento 2 theme.The theme will be downloaded in a ZIP folder. You have to unzip files later. After unzipping files, you will get two directories: <b>pub<\/b> and <b>app<\/b>.<\/p><h3><span class=\"ez-toc-section\" id=\"Upload_The_New_Theme\"><\/span>#Upload The New Theme<span class=\"ez-toc-section-end\"><\/span><\/h3><p>For uploading the theme to your Magento 2 server, you can use any SFTP client, Filezilla, or WinScp. Make sure to upload <b>pub<\/b> and <b>app<\/b> files to the root directory of your Magento 2 store.<\/p><h3><span class=\"ez-toc-section\" id=\"Run_Commands\"><\/span>#Run Commands<span class=\"ez-toc-section-end\"><\/span><\/h3><p>To install your coveted Magento 2 theme, you need to connect your store server via SSH and upgrade the setup by running the command given below.<\/p><\/div><\/div><\/div><\/div><div class=\"col-lg-12\"><div class=\"blog-text casestudy-content\"><div class=\"blog-innertxt\"><h3><span class=\"ez-toc-section\" id=\"Command_for_upgrading_the_setup\"><\/span>Command for upgrading the setup<span class=\"ez-toc-section-end\"><\/span><\/h3><p><code class=\"d-block\">php bin\/magento setup:upgrade<\/code><\/p><h3><span class=\"ez-toc-section\" id=\"Command_for_deploying_the_Static_Content\"><\/span>Command for deploying the Static Content<span class=\"ez-toc-section-end\"><\/span><\/h3><p><code class=\"d-block\">php bin\/magento setup:static-content:deploy<\/code><\/p><h3><span class=\"ez-toc-section\" id=\"Implement_the_New_Theme\"><\/span>#Implement the New Theme<span class=\"ez-toc-section-end\"><\/span><\/h3><p>Access the admin panel of your Magento 2 store and follow the navigation <b>Content&#8212;&#8211;Configuration<\/b><\/p><p>Click on the edit button besides the <b>Theme name<\/b> section and select your theme which you have uploaded earlier. Refresh the home page of your Magento 2 store to see the newly uploaded theme.<\/p><p>We are done with method 1 for installing Magento 2 theme. It\u2019s time to hop on to method number 2.<\/p><\/div><div class=\"blog-text casestudy-content\"><h2><span class=\"ez-toc-section\" id=\"Method_2_by_Emizentech_%E2%80%93_How_to_Create_a_New_Theme_in_Magento_2\"><\/span>Method 2 by Emizentech \u2013 How to Create a New Theme in Magento 2<span class=\"ez-toc-section-end\"><\/span><\/h2><p>In this method, we are going to take different approach for satiating your query \u201cHow to install Magento 2 theme.\u201d<\/p><p>Our method 2 for Magento 2 theme installation is a three step process.<\/p><ul class=\"blog-table-point\"><li>1. Disable Cache<\/li><li>2. Enable Developer Mode<\/li><li>3. Create Magento 2 theme<\/li><\/ul><div class=\"blog-innertxt\"><h3><span class=\"ez-toc-section\" id=\"Disable_Cache\"><\/span>#Disable Cache<span class=\"ez-toc-section-end\"><\/span><\/h3><p>First, connect your Magento 2 server to SSH then run the given below command in root directory.<\/p><p><code class=\"d-block\">php bin\/magento cache:disable<\/code><\/p><h3><span class=\"ez-toc-section\" id=\"Enable_Developer_Mode\"><\/span>#Enable Developer Mode<span class=\"ez-toc-section-end\"><\/span><\/h3><p>Run the command given below in your Magento 2 store directory to enable the developer mode.<\/p><p><code class=\"d-block\">php bin\/magento deploy:mode:set developer<\/code><\/p><h3><span class=\"ez-toc-section\" id=\"_Create_Magento2_Theme\"><\/span># Create Magento2 Theme<span class=\"ez-toc-section-end\"><\/span><\/h3><p>Once you have disable cache and enable the developer mode, it\u2019s high time to create Magento 2 customized theme.<\/p><p>You can created Magento 2 customized themes into<br \/><code class=\"d-block\"> app\/design\/frontend\/\/<\/code><br \/>Make sure each Magento 2 theme has its own separate directory as mentioned below.<\/p><p><code class=\"d-block\"> app\/design\/frontend\/\/<br \/>\n\u251c\u2500\u2500<br \/>\n\u251c\u2500\u2500\/<br \/>\n\u251c\u2500\u2500<br \/>\n\u251c--...<br \/>\n<\/code><\/p><h3><span class=\"ez-toc-section\" id=\"Create_Theme_Directory_Structure\"><\/span>Create Theme Directory Structure<span class=\"ez-toc-section-end\"><\/span><\/h3><p>Create the similar theme structure stated below for your preferred Magento 2 theme.<\/p><p><code class=\"d-block\"><br \/>\n\u251c\u2500\u2500\/<br \/>\n\u251c\u2500\u2500 theme.xml<br \/>\n\u251c\u2500\u2500 composer.json<br \/>\n\u251c\u2500\u2500 registration.php<br \/>\n\u251c\u2500\u2500 etc\/<br \/>\n\u251c\u2500\u2500 i18n\/<br \/>\n\u251c\u2500\u2500 media\/<br \/>\n\u251c\u2500\u2500 web\/<br \/>\n\u2502 \u251c\u2500\u2500 css\/<br \/>\n\u2502 \u2502 \u251c\u2500\u2500 source\/<br \/>\n\u2502 \u251c\u2500\u2500 fonts\/<br \/>\n\u2502 \u251c\u2500\u2500 images\/<br \/>\n\u2502 \u251c\u2500\u2500 js\/<br \/>\n\u251c\u2500\u2500_\/<br \/>\n\u2502 \u251c\u2500\u2500 web\/<br \/>\n\u2502 \u2502 \u251c\u2500\u2500 css\/<br \/>\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 source\/<br \/>\n\u2502 \u251c\u2500\u2500 layout\/<br \/>\n\u2502 \u2502 \u251c\u2500\u2500 override\/<br \/>\n\u2502 \u251c\u2500\u2500 templates\/<br \/>\n<\/code><\/p><p>In the above Magento 2 theme structure \u2013<\/p><p><b><\/b> &#8211; Name of vendor you feed<br \/><b><\/b> &#8211; Name of your preferred theme<br \/><b>\/theme.xml<\/b> \u2013 theme declaration file<br \/><b>\/registration.php<\/b> \u2013Only needed to register your theme in the system<br \/><b>\/etc\/view.xml<\/b> \u2013 Needed when your theme exists in the parent theme<br \/><b>\/media<\/b> \u2013 Required<\/p><p>Apart from knowing and implementing the Magento 2 theme structure, you should also the format of numerous theme structure elements.<\/p><p><b>Formant for theme declaration \u2013 theme.xml<\/b><\/p><p><code class=\"d-block\"><br \/>\n<\/code><\/p><p>Magento\/luma<\/p><p>media\/preview.jpg<\/p><p><code class=\"d-block\"><\/code><\/p><p><b>Format for registration.php File<\/b><\/p><p><code class=\"d-block\"><br \/>\n<!--?php <br ?-->\\Magento\\Framework\\Component\\ComponentRegistrar::register(<br \/>\n\\Magento\\Framework\\Component\\ComponentRegistrar::THEME,<br \/>\n'frontend\/EmizenTech\/modern',<br \/>\n__DIR__<br \/>\n);<br \/>\n<\/code><\/p><p><b>Declare your logo<\/b><br \/>By default, Magento 2 uses logo.svg which is defined into your selected theme\u2019s directory. You can declare your logo into layout configuration.<\/p><p><code class=\"d-block\"><br \/>\napp\/design\/frontend\/EmizenTech\/modern\/Magento_Theme\/layout\/default.xml<br \/>\n<\/code><br \/><code class=\"d-block\"><\/code><\/p><p>images\/emizen_logo.jpg<br \/>150<br \/>150<\/p><p>\u00a0<\/p><p>After declaring the logo, login to Magento 2 admin panel and navigate to <b>Content :: Design :: Themes<\/b><\/p><p><img decoding=\"async\" src=\"https:\/\/www.emizentech.com\/blog\/wp-content\/uploads\/2019\/12\/new-theme.png\" alt=\"Install new theme Magento 2\" \/><\/p><p>In the above image, you can see your created theme. Now, edit store view to select the new theme.<\/p><p><img decoding=\"async\" src=\"https:\/\/www.emizentech.com\/blog\/wp-content\/uploads\/2020\/01\/theme-configuration-min.png\" alt=\"Magento 2 theme configuration\" \/><\/p><\/div><h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2><p>There area plethora of factors involved in the gargantuan success of an e-commerce store. However, a responsive and enticing theme is the most significant one.<\/p><p>To install Magento 2 themeon your Magento e-commerce store, you should hire experienced <a href=\"https:\/\/www.emizentech.com\/hire-magento-developer.html\" target=\"_blank\" rel=\"noopener\">Magento 2 developers<\/a> who can make the process of Magento 2 theme installation hassle-free and glitch free.<\/p><\/div><\/div><\/div><div class=\"col-lg-12\"><div class=\"author-block\"><div class=\"author-img\"><img decoding=\"async\" src=\"https:\/\/www.emizentech.com\/blog\/wp-content\/uploads\/2020\/01\/amit-samsukha.png\" alt=\"author profile\" \/><\/div><div class=\"author-details\"><div class=\"author-about\"><b>About Author<\/b><\/div><div class=\"author-name\">Author Name:<br \/><a class=\"author-link\" href=\"https:\/\/www.linkedin.com\/in\/amit-samsukha-5b207915\" target=\"_blank\" rel=\"noopener\">Amit Samsukha<\/a><\/div><div class=\"author-designation\"><label>Author Designation:<\/label><br \/>Certified Magento 2 Consultant<\/div><\/div><div class=\"author-bio\"><p><b>Author Bio:<\/b><\/p><p>I am a certified Magento developer and Magento 2 consultant with a stupendous experience in the e-commerce web development segment. My expertise can make your business objectives overcome any obstacle you are dealing with the Magento platform!<\/p><\/div><\/div><\/div><\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>This all-inclusive post will depict how to install Magento 2 theme.<\/p>\n","protected":false},"author":35,"featured_media":209,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"MSN_Categories":"Uncategorized","MSN_Publish_Option":false,"MSN_Is_Local_News":false,"MSN_Is_AIAC_Included":"Empty","MSN_Location":"[]","MSN_Add_Feature_Img_On_Top_Of_Post":false,"MSN_Has_Custom_Author":false,"MSN_Custom_Author":"","MSN_Has_Custom_Canonical_Url":false,"MSN_Custom_Canonical_Url":"","_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[78],"tags":[],"class_list":{"0":"post-207","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-magento"},"modified_by":"emizentech","featured_image_src":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2020\/01\/install-magento2-blog-2.jpg","featured_image_src_square":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2020\/01\/install-magento2-blog-2.jpg","author_info":{"display_name":"Amit Samsukha","author_link":"https:\/\/multisitelocal.ezxdemo.com\/blog\/author\/amit"},"_links":{"self":[{"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/posts\/207","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/users\/35"}],"replies":[{"embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/comments?post=207"}],"version-history":[{"count":0,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/posts\/207\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/media\/209"}],"wp:attachment":[{"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/media?parent=207"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/categories?post=207"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/tags?post=207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}