Mage Check Email contact icon magecheck@gmail.com Mage Check Contact number icon +40753364906
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
                    

                

                    
        



    
Cookies settings


    
    

                

    

        

                            

    
Required cookies

    

        
These cookies are required for proper operation of the website and can't be disabled.

                    
            
            

    

                            

    
Google Analytics

    

        
This website uses Google Analytics cookie. It allows us to understand how you interact with our content and to identify certain malfunctions.

                    
            
            

    

                            

    
Facebook Meta Pixel

    

        
This website uses Facebook Pixel Code cookie. This is used to track you across websites in order to show you relevant ads.