Magento 2 Theme File 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 file structure in Magento 2.

Theme File Structure

• How theme file structure looks
• Common directories

How theme file structure looks

Below are how a typical theme file structure looks like:

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

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 file structure of the theme. Hope it is helpful for you. Should you have any questions or new ideas, feel free to leave a comment below.