Magento 2 Theme Structure

In the webinar which is presented by the Magento team on 16 July, several major changes in themes as well as when upgrading from Magento 1 to 2 have been mentioned. As a result, it would involve a significant effort from the developer end.

In today article, I will provide you some information about the theme structure in Magento 2.

Magento 2 Theme Structure

• How Magento 2 theme structure looks
• Common directories

How Magento 2 theme structure looks

Below are how a typical theme structure looks like:

Learn more: How to create a custom theme for Magento 2

Magento 2 theme Common directories

Following are the typical theme directories:

• etc: Includes configuration files like the view.xml file that has image configurations for all images and thumbnails.

• i18n: Translation dictionaries, if there any available.

• media: Theme preview images can be put in this directory.

• web: Optional directory which has static files organized into the following files:

  • css/source: Includes a theme’s less configuration files which invoke mixins for global elements from the Magento UI library, and also the theme.less file which overrides the default variables values.

  • css/source/lib: Includes view files which override the UI library files that are stored in lib/web/css/source/lib.

  • fonts: you can place the different fonts for your theme in this folder.

  • images: folder of static images.

  • js: The folder which is used for your JavaScript files.

Conclusion

Above I have just provided you some basic information about the structure of Magento 2 theme. Hope it is helpful for you. Should you have any questions or new ideas, feel free to leave a comment below.