• Skip to primary navigation
  • Skip to content
  • Skip to footer

RedChamps

RedChamps Blog

Main navigation

  • Magento 1 Extensions
  • Magento 2 Extensions
  • Visit Store

Magento 2 Theme Directory structure:

Magento, Magento Training · June 30, 2020

Magento 2 themes are located in app/design/ and vendor folders. Each Magento 2 theme is connected to a certain area. Themes for admin panel are located at app/design/adminhtml folder, while app/design/frontend contains themes for frontend.

Themes in app/design are located at <area>/<ThemeVendor>/<theme_name> folders, where <ThemeVendor> is written with a capital letter in camelCase format, <theme_name> in lowercase. For example: app/design/frontend/RedChamps/my_theme.

Themes in /vendor are located at the following path /vendor/redchamps/theme-frontend-my-theme, where redchamps/theme-frontend-my-theme is the composer package name. Similar to modules, there are no requirements to composer package name, but for simplicity, it is better to name them as
“<vendor-name>/theme-<area>-<theme-name>”

Further in the next, we will use <theme_dir> to define the theme root directory, for this directory can be located both in app/design and in the vendor.

1. registration.php

A mandatory file that registers a theme in Magento.

2. theme.xml

A mandatory file with the theme configurations, like the name of the theme and its parent.

3. etc

Contains theme configuration files.

4. composer.json

Contains composer package configuration.

5. requirejs-config.js

Contains RequireJS config.

6. web

Contains theme css/js/fonts files.

7. media

Contains theme media files.

8. <ModuleVendor>_<ModuleName>

Common template for override view module files. For example, RedChamps_CustomModule. Inside the directories and files, the structure is similar to view/<area>/ folder inside the module (for example, app/code/RedChamps/CustomModule/view/frontend)

  • Facebook
  • Twitter
  • Google+

Filed Under: Magento, Magento Training

Sanchit

Sanchit is a Magento 2 developer at RedChamps, while not working he loves to read about new technologies going around in web development

Footer

Follow Us ON

  • Facebook
  • Twitter
Copyright © 2025 • Powered by RedChamps