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:

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="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd"> <title>Mytheme</title> <parent>Magento/blank</parent> <media> <preview_image>media/preview.jpg</preview_image> </media> </theme> 1 2 3 4 5 6 7 < theme xmlns : xsi = "http://www.w3.org/2001/XMLSchema-instance" xsi : noNamespaceSchemaLocation = "urn:magento:framework:Config/etc/theme.xsd" > < title > Mytheme < / title > < parent > Magento / blank < / parent > < media > < preview_image > media / preview . jpg < / preview_image > < / media > < / theme >

Registration of Theme

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

<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::THEME, 'frontend/Magenticians/Mytheme', __DIR__ ); 1 2 3 4 < ? php \ Magento \ Framework \ Component \ ComponentRegistrar :: register ( \ 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="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/mytheme-logo.png</argument> <argument name="logo_img_width" xsi:type="number">200</argument> <argument name="logo_img_height" xsi:type="number">200</argument> </arguments> </referenceBlock> </body> </page> 1 2 3 4 5 6 7 8 9 10 11 < 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 / mytheme - logo . png < / argument > < argument name = "logo_img_width" xsi : type = "number" > 200 < / argument > < argument name = "logo_img_height" xsi : type = "number" > 200 < / argument > < / arguments > < / referenceBlock > < / body > < / page >

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.

Now click on Edit as shown:

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

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/* 1 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 1 php bin / magento setup : upgrade

php bin/magento setup:db-schema:upgrade 1 php bin / magento setup : db - schema : upgrade

php bin/magento setup:di:compile 1 php bin / magento setup : di : compile

php bin/magento setup:static-content:deploy 1 php bin / magento setup : static - content : deploy

php bin/magento indexer:reindex 1 php bin / magento indexer : reindex

php bin/magento cache:clean 1 php bin / magento cache : clean

php bin/magento cache:flush 1 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!