How to Install a Fresh Theme in Magento 2 – Tutorial

Last Updated on January 21, 2022

This all-inclusive post will depict how to install Magento 2 theme in the simplest manner.

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?

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.

The more user-friendly and soothing your theme is, the better will be the users’ acquisition rate and ultimately, expeditious business growth.

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’ attention?

We’ve 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’s get started.

Method 1 – How to Install a New Theme in Magento 2

• 1. Download The Theme
• 2. Upload The Theme
• 3. Run Commands
• 4. Implement the New Theme

#Download a New Theme

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: pub and app.

#Upload The New Theme

For uploading the theme to your Magento 2 server, you can use any SFTP client, Filezilla, or WinScp. Make sure to upload pub and app files to the root directory of your Magento 2 store.

#Run Commands

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.

Command for upgrading the setup

php bin/magento setup:upgrade

Command for deploying the Static Content

php bin/magento setup:static-content:deploy

#Implement the New Theme

Access the admin panel of your Magento 2 store and follow the navigation Content—–Configuration

Click on the edit button besides the Theme name 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.

We are done with method 1 for installing Magento 2 theme. It’s time to hop on to method number 2.

Method 2 by Emizentech – How to Create a New Theme in Magento 2

In this method, we are going to take different approach for satiating your query “How to install Magento 2 theme.”

Our method 2 for Magento 2 theme installation is a three step process.

• 1. Disable Cache
• 2. Enable Developer Mode
• 3. Create Magento 2 theme

#Disable Cache

First, connect your Magento 2 server to SSH then run the given below command in root directory.

php bin/magento cache:disable

#Enable Developer Mode

Run the command given below in your Magento 2 store directory to enable the developer mode.

php bin/magento deploy:mode:set developer

# Create Magento2 Theme

Once you have disable cache and enable the developer mode, it’s high time to create Magento 2 customized theme.

You can created Magento 2 customized themes into

app/design/frontend/<Vendor>/<ThemeDir>

Make sure each Magento 2 theme has its own separate directory as mentioned below.

app/design/frontend/<Vendor>/
├──<theme1>
├──<theme2>/
├──<theme3>
├--...


Create Theme Directory Structure

Create the similar theme structure stated below for your preferred Magento 2 theme.


├──<theme1>/
├── theme.xml
├── composer.json
├── registration.php
├── etc/
├── i18n/
├── media/
├── web/
│ ├── css/
│ │ ├── source/
│ ├── fonts/
│ ├── images/
│ ├── js/
├──<Vendor>_<Module>/
│ ├── web/
│ │ ├── css/
│ │ │ ├── source/
│ ├── layout/
│ │ ├── override/
│ ├── templates/


In the above Magento 2 theme structure –

<Vendor> – Name of vendor you feed

<theme1> – Name of your preferred theme

/theme.xml – theme declaration file

/registration.php –Only needed to register your theme in the system

/etc/view.xml – Needed when your theme exists in the parent theme

/media – Required

Apart from knowing and implementing the Magento 2 theme structure, you should also the format of numerous theme structure elements.

Formant for theme declaration – theme.xml


<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" :noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>EmizenTech Morden Theme</title>
<parent>Magento/luma</parent>
<media>
<preview_image>media/preview.jpg</preview_image>
</media>
</theme>


Format for registration.php File


<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
'frontend/EmizenTech/modern',
__DIR__
);


Declare your logo

By default, Magento 2 uses logo.svg which is defined into your selected theme’s directory. You can declare your logo into layout configuration.


app/design/frontend/EmizenTech/modern/Magento_Theme/layout/default.xml



<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="logo">
<arguments>
<argument name="logo_file" xsi:type="string">images/emizen_logo.jpg</argument>
<argument name="logo_img_width" xsi:type="number">150</argument>
<argument name="logo_img_height" xsi:type="number">150</argument>
</arguments>
</referenceBlock>
<body>
</page>


After declaring the logo, login to Magento 2 admin panel and navigate to Content :: Design :: Themes

In the above image, you can see your created theme. Now, edit store view to select the new theme.

Conclusion

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.

To install Magento 2 themeon your Magento e-commerce store, you should hire experienced Magento 2 developers who can make the process of Magento 2 theme installation hassle-free and glitch free.