How to create a Theme in Magento

Theme types

Magento 1

There are three themes in Magento - base, default, and RWD. To meet the latest design trends or client requirements we may need to customize the front-end design. We are going to create a child theme of rwd theme which is responsive.

Magento 2

There are number of improvements to the way themes are managed and set up in Magento 2. In this example, our theme is based on Magento Blank Theme. The name of it in this example will be Seasons, located in MageCheck Module.

Step 1: Create theme.xml

Magento 1

<?xml version='1.0' ?>

<theme>
	<parent>rwd/default</parent>
</theme>

File path: app/design/frontend/MageCheck/MCTheme/etc/theme.xml

Magento 2

<theme xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' xsi:noNamespaceSchemaLocation='urn:magento:framework:Config/etc/theme.xsd'>
	<title>MageCheck Seasons</title>
	<parent>Magento/blank</parent>
</theme>

File path: app/design/MageCheck/Seasons/theme.xml

Step 2: Configure Theme

Magento 1

<?xml version='1.0'?>

<layout version='0.1.0'>
    <default translate='label' module='page'>
        <reference name='root'>
            <reference name='head'>
                <action method='addItem'>
                    <type>skin_css</type>
                    <name>css/myStyle.css</name>
                </action>
                <action method='addItem'>
                    <type>skin_js</type>
                    <name>js/myScript.js</name>
                </action>
            </reference> 
        </reference>
    </default>
</layout>

File path: app/design/frontend/MageCheck/MCTheme/layout/local.xml

Magento 2

<?xml version='1.0' encoding='UTF-8'?>

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

File path: app/design/MageCheck/Seasons/layout/default.xml

Step 3: Create Additional Files

Magento 1

Now go to skin/frontend/ and create your package's skin folders and files as follows:

skin/frontend/MageCheck/MCTheme/css
skin/frontend/MageCheck/MCTheme/css/myStyle.css
skin/frontend/MageCheck/MCTheme/images
skin/frontend/MageCheck/MCTheme/js
skin/frontend/MageCheck/MCTheme/js/myScript.js

There you can configure the css file and javascript file to improve your custom theme design.

Magento 2

File path: app/design/MageCheck/Seasons/registration.php

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
	\Magento\Framework\Component\ComponentRegistrar::THEME,
	'frontend/magecheck/seasons',
	__DIR__
);

File path: app/design/MageCheck/Seasons/composer.json

{
    'name': 'magecheck/seasons',
    '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': 'magento2-theme',
    'version': '100.0.1',
    'license': [
        'OSL-3.0',
        'AFL-3.0'
    ],
    'autoload': {
        'files': [
            'registration.php'
        ]
    }
}

Step 4: Change Admin Settings

Magento 1

Now login to Magento admin panel and go to System > Configuration > General > Design and update the current theme with your new custom theme.

Go to System -> Cache Management and flush Magento cache. Open the storefront in order to see your new the applied.

Magento 2

To apply the new custom theme, you have to go in the admin panel, under Stores > Configuration > Design. On the Design Theme tab, select your newly created theme in the Design Theme drop-down.

To put your custom images in Seasons Theme, you'll have to create the following structure: app/design/MageCheck/Seasons/web/images.

And these are the basic files for creating a Custom Theme in Magento!

Contact us

Have you decided on an online Business Plan website?

Magento How to create a Theme

Theme types

Magento 1

Magento 2

Step 1: Create theme.xml

Magento 1

Magento 2

Step 2: Configure Theme

Magento 1

Magento 2

Step 3: Create Additional Files

Magento 1

Magento 2

Step 4: Change Admin Settings

Magento 1

Magento 2

Contact us

Cookies settings