Use code MAG25 to get $25 off! Limited time offer on Cloudways Magento hosting.
AVAIL NOW

How to Create a Custom Theme in Magento 2

A theme is perhaps the most important component of any online store. If the theme of your store is not up to the mark and fails to attract visitors, there’s a fairly high chance that your customers won’t incline towards coming back.

Magento is one of the most popular and widely-used ecommerce platforms people base their online stores on. I’m going to assume that you have already installed Magento 2, considering you want to put a classy theme to it. In case you haven’t, you can download it from here, and to learn how to install it, you can check the following guides:

Install Magento 2 using Composer

Install Magento 2 on localhost

You get two themes by default when you install Magento 2: Luma and Blank. But if you want something more personal, you have to create a custom theme. Hence, today I’m going to show you how to create a custom theme in Magento 2.

Let’s get right to it!

Create Directories

Go the root directory of your Magento 2 and navigate to app/design/frontend. Now create new directories in it as shown below:

directoy structure

Magenticians: Vendor name of your theme.

Mytheme: The name of your theme

Magento_Theme / layout: For declaring a logo for the theme.

media: The preview image for the theme will be placed here.

web: Contains CSS, images, js folders.

Declaration of Theme

Create theme.xml file in app/design/frontend/Magenticians/Mytheme, and paste the following code in it:

Registration of Theme

Now create registration.php file in app/design/frontend/Magenticians/Mytheme and paste the following code in it

Upload Theme Preview Image

Go to app/design/frontend/Magenticians/Mytheme/media and upload your preview image (preview.jpg) here.

Declaration of Theme Logo

Go to app/design/frontend/Magenticians/Mytheme/Magento_Theme/layout and create a default.xml file. Paste the following code in it:

Upload Theme Logo

Go to app/design/frontend/Magenticians/Mytheme/web/images and upload your logo (mytheme-logo.png) here.

Apply Your Theme

Open the Admin panel of your Magento 2 and go to Content → Configuration.

content config

Now click on Edit as shown:

edit theme

Select Mytheme from the Applied Theme drop down menu and click on Save Configuration.

select theme

Run Commands

Open the SSH terminal and go to the root directory of your Magento 2. Now run all these commands one by one:

And you’re all done! Open the homepage of your store and you’ll see that your custom theme has been applied successfully.

output

Final Words

You can edit a theme to your heart’s content to make it look more attractive. However, editing the core files is not the right approach. Hence, a custom theme is required for this purpose. After following this tutorial, you should be able to create a custom theme in Magento 2. If you want to discuss anything related to this tutorial, just use the comment section below and let’s get chatting!

About Author

Syed Muneeb Ul Hasan is an expert in PHP and Magento, he prefers to educate users in implementing and learning Magento. When not working, he loves to watch cricket.

  • Developer

    Hi Syed Muneeb Ul Hasan,

    I have created a new theme. but my theme console showing the ”
    TypeError: require.config is not a function” after activate the new custom theme .
    Please advice me how can i solve it , I have tried removed static content , cache clear etc.

    Thanks,

    • The file which is giving you the error in console, you have to include it manually in your custom theme.

      • wais

        i have included the file manually, but i got autoload error.
        We can’t read some files that are required to run the Magento application. This usually means file permissions are set incorrectly.

  • For what Magento Version exactly is this tutorial? I follow the steps exactly how you described but looks like the theme isn’t showing up in the dashboard configuration of Magento 2.2.1. Am I missing something?

  • Ayaz ahmad

    I have followed the steps, my logo and css is not including in my theme. Content are appearing as of default theme but without logo and css.