Magento 2 Tutorials

How to Create a Custom Theme in Magento 2

create 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:

<theme xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">

Registration of Theme

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

\Magento\Framework\Component\ComponentRegistrar::THEME, 'frontend/Magenticians/Mytheme', __DIR__

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:

<page xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<referenceBlock name="logo">
<argument name="logo_file" xsi:type="string">images/mytheme-logo.png</argument>
<argument name="logo_img_width" xsi:type="number">200</argument>
<argument name="logo_img_height" xsi:type="number">200</argument>

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:

rm -rf var/di/* var/generation/* var/cache/* var/log/* var/page_cache/* var/session/* var/view_preprocessed/* pub/static/*
php bin/magento setup:upgrade
php bin/magento setup:db-schema:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy
php bin/magento indexer:reindex
php bin/magento cache:clean
php bin/magento cache:flush

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


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!

Subscribe Newsletter

Subscribe to get latest Magento news

40% Off for 4 Months on Magento Hosting + 30 Free Migration