{"id":11777,"date":"2020-05-27T13:59:41","date_gmt":"2020-05-27T11:59:41","guid":{"rendered":"http:\/\/blog.belvg.com\/?p=11777"},"modified":"2026-05-04T20:24:03","modified_gmt":"2026-05-04T18:24:03","slug":"magento-2-creating-a-new-theme","status":"publish","type":"post","link":"https:\/\/belvg.com\/blog\/magento-2-creating-a-new-theme.html","title":{"rendered":"How to Create New Magento 2 Themes"},"content":{"rendered":"\n

Here you will learn how to create new Magento 2 themes. Let’s look through all the steps you need to follow, including Magento theme declaration, registration, applying it in the admin panel, creating directories for CSS, JavaScript, images and fonts, theme logo definition and others. With our insightful guide, you will be able to create a theme without any difficulties.<\/p>\n

<\/p>\n

In this article, we are going to discuss creating themes in Magento 2. Compared to Magento 1, the latter version is considered to be a more up-to-date and upgraded platform. As for theme development, the main difference is that a modular code structure has been implemented. Now, all static files such as JS, CSS, and images are located in the web folder while the skin folder has been removed from the home directory.<\/p>\n

After completing the steps below, you can create your first theme, which can be used in the future as a template for your other themes:<\/p>\n

Magento theme directory
\n<\/a>Magento theme declaration
\n<\/a>Magento theme registration
\n<\/a>Adding Composer.json file
\n<\/a>Applying theme in the admin panel
\n<\/a>Creating directories for CSS, JavaScript, images & fonts
\n<\/a>Theme logo definition
\n<\/a>Image configuration
\n<\/a>Using LESS for changing styles
\n<\/a>Translations overview
\n<\/a>Extending and overriding layout
\n<\/a>Module templates
\n<\/a>Theme removal
\n<\/a>Magento theme structure<\/a><\/p>\n

Magento theme directory<\/h2>\n

Magento 2 themes are located in the \/app\/design\/frontend<\/em> folder. First, it’s necessary to create a Vendor<\/strong> folder and then create a theme folder inside of it.<\/p>\n

For example: \/app\/design\/frontend\/BelVG\/air<\/em>.<\/p>\n

BelVG is a vendor, air is a theme folder. It should be mentioned that developers<\/a> recommend to begin the name of a folder with a capital letter despite the fact this is not an indispensable condition.<\/p>\n

 <\/p>\n

\"magento<\/a><\/p>\n

Magento theme declaration<\/h2>\n

In order to define Magento themes, in the theme root folder you should create a theme .xml file with following details:<\/p>\n

<theme xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Config\/etc\/theme.xsd\">\r\n   <title>Air<\/title>\r\n   <parent>Magento\/luma<\/parent>\r\n   <media>\r\n  <preview_image>media\/air.jpg<\/preview_image>\r\n   <\/media>\r\n<\/theme><\/pre>\n
In the title<\/strong> tag, a subject name is defined. In the parent<\/strong> tag, a theme which is set as a parent one is defined. All unfound static files, as well as template files, will be taken from a parent theme. In this example, the “luma” theme bound with Magento 2<\/a> is defined. Whereas, Magento\/blank theme is considered to be a parent theme for “luma”. It is a basic theme, so there is no parent theme. Compared to Magento 1, there are no limits on the levels of inheritance and their quantity. In the preview_image<\/strong> tag, a thumbnail is defined to present a theme in the admin part.<\/p>\n
\"themes<\/a><\/p>\n
Magento theme registration<\/h2>\n
In order to register a theme in the system, in the theme folder you should create a registration.php file with following details:<\/p>\n
<?php\r\n\\Magento\\Framework\\Component\\ComponentRegistrar::register(\r\n\\Magento\\Framework\\Component\\ComponentRegistrar::THEME,\r\n'frontend\/<Vendor>\/<theme>',\r\n__DIR__\r\n);<\/pre>\n
In our case, there will be:<\/p>\n
<?php\r\n\\Magento\\Framework\\Component\\ComponentRegistrar::register(\r\n\\Magento\\Framework\\Component\\ComponentRegistrar::THEME,\r\n'frontend\/Belvg\/air',\r\n__DIR__\r\n);<\/pre>\n
 <\/p>\n
\"magento<\/a><\/p>\n
Adding Composer.json file<\/h2>\n
It is not necessary, but you may create a composer.json<\/strong> file to spread a theme as a composer package.
\nFor example, let’s take a composer.json<\/strong> file from “luma” theme:<\/p>\n
{\r\n\"name\": \"magento\/theme-frontend-luma\",\r\n\"description\": \"N\/A\",\r\n\"require\": {\r\n\"php\": \"~5.6.5|7.0.2|7.0.4|~7.0.6\",\r\n\"magento\/theme-frontend-blank\": \"100.1.*\",\r\n\"magento\/framework\": \"100.1.*\"\r\n},\r\n\"type\": \"magento2-theme\",\r\n\"version\": \"100.1.6\",\r\n\"license\": [\r\n\"OSL-3.0\",\r\n\"AFL-3.0\"\r\n],\r\n\"autoload\": {\r\n\"files\": [\r\n\"registration.php\"\r\n]\r\n}\r\n}\r\n<\/pre>\n
Applying theme in the admin panel<\/h2>\n
Proceed to the section Content<\/strong> —> Design<\/strong> —> Themes<\/strong> and make sure that the created theme is on the list:<\/p>\n
\"magento<\/a><\/p>\n
If we see the necessary theme on the list, go to Content<\/strong> → Design<\/strong> → Configuration<\/strong> and then click Edit<\/strong> for the website or web store that you want to apply your theme to. Select a theme and save settings.<\/p>\n
\"magento<\/a><\/p>\n
Creating directories for CSS, JavaScript, images and fonts<\/h2>\n
Let’s create a folder for theme static files. The structure should be following:<\/p>\n
app\/design\/frontend\/<Vendor>\/<theme>\/<\/i><\/code><\/p>\n
├──web\/
\n│├──css\/
\n││├──source\/
\n│├──fonts\/
\n│├──images\/
\n│├──js\/<\/p>\n
If everything related to CSS, fonts, images and JS folders is clear, there is still a question about a source folder and the way it should be used.<\/p>\n
Magento 2 incorporates LESS, a CSS pre-processor that simplifies the management of complex CSS files. To define styles of a store, you can use both CSS and LESS stylesheets.<\/p>\n
If your theme inherits from the Magento out-of-the-box Blank or Luma theme, you can override the default LESS files.<\/p>\n
As an example, we can create a _theme.less<\/strong> file with basic variables override in Magento UI. In the \/lib\/web\/css\/source\/lib\/variables\/<\/strong> folder in source files we can find default values for those variables which can be overridden. The module styles can be set in a _module.less<\/strong> file as well as for widgets it can be performed in a _widgets.less<\/strong> file. For minor corrections, it is possible to create a _extend.less<\/strong> file. So as an example we’re going to change a _theme.less<\/strong> file.<\/p>\n
Now we have the following structure:<\/p>\n
 <\/p>\n
\"magento<\/a><\/p>\n
Theme logo definition<\/h2>\n
In Magento 2, logo.svg <\/strong>is located in <theme_dir>\/web\/images<\/code> by default. Logo format is SVG by default.<\/p>\n
In order to use your own logo, you should:<\/p>\n
    \n
  1. If your logo is .svg, you should rename as logo.svg and put in <theme_dir> \/web\/images<\/code><\/li>\n
  2. If your logo has another format, it should be declared. For logo declaration it’s necessary to add a file <theme>\/Magento_Theme\/layout\/default.xml<\/code>.<\/li>\n<\/ol>\n
    In this case, we extend the layout of a parent theme. Then in the layout, the data on the logo should be added.<\/p>\n
    For example, the logo.png<\/strong> logo with the size 70×40 will be declared as:<\/p>\n
    <page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\r\n<body>\r\n<referenceBlock name=\"logo\">\r\n<arguments>\r\n<argument name=\"logo_file\" xsi:type=\"string\">images\/logo.png<\/argument>\r\n<argument name=\"logo_img_width\" xsi:type=\"number\">70<\/argument>\r\n<argument name=\"logo_img_height\" xsi:type=\"number\">40<\/argument>\r\n<\/arguments>\r\n<\/referenceBlock>\r\n<\/body>\r\n<\/page><\/pre>\n
    Image configuration<\/h2>\n
    The function is considered to be a rather useful one in Magento 2. Product images configuration such as size, proportions, cutting, background color is described in the file <theme>\/etc\/view.xml<\/code>. The file is required, so in case it wasn’t inherited from Magento 2 default theme “luma” or “blank”, it is necessary to copy it from a default theme (values are not inherited).<\/p>\n
    Let’s consider the example. On the main page, products are displayed with the widget. Now decrease images from 240×300 to 200х200.<\/p>\n
    <?xml version=\"1.0\"?>\r\n<view xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Config\/etc\/view.xsd\">\r\n<media>\r\n<images module=\"Magento_Catalog\">\r\n...\r\n<image id=\"new_products_content_widget_grid\" type=\"small_image\">\r\n<width>200<\/width>\r\n<height>200<\/height>\r\n<\/image>\r\n...\r\n<\/media>\r\n...\r\n<\/view><\/pre>\n
     <\/p>\n
    \"magento<\/a><\/p>\n
     <\/p>\n
    new_products_content_widget_grid<\/strong> is unique within theme. Type small_image coincides with Small Image Role<\/strong> in admin part. Permitted values are image, small_image, swatch_image, swatch_thumb and thumbnail.<\/p>\n
     <\/p>\n
    \"magento<\/a><\/p>\n
     <\/p>\n
    After saving an item, all images are cached. That’s why after size alteration a command php bin\/magento catalog:images:resize<\/code> can be executed for images regeneration.<\/p>\n
    As a result, we have the same “Luma” but with another logo and image size.<\/p>\n
     <\/p>\n
    \"magento<\/a><\/p>\n
    Using LESS for changing styles<\/h2>\n
    After a theme has been created, but before starting to change the styles, you should decide which LESS compilation mode should be used. There are two modes available in Magento:<\/p>\n
    – server-side compilation mode;
    \n– client-side (recommended for theme development).<\/p>\n
    Client compilation is used during development mode, as all changes performed can be seen in a moment. A browser will compile every time when calling styles file. If it’s server compilation, you should remove folder contents pub\/static and var\/view_preprocessed manually. These actions can be optimized with Grunt. It tracks any changes in files, removes definite folders and compiles LESS automatically.<\/p>\n
    The compilation type can be changed in admin panel: Stores -> Configuration -> Advanced -> Developer -> Frontend Development Workflow -> Workflow type:<\/p>\n
    \"frontend<\/a><\/p>\n
    Attention!<\/strong><\/p>\n
    Client side LESS compilation setting are available in default and developer mode:<\/p>\n
    bin\/magento deploy:mode:set default<\/code>
    \nbin\/magento deploy:mode:set developer<\/code><\/p>\n
    In production mode, we only have server side LESS compilation:<\/p>\n
    bin\/magento deploy:mode:set production<\/code><\/p>\n
    Let’s apply server compilation which is considered as default. We’re going to set background color as well as fonts in the file _theme.less.<\/p>\n
    @panel__background-color: darken(@page__background-color, 20%)
    \n@text__color: #fff
    \n@font-family__base: ‘Arial’, sans-serif<\/p>\n
    Since we’ve applied server-side compilation mode, after changes we need to remove directories contents \/pub\/static\/frontend\/Belvg\/air\/en_US и var\/view_preprocessed.<\/p>\n
    Let’s observe the changes:<\/p>\n
    \"magento<\/a><\/p>\n
    As we can see, the template structure in Magento 2 pretty differs from Magento 1.x. The structure has been improved, so now it’s much more logical, all the theme files are structured, which is very convenient for search.<\/p>\n
    Translations overview<\/h2>\n
    In Magento 1.9.x, for CVS files storage, a local folder is created in the theme folder. Then a language folder is created, for example, ru_RU, and within it, a file translate.csv.with is created. In Magento 2, it is has been changed. An i18n folder should be created in the theme root. Then in the i18n folder, a file with translation is created, e.x. da_DK.csv.<\/p>\n
    Example: \/app\/design\/frontend\/Belvg\/air\/i18n\/da_DK.csv<\/em><\/p>\n
    In order to generate a translation file in the folder you may use i18n tool. The command can be executed in home directory in Magento 2:<\/p>\n
    php bin\/magento i18n:collect-phrases –output=”app\/design\/frontend\/Belvg\/air\/i18n\/da_DK.csv” app\/design\/frontend\/Belvg\/air
    \nAll lines are compiled into a dictionary, then a dictionary file is created: app\/design\/frontend\/Belvg\/air\/i18n\/da_DK .csv. Translation file has the same format as in Magento 1.<\/p>\n
    Let’s generate a localization file by using default theme “luma” and execute a command: php bin\/magento i18n:collect-phrases –output=”app\/design\/frontend\/Belvg\/air\/i18n\/da_DK.csv” app\/design\/frontend\/Magento\/luma<\/p>\n
    Here is the result:<\/p>\n
    \"magento<\/a><\/p>\n
    Extending and overriding layout<\/h2>\n
    Layouts in certain themes can be extended or overridden in Magento 2<\/a>.<\/p>\n
    Let’s extend a layout:<\/p>\n
    In order not to copy page layouts or common layouts from a default theme, you should define extending layout. For example, to customize the layout defined in <Magento_Catalog_module_dir>\/view\/frontend\/layout\/catalog_product_view.xml<\/code> you need to add a layout file with the same name in your custom theme, like the following: <theme_dir>\/Magento_Catalog\/layout\/catalog_product_view.xml<\/code><\/p>\n
    To add an extending layout file page put the file in the following location:<\/p>\n
    <theme_dir><\/code><\/p>\n
    |__\/<Namespace>_<Module><\/p>\n
    |__\/layout<\/p>\n
    |–<layout1>.xml<\/p>\n
    |–<layout2>.xml<\/p>\n
    Let’s override a layout:<\/p>\n
    Main basic layouts can be overridden by creating a folder override\/base in the theme module folder:<\/p>\n
    <theme_dir><\/code><\/p>\n
    |__\/<Namespace_Module><\/p>\n
    |__\/layout<\/p>\n
    |__\/override<\/p>\n
    |__\/base<\/p>\n
    |–<layout1>.xml<\/p>\n
    |–<layout2>.xml<\/p>\n
    These files override the following layouts:<\/p>\n
    <module_dir>\/view\/frontend\/layout\/<layout1>.xml<\/code><\/p>\n
    <module_dir>\/view\/frontend\/layout\/<layout2>.xml<\/code><\/p>\n
    Besides, parent theme layouts can be overridden as well by creating a folder override\/base in the theme module folder:<\/p>\n
    <theme_dir><\/code><\/p>\n
    |__\/<Namespace_Module><\/p>\n
    |__\/layout<\/p>\n
    |__\/override<\/p>\n
    |__\/theme<\/p>\n
    |__\/<Parent_Vendor><\/p>\n
    |__\/<parent_theme><\/p>\n
    |–<layout1>.xml<\/p>\n
    |–<layout2>.xml<\/p>\n
    These files override the following layouts:<\/p>\n
    <parent_theme_dir>\/<Namespace>_<Module>\/layout\/<layout1>.xml<\/code><\/p>\n
    <parent_theme_dir>\/<Namespace>_<Module>\/layout\/<layout1>.xml<\/code><\/p>\n
    Modules templates<\/h2>\n
    Templates are stored in the following locations:<\/p>\n
    Module templates: <module_dir>\/view\/frontend\/templates\/<path_to_templates><\/code><\/p>\n
    Theme templates: <theme_dir>\/<Namespace>_<Module>\/templates\/<path_to_templates><\/code><\/p>\n
    Templates in contrast to the layout you can only override.<\/p>\n
    So in case if we want to override a template for search page that are located in the directory \\app\\code\\Magento\\CatalogSearch\\view\\frontend\\templates\\result.phtml<\/code>, the path to templates will be following: \\app\\design\\frontend\\Belvg\\air\\Magento_CatalogSearch\\templates\\result.phtml<\/code><\/p>\n
    <\/a>
    \"Magento
    Magento Development<\/h3>
    Take your online store to the next level with BelVG Magento Development <\/p>Visit the page<\/span><\/a><\/div><\/div><\/div>\n
    Theme removal<\/h2>\n
    If a theme is a Composer package, it can be removed with a command:<\/p>\n
    Magento theme:uninstall [--backup-code] [-c|--clear-static-content] {theme path} ... {theme path}<\/code><\/p>\n
    The {theme path}<\/code> here is the relative path to the theme, starting with the area name.<\/p>\n
    --backup-code<\/code> backs up the Magento 2 codebase as discussed in the paragraphs that follow.<\/p>\n
    --clear-static-content<\/code> cleans generated static view files, which is necessary to allows static view files to display properly.<\/p>\n
    In case if a theme is not a Composer package, you should carry out the following steps in order to remove a theme:<\/p>\n
      \n
    • Remove a theme app\/design\/frontend\/(Vendor) folder;<\/li>\n
    • Remove contents var\/view_preprocessed;<\/li>\n
    • Remove contents of pub\/static\/frontend\/;<\/li>\n
    • Open Magento 2 database, find theme table and remove a subject name line;<\/li>\n
    • Remove cache with a command php bin\/magento cache:flush<\/code>.<\/li>\n<\/ul>\n
      Magento theme structure<\/h2>\n
      The structure of a Magento theme directory typically would look like this:<\/p>\n
      <theme_dir>\/<\/code><\/p>\n
      ├── <Vendor>_<Module>\/<\/p>\n
      │ ├── web\/<\/p>\n
      │ │ ├── css\/<\/p>\n
      │ │ │ ├── source\/<\/p>\n
      │ ├── layout\/<\/p>\n
      │ │ ├── override\/<\/p>\n
      │ ├── templates\/<\/p>\n
      ├── etc\/<\/p>\n
      ├── i18n\/<\/p>\n
      ├── media\/<\/p>\n
      ├── web\/<\/p>\n
      │ ├── css\/<\/p>\n
      │ │ ├── source\/<\/p>\n
      │ ├── fonts\/<\/p>\n
      │ ├── images\/<\/p>\n
      │ ├── js\/<\/p>\n
      ├── composer.json<\/p>\n
      ├── registration.php<\/p>\n
      ├── theme.xml<\/p>\n
      Conclusion<\/h2>\n
      As you can see, the structure in Magento 2 is different from Magento 1.x. The theme structure has been significantly improved and now theme files are stored all together which makes the search much easier to use. But the modified structure is not the only significant point. Asynchronous modules load with RequireJS has been added. It can be performed without adding scripts in the head section. Instead of Prototype library, now jQuery\/jQuery UI is used. LESS is used instead of CSS which increases production rate when developing styles.  In addition, we have an opportunity to create themes as composer packages.<\/p>\n\n","protected":false},"excerpt":{"rendered":"Here you will learn how to create new Magento 2 themes. Let’s look through all …","protected":false},"author":82,"featured_media":26264,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"image","meta":{"_acf_changed":false,"footnotes":""},"categories":[14,389,526],"tags":[],"class_list":["post-11777","post","type-post","status-publish","format-image","has-post-thumbnail","hentry","category-magento","category-magento2-development","category-magento-theme","post_format-post-format-image"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t