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