Monday, 13 February 2017

Creating custom theme in Magento 2

Hi Guys,

Here i will be providing explanation on how to create your own theme in Magento 2 so that you can play around with your design and look and feel :) 

Out-of-the-box Magento provides two default design themes:
        Luma, as a demonstration theme
        Blank as a basis for custom theme creation.

But if you want to customize the default design theme, you need to create a new theme as im going to show below:

1) Create your theme directory and declare your Magento2 theme: 

    Create a new Vendor folder(SachTheme) by navigating to:
    <your Magento 2 root directory>/app/design/frontend/SachTheme

   Create theme folder inside Vendor folder:  app/design/frontend/SachTheme/theme-new 

    Create theme.xml  under
   app/design/frontend/SachTheme/theme-new/theme.xml as

 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
<theme xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
   <title>Sach New Theme</title>

Copy the default media/preview.jpg from app/design/frontend/Magento/luma/media/preview.jpg
OR if the file is not found under the above path, use the one below:
Under :  vendor/magento/theme-frontend-luma/media/preview.jpg

2) Add registration.php to register your new custom Magento 2 theme

    To register your theme in the Magento system, you need to create registration.php file in your theme directory: app/design/frontend/SachTheme/theme-new/registration.php

 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.


3) Finally, clear var/cache and var/page_cache before logging into Magento 2 Admin.

     In the root of magento 2 in command prompt:  php bin/magento cache:flush

4) Navigate to:  Content-> Design-> Configuration and Select your newly created theme