{"id":17284,"date":"2018-11-15T14:26:06","date_gmt":"2018-11-15T12:26:06","guid":{"rendered":"https:\/\/belvg.com\/blog\/?p=17284"},"modified":"2025-02-11T10:36:14","modified_gmt":"2025-02-11T08:36:14","slug":"folder-structure-in-magento-2","status":"publish","type":"post","link":"https:\/\/belvg.com\/blog\/folder-structure-in-magento-2.html","title":{"rendered":"Folder Structure in Magento 2"},"content":{"rendered":"\n

This article will deal with the topic of the folder structure in Magento 2 theme. I will describe the folders and their functions and show you which folders are extremely useful for theme development and which ones are optional.<\/p>\n

<\/p>\n

Which folders can a theme contain?<\/a>
\nWhich folders are folders are optional and which are required?<\/a>
\nWhat is the purpose of each of the folders?<\/a><\/p>\n

<\/a>Which folders can a theme contain?<\/span><\/h2>\n

A certain theme can contain the folders for the extension of module styles, etc folder, i18n, media and web. The web folder, in its turn, contains css, js, fonts, images, template folders. You can see the graphic structure of a theme on the picture below; I decided to use the blank theme as an example.<\/p>\n

\"Folder<\/a><\/p>\n

<\/a>Which folders are optional and which are required?<\/span><\/h2>\n

 <\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Folder<\/b><\/td>\nRequired or optional<\/b><\/td>\nExample<\/b><\/td>\n<\/tr>\n
\/<\/span><name_Vendor>_<name_Module><\/b><\/td>\noptional<\/span><\/td>\nMagento_Theme, Magento_Catalog, Magento_Checkout and other<\/span><\/td>\n<\/tr>\n
\/<name_Vendor>_<name_Module>\/<\/span>layout<\/b><\/td>\noptional<\/span><\/td>\nMagento_Catalog\/<\/span>layout<\/b><\/td>\n<\/tr>\n
\/<name_Vendor>_<name_Module>\/layout\/<\/span>base<\/b><\/td>\noptional<\/span><\/td>\nMagento_Catalog\/layout<\/span>\/<\/span>base<\/b><\/td>\n<\/tr>\n
\/<name_Vendor>_<name_Module>\/<\/span>templates<\/b><\/td>\noptional<\/span><\/td>\nMagento_Catalog\/<\/span>templates<\/b><\/td>\n<\/tr>\n
\/<name_Vendor>_<name_Module>\/<\/span>email<\/b><\/td>\noptional<\/span><\/td>\nMagento_Sales\/<\/span>email<\/b><\/td>\n<\/tr>\n
\/<name_Vendor>_<name_Module>\/<\/span>email\/i18n<\/b><\/td>\noptional<\/span><\/td>\nMagento_Customer\/email<\/span>\/i18n<\/b>\/ar_SA<\/span><\/td>\n<\/tr>\n
\/etc<\/span><\/td>\nrequired if there is no parent theme<\/span><\/td>\n\/app\/design\/frontend\/Magento<\/span>\/<\/b>blank\/<\/span>etc<\/b><\/td>\n<\/tr>\n
\/i18n<\/span><\/td>\noptional<\/span><\/td>\n\/app\/design\/frontend\/Magento\/blank\/<\/span>i18n<\/b><\/td>\n<\/tr>\n
\/media<\/span><\/td>\nrequired<\/span><\/td>\n\/app\/design\/frontend\/BelVG\/caskers_theme\/<\/span>media<\/b><\/td>\n<\/tr>\n
\/web<\/span><\/td>\noptional<\/span><\/td>\nThis folder I’ll describe in more detail later in the article<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\"Igor

Partner With Us <\/h3>Let's discuss how to grow your business. Get a Free Quote.<\/span><\/div> Talk to Igor<\/a><\/div>\n

Let’s take a look at the web folder<\/strong>. I decided to draw your attention  to this very folder since it may be located in the folder that extends the module. I will explain you how everything works in Magento_Checkout<\/strong> using this module as an example. Now take a look at the table below:<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Folder<\/b><\/td>\nFolder description<\/b><\/td>\n<\/tr>\n
\/<name_Vendor>_<name_Module>\/<\/span>web<\/b>\/<\/span>css<\/b><\/td>\nThis folder as a rule contains CSS and Less files.<\/span>\n

Example: <\/span>\/Magento_Checkout\/<\/span>web<\/b>\/<\/span>css<\/b><\/p><\/td>\n<\/tr>\n

\/<name_Vendor>_<name_Module>\/<\/span>web<\/b>\/<\/span>js<\/b><\/td>\nThis folder as a rule contains JS files.<\/span>\n

Example: <\/span>\/Magento_Checkout\/<\/span>web<\/b>\/<\/span>js<\/b><\/p><\/td>\n<\/tr>\n

\/<name_Vendor>_<name_Module>\/<\/span>web<\/b>\/<\/span>template<\/b><\/td>\nThis folder as a rule contains templates for JS components and widgets. The file format is .html. <\/span>\n

Example: <\/span>\/Magento_Checkout\/<\/span>web<\/b>\/<\/span>template<\/b><\/p><\/td>\n<\/tr>\n

\/<name_Vendor>_<name_Module>\/<\/span>web<\/b>\/<\/span>templates<\/b><\/td>\nThis folder as a rule contains templates for JS components and widgets. The file format is .html. <\/span>\n

Example: <\/span>\/Magento_Checkout\/<\/span>web<\/b>\/<\/span>template<\/b><\/p><\/td>\n<\/tr>\n

\/<name_Vendor>_<name_Module>\/<\/span>web<\/b>\/<\/span>i18n<\/b><\/td>\nThis folder as a rule contains localized folders for the module, such as css\/, js\/, etc.<\/span>\n

Example: <\/span>Magento_Customer\/web\/<\/span>i18n\/ar_SA\/js\/<\/b><\/p><\/td>\n<\/tr>\n

\/<theme_dir>\/<\/span>web<\/b>\/<\/span>i18n<\/b><\/td>\nI mentioned this folder earlier, but here this folder is not for the module, but for the theme. As a rule, it contains localized folders and themes, such as css\/, js\/, etc.<\/span>\n

Example: \/app\/design\/frontend\/Magento<\/span>\/<\/b>blank<\/span>\/web\/i18n\/ar_SA\/css\/source\/_extend.less<\/b><\/p><\/td>\n<\/tr>\n

\/<theme_dir>\/<\/span>web<\/b>\/<\/span>css<\/b><\/td>\nI mentioned this folder earlier, but here this folder is not for the module, but for the theme.  As a rule, it contains .less variable style files.<\/span>\n

Example: \/app\/design\/frontend\/Magento<\/span>\/<\/b>blank\/<\/span>web\/css<\/b><\/p><\/td>\n<\/tr>\n

\/<theme_dir>\/<\/span>web<\/b>\/<\/span>fonts<\/b><\/td>\nThis folder as a rule contains font files.<\/span>\n

Example: \/app\/design\/frontend\/Magento\/luma\/<\/span>web<\/b>\/<\/span>fonts<\/b><\/p><\/td>\n<\/tr>\n

\/<theme_dir>\/<\/span>web<\/b>\/<\/span>images<\/b><\/td>\nThis folder contains image files for the theme of various sprites, theme logo, etc. <\/span>\n

Example: \/app\/design\/frontend\/Magento\/luma\/<\/span>web<\/b>\/<\/span>images<\/b><\/p><\/td>\n<\/tr>\n

\/<theme_dir>\/<\/span>web<\/b>\/<\/span>mage<\/b><\/td>\nThis folder contains files of Magento libraries such as jquery, jqueryui and various cms widgets. I do not recommend using this folder to replace components. Use requireJS instead.<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

<\/a>What is each folder responsible for?<\/span><\/h2>\n

 <\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Folder<\/b><\/td>\nFolder description<\/b><\/td>\n<\/tr>\n
\/<\/span><name_Vendor>_<name_Module><\/b><\/td>\nThis folder contains templates, layouts and the we folder.<\/span><\/td>\n<\/tr>\n
\/<name_Vendor>_<name_Module>\/<\/span>layout<\/b><\/td>\nThis folder contains layout extending files.<\/span>\n

Examples: <\/span>default.xml, default_head_blocks.xml, catalog_category_view.xml<\/b><\/p><\/td>\n<\/tr>\n

\/<name_Vendor>_<name_Module>\/layout\/<\/span>base<\/b><\/td>\nThis folder contains layout files, which override basic layouts.<\/span><\/td>\n<\/tr>\n
\/<name_Vendor>_<name_Module>\/<\/span>templates<\/b><\/td>\nThis folder contains template files.<\/span><\/td>\n<\/tr>\n
\/<name_Vendor>_<name_Module>\/<\/span>email<\/b><\/td>\nThis folder contains email template files.<\/span><\/td>\n<\/tr>\n
\/<name_Vendor>_<name_Module>\/<\/span>email\/18n<\/b><\/td>\nThis folder contains localized email template files.<\/span><\/td>\n<\/tr>\n
\/<\/span>etc<\/b><\/td>\nThis folder contains the view.xml configuration file.<\/span><\/td>\n<\/tr>\n
\/<\/span>i18n<\/b><\/td>\nThis folder .csv translations.<\/span><\/td>\n<\/tr>\n
\/<\/span>media<\/b><\/td>\nThis folder theme preview image.<\/span><\/td>\n<\/tr>\n
\/<\/span>web<\/b><\/td>\nI’ve already mentioned this folder above.<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n

As you can see, various folders are used for the theme development in Мagento 2, and each one is responsible for its technology stack and its module. Besides, you can always expand any module using the layout, JS and CSS folders.<\/p>\n

<\/a>
\"magento

Magento Custom Development<\/h3>

Take your online store to the next level with BelVG Magento Custom Development <\/p>Visit the page<\/span><\/a><\/div><\/div><\/div>\n\n","protected":false},"excerpt":{"rendered":"This article will deal with the topic of the folder structure in Magento 2 theme. …","protected":false},"author":8,"featured_media":17292,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"image","meta":{"_acf_changed":false,"footnotes":""},"categories":[35,491,389,469,473],"tags":[],"class_list":["post-17284","post","type-post","status-publish","format-image","has-post-thumbnail","hentry","category-certification","category-magento-2","category-magento2-development","category-magento2-tutorial","category-magento-front-end-developer","post_format-image"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t