Mage Check Facebook icon Mage Check Linkedin icon

Magento How to create a Theme

Theme types

Magento 1 (2007 - 2014)

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 Open Source (2014 -)

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 Tutorial, located in MageCheck Module.

Step 1: Install Module\Extension

Install the module from initial page

Step 2: Create theme.xml

Magento 1 (2007 - 2014)

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


        
    

Magento 2 Open Source (2014 -)

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


        
    

Step 3: Configure Theme

Magento 1 (2007 - 2014)

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


        
    

Magento 2 Open Source (2014 -)

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


        
    

Step 4: Create Additional Files

Magento 1 (2007 - 2014)

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

skin/frontend/MageCheck/Tutorial/css

skin/frontend/MageCheck/Tutorial/css/myStyle.css

skin/frontend/MageCheck/Tutorial/images

skin/frontend/MageCheck/Tutorial/js

skin/frontend/MageCheck/Tutorial/js/myScript.js

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

Magento 2 Open Source (2014 -)

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


        
    

Step 5: Change Admin Settings

Magento 1 (2007 - 2014)

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 Open Source (2014 -)

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 Tutorial Theme, you'll have to create the following structure: app/design/MageCheck/Tutorial/web/images.

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