Magento themes

Overview

A theme is a core Magento component whose primary purpose is to control the appearance of your storefront. Themes use a combination of application elements, such as templates, layouts, styles, and images, and are highly extensible.

Custom theme development is one of two main methods of modifying Magento behavior and storefront appearance (extending modules is the other primary way, and the main way to tailor Magento behavior). Themes are the primary way to customize your Magento storefront appearance. Unlike modules, themes do not provide new business features (other than branding and web user experience).

Themes within a Magento installation relate to each other through inheritance, allowing you to customize an existing theme by defining it as a parent theme whose settings can be inherited by any designated child themes. Themes are also divided by area, allowing you to define themes that customize either the storefront or Magento Admin.

Magento 2.0 themes are also characterized by responsive web design. For more information on responsive design, see Overview of responsive web design in Magento.

For detailed information about working with themes, refer to Themes in the Frontend Developers Guide.

Theme location

The location of a theme in your Magento installation depends upon how you installed your theme. Magento knows to look in both vendor and app/design for themes. In Magento 2.0, each module and theme contain a registration.php file, which defines location information.

Areas also determine a theme’s location. Themes that affect the storefront are placed in the frontend area, while themes that affect the Admin panel are placed in adminhtml directory.

Location of themes in GitHub repository

In the Magento repository on GitHub, themes exist under app/design/frontend. For example, you can find the Magento Blank theme at https://github.com/magento/magento2/tree/develop/app/design/frontend/Magento/blank.

Location of themes when installing with Composer

We recommend using Composer to install your Magento application and components such as modules or themes. Composer places the theme you are installing under /vendor. For example, vendor/Magento/theme-frontend-blank is the root directory of the Composer package holding the Blank theme.

Location of custom themes

While developing a theme, place it under app/design. If you’ve defined the theme for a local project (that is, you intend to install it in one project only), place it under app/design. However, if you decide to sell the theme on Magento Marketplace, follow the instructions given there for uploading. When users download your theme from Magento Marketplace, they will use Composer to install the theme package, and Composer will automatically place it in vendor. (Essentially, /vendor holds all code that you have not written.)

Default Magento themes

The standard Magento installation provides two default themes:

  • Luma is for demonstration. It is applied when Magento is installed with sample data. You may explore Luma to better understand how Magento themes work.

  • Blank theme (applied if Magento is installed with no sample data) is a boilerplate for theme customization. The Blank theme is built on principles of responsive web design, so it’s a great tool to create your own responsive Magento themes.

Although your custom theme can be inherited from Luma (there is no problem in that), we recommend using Blank for new theme development. For more details, read about creating custom themes and theme inheritance.

Modules

Libraries

Language packages

Magento theme structure