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="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
   <title>Sach New Theme</title>
   <parent>Magento/blank</parent>
   <media>
       <preview_image>media/preview.jpg</preview_image>
   </media>
</theme>


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

<?php
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/SachTheme/theme-new',
    __DIR__
);

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


     
 

No comments:

Post a Comment