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
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 inlib/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.
Enjoyed the tutorial? Spread it to your friends!
Featured Extensions







