>Magento 2 Theme Structure

Magento 2 Theme Structure

As you know, theme structure in Magento 2 (M2) has been more optimal than Magento 1 (M1). If you look over the directory structure in M2 and compare with structure in M1, you probably notice this.

The theme architecture in M2 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 directiories as M1.

For understanding the structure of the theme clearly, we will go to the files and directories detail within it.

1. Theme directory (Vendor_name/theme_name)

Example: create new theme with full name Bss/market in directory below.

app/design/frontend/

After created 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 files 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.xml

In which: theme.xml file will be 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 same level with theme.xml file.

app/design/frontend/Bss/market/registration.php

In 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 M2.

3. file/directory structure when we working on theme

After created the theme in these steps above. We will go into the details of directory and files when customizing a theme.

As you see the theme directory structure in M2 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 website.

Example: Your module name is Bss_Megamenu or 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 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 extend from parent theme and you don’t have any changes of config in this file). Basically, the file (view.xml) contains these config for the width and height of images showing on 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 skin of your theme such as: css (less files), js, images, font.

That’s it. If you already know the Magento 2 theme structure, lets go to the article “How to create a new theme in Magento 2

< Previous Post
Next Post >