Close [x]

Magento Themes

Edit this page on GitHub

Magento themes

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鈥檚 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鈥檝e 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 theme (demonstration only) and Blank theme (boilerplate for theme customization).

  • Luma theme is for demonstration purposes only. Do not use it as a parent theme in your installation. Explore it to better understand Magento themes, but do not base customizations on it.

  • Blank theme is provided as a tool to aid your theme development. Use the Magento Blank theme as a basis for custom theme creation. Because Blank theme is built on principles of responsive web design, it makes an excellent starting point for developing responsive Magento themes.

Modules

Libraries

Language packages

Magento theme structure