As you know, the Magento 2 file structure has been more optimal than the Magento file structure. If you look over the directory structure, you probably notice this.
You might WANT TO READ NOW >>> The Full Magento 2 Theme Inheritance Tutorial in 2020.
The theme architecture in Magento 2 is implemented in packaged form, theme in your website just places templates and skin files in this directory (app/design/frontend) but it does not split up as many directories as Magento.
TRY NOW the 3 most common ways to Install Magento 2 Themes – Safe and Well-performed.
After understanding the differences between the Magento 2 file structure and the Magento file structure clearly, we will go to the files and directories detail within it.
1. Theme directory (Vendor_name/theme_name)
Example: create a new theme with full name Bss/market in the directory below.
app/design/frontend/After created a new theme already, our new theme will have directory structure: app/design/frontend/Bss/market.
In which:
+ Bss is equivalent to Vendor_name
+ market is equivalent to theme_name.
2. Declare the configuration Magento 2 file structure for our theme
File theme.xml: this file is in the path of theme directory which is created as above.
app/design/frontend/Bss/market/theme.xmlIn which: theme.xml file will define your theme name, also define the parent theme for it (in case if you need to extend your theme from any parent theme)
File registration.php: this file will the same level as the theme.xml file.
app/design/frontend/Bss/market/registration.phpIn which: This file will be responsible for registering your theme with the website system.
So only with two simple files above, you have declared the theme in Magento 2.
3. file/directory Magento 2 file structure when we working on the theme
After creating the theme in these steps above. We will go into the details of the directory and files when customizing a theme.
As you see the theme directory structure in Magento 2 as follow:
<theme_dir>/ (EX: app/design/frontend/Bss/market)
├── modules/
│ ├── web/
│ │ ├── css/
│ │ │ ├── source/
│ │ ├── js/
│ │ ├── images/
│ ├── layout/
│ ├── templates/
├── etc/
├── i18n/
├── media/
├── web/
│ ├── css/
│ │ ├── source/
│ ├── fonts/
│ ├── images/
│ ├── js/
├── registration.php
├── theme.xml
In which:
+ Directory <Modules> (app/design/frontend/Bss/market/<Modules>): this directory is your module name, third- party module name or module name of Magento. Each module will correspond to block and pages on the website.
Example: Your module name is Bss_Megamenu or the module name of Magento is Magento_Catalog.
In directory <modules> will contain these directories.
- web – Contains the CSS, Js and image files used to control the visual styling of <modules>.
- layout – Contains the layout files (ex: catalog_product_view.xml).
- templates – Contains the Template files (phtml).
+ Directory etc (app/design/frontend/Bss/market/etc): contain the view.xml file, this is directory and file is not mandatory (if your theme has been extended from the parent theme and you don’t have any changes of config in this file). Basically, the file (view.xml) contains these configs for the width and height of images showing on the frontend.
+ Directory i18n (app/design/frontend/Bss/market/i18n): this directory will contain the translate files of <modules> (CSV) (this directory is not required when your theme does not support multilanguage).
+ Directory media (app/design/frontend/Bss/market/media): This directory contains a theme preview (a screenshot of your theme).
+ Directory web (app/design/frontend/Bss/market/web): This directory contains the files related to the skin of your theme such as css (less files), js, images, font.
EXPLORE NOW more built-in solutions from BSS Commerce:
We are one of the leading Magento extension providers and web development services in the world. With experienced and certified Magento developers, we commit to bring high-quality products and services to optimize our business effectively. Let us know about your problems. We are willing to support you every time.
