In the recent webinar (16, July) presented by the Magento team , it was mentioned that there are major changes in themes and when upgrading from Magento 1.x to Magento 2, it will involve quite some effort from the developer end.

This blog is about themes and focuses on the differences between Magento 1.x and Magento 2 theme structure.

The two significant changes we can see in Magento 2 in terms of theme are

• Removal of skin directory from the root
• Introduction of a new directory ‘view’ in the module folder structure which actually completes the MVC structure in more structured way.

Module Specific Layouts and Templates :

By introducing ‘view’ element in the module folder structure, Magento 2 has separated the module specific theme and theme outside the module.

Have a look at ‘view’ directory for catalog module.

App/Code/Magento/Catalog/View

Img 1

 

 

The ‘view’ element has adminhtml and frontend directories.

Every module in Magento 2 can have its own adminhtml and frontend directory which is not available in Magento 1.x.

Frontend dir structure…

Img 2

 

 

Inside frontend directory apart from the layout and templates, we have a new directory web.

Unlike Magento 1.x , we don’t have to create a directory inside skin directory.Instead we can place all the module specific JS, CSS and images inside this web directory.

Module Specific Layouts :

Img 3

 

 

 

 

 

 

All the layout files should go in frontend/layout directory.

Another change brought to the Magento 2 is to divide handles into separate files. So now we have to create a xml file for each handle and the name of that file should be the handle name as we can see in the above image.

Module Specific Templates :

Module specific template (i.e: phtml files) should be placed inside the template directory in view.

Main Theme or Theme Outside the Module :

Location of the themes in magento 2 is same as magento 1.x, that is “app/design/frontend//”.

Magento theme directory typically would contain files as described the image below.

Img 4

 

 

 

 

 

 

 

 

 

 

 

 

Unlike Magento1.x we can see lots of directories here. Now let’s check what these directories hold…

etc Directory :

This directory has a file view.xml which contains image configuration for all storefront product images and thumbnails.

i18n DIrectory :

This directory contains the csv files for locales.

media Directory :

This directory contains the images for that theme.

web Directory :

This directory contains all the css and js files for that theme.

Apart from these directories all other directories inside the theme are to extend or override the default module specific theme.

Magento_catalog directory

Img 5

 

 

 

 

This directory has layout/catalog_product_view.xml file which is extended from the default layout of the catalog module.

Magento/Catalog/view/layout/frontend/layout/catalog_product_view.xml

Img 6

 

 

 

 

 

 

 

 

Similarly we can override any default template of the module from main theme by placing the template inside theme/_/template/.

It is good to see the way Magento 2 is shaping up. It has a long list of innovative features/functionalities  and a substantially improved admin and front end systems. With its improved front end architecture, the developers need to scale up and take advantage of the technology that Magento 2 is offering.

Leave a Reply

3 Comments on "Magento 2 Theme Structure"


Guest
Nandhakumar
8 months 6 days ago

thanks for this informations

admin
Admin
8 months 3 days ago

Hi Nandhakumar,

Thanks for reading our blog.
Please subscribe to our blog page for more such information.
http://www.dckap.com/blog/magento-2-theme-structure/#mailmunch-optin-form

Guest
Magento web development
2 years 3 months ago

Thanks for sharing detailed features of Magento theme structure.