PART 1.2 – Custom theme

In Magento documentation you will see general structure like app/design/frontend/<Vendor>/<theme>, which is project repository approach for theme.


  • Structure of Magento 2’s theme 
  • Required files
    • Theme.xml
    • Composer.json
    • Registration.php
  • Additional files
    • View.xml
    • Logo.svg
  • Exercise

Structure of Magento 2’s theme 

These directory names must match exactly.

Magento is pre-configured to look for each content type (web, layout, templates, i18n) in these directories of each theme.

Required files


• Contains the basic meta-information, including the theme name and the parent theme name

• Is the theme inherited from an existing theme

• This file is used by the Magento system to recognize the theme


<theme xmlns:xsi=”” xsi:noNamespaceSchemaLocation=”urn:magento:framework:Config/etc/theme.xsd”>

     <title>New theme</title> <!– your theme’s name –>

     <parent>Magento/blank</parent> <!– the parent theme, in case your theme inherits from an existing theme –>


         <preview_image>media/preview.jpg</preview_image> <!– the path to your theme’s preview image –>



Notice, you can specify your parent theme and preview image. Moreover as soon as you set your theme name once, you cannot change it easily, you will have to change it in database.


• composer.json provides theme dependency information.

• Seen only if your theme is a composer package

• Describes the theme dependencies and some meta information



    “name”: “magento/theme-frontend-luma”,

    “description”: “N/A”,

    “require”: {

        “php”: “~5.5.0|~5.6.0|~7.0.0”,

        “magento/theme-frontend-blank”: “100.0.*”,

        “magento/framework”: “100.0.*”


    “type”: “magento2-theme”,

    “version”: “100.0.1”,

    “license”: [




    “autoload”: {

        “files”: [






Declares a theme as a system component




 * Copyright © 2015 Magento. All rights reserved.

 * See COPYING.txt for license details.







Additional files


The file configures size of your images.



    <image id=”category_page_grid” type=”small_image”>





In the Magento application, the default format and name of a logo image is logo.svg. When you put a logo.svg image in the conventional location, which is <theme_dir>/web/images directory, it is automatically recognized as theme logo. 


Exercise 3.0

Please, create necessary files in your theme and set it up in admin panel.

In any case, you can follow documentation.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s