Featured post

Magento® 2.x How to create basic frontend module

How to create basic frontend module in Magneto 2 ?? Step 1. Decide a name space(Extendtree) & module name(Helloworld). Ex. Extendtre...

Saturday, 3 September 2016

Magento® 2.x How to create custom theme

How to create custom theme in Magneto 2 ??

Step 1. Create Theme Directory. Ex. magento2/app/design/frontend/extendtree/customtheme.

Step 2. Now create a theme.xml file. Directory will be like app/design/frontend/extendtree/customtheme/theme.xml

<theme xmlns:xsi=&#8221;http://www.w3.org/2001/XMLSchema-instance&#8221; xsi:noNamespaceSchemaLocation=&#8221;../../../../lib/internal/ Magento/Framework/Config/etc/theme.xsd&#8221;> <title>Extendtree custom theme</title> <parent>Magento/blank</parent> <media> <preview_image>media/customtheme.jpg</preview_image> </media> </theme>

Note: upload theme image inside directory: app/design/frontend/extendtree/customtheme/media/customtheme.jpg

Step 3. Add a composer.json file to the theme directory : magento2/app/design/frontend/extendtree/customtheme/composer.json

{ "name": "extendtree/customtheme", "description": "N/A", "require": { "php": "~5.5.0|~5.6.0|~7.0.0", "magento/theme-frontend-blank": "100.0.*", "magento/framework": "100.0.*" }, "type": "customtheme", "version": "100.0.1", "license": [ "OSL-3.0", "AFL-3.0" ], "autoload": { "files": [ "registration.php" ] } }

Step 4. Add registration.php file in theme directory: magento2/app/design/frontend/extendtree/customtheme/registration.php

<!--php /** * Copyright &#169; 2015 Magento. All rights reserved. * See COPYING.txt for license details. */ \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::THEME, 'frontend/extendtree/customtheme', __DIR__ ); </xmp--></strong></div></p> <p><strong>Step 5. </strong>Add file default.xml in directory <strong>magento2/app/design/frontend/extendtree/customtheme/Magento_Theme/layout/default.xml </strong></p> <p><div class="source-code" style="font-weight: 5px; background-color: #a5c878"><strong><xmp> <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">/web/images/customtheme_logo.png</argument> <argument name="logo_img_width" xsi:type="number">300</argument> <argument name="logo_img_height" xsi:type="number">300</argument> </arguments> </referenceBlock> </body> </page>

Note: custom theme logo need to upload in directory: /app/design/frontend/extendtree/customtheme/web/images/customtheme_logo

Step 6. That's it. Now your theme is fully configured with magento system. To confirm this check in backend :Admin-> Content > Design > Themes

Step 7. Now select your theme inside Admin-> Stores > Configuration > Design & clear the caches.


That's it..!!

Thank you..!!

"The easy way for everything."


  1. Great Article but you have missed last step in which you have to run some commands in the Magento root directory. Here's a full guide: https://magenticians.com/create-custom-theme-magento-2/

  2. Awesome blog. I enjoyed reading your articles. This is truly a great read for me. I have bookmarked it and I am looking forward to reading new articles. Keep up the good work!

  3. Thanks for sharing, I always create custom theme instead of buying any exisdting, and it is the best practice to get unique and 100% self made theme with your mind, Here's the guide that helped me while creating custom theme in Magento 2.