How To Create New Theme In Magento 2

There are a number of differences and improvements to theme structure and the fallback system in Magento 2. The fallback system in Magento 2.x works in a similar way to Magento 1.x, but now has the added advantage of being able to create unlimited parent themes. In this tutorial, we will learn about: How to create new theme in Magento 2. This is an important basic knowledge that you should not ignore.

We’ll build theme file structure looks as follows:

app/design/frontend/Magetop/
 ├── default/
 │   ├── etc/
 │   │   ├── view.xml
 │   ├── media/
 │   │   ├── preview.jpg
 │   ├── web/
 │   │   ├── images/
 │   │   │   ├── logo.svg
 │   │   ├── css/
 │   │   │   ├── source/
 │   │   │   │   ├── _theme.less
 │   │   ├── fonts/
 │   │   ├── js/
 │   ├── registration.php
 │   ├── theme.xml
 │   ├── composer.json

Before going to the article you should look at:

<Vendor> is theme vendor. ex: Magetop.

<theme> is theme name. ex: default

Creation of Magento 2 theme folder

app/design/frontend/<Vendor>/<theme>

And, Copy files theme.xml, registration.php, composer.json from vendor/magento/theme-frontend-blank.

Declaration of theme

Edit file theme.xml:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Magetop Default</title><!-- your theme's name, what you see in backend  -->
    <parent>Magento/blank</parent><!-- the parent theme, in case your theme inherits from an existing theme -->
    <media>
        <preview_image>media/preview.jpg</preview_image><!-- the path to your theme's preview image, what you see on home page -->
    </media>
</theme>

Developing composer package to distribute it

Edit file composer.json like this:

{
     "name": "magento/theme-frontend-default",
     "description": "N/A",
     "config": {
         "sort-packages": true
     },
     "require": {
         "php": "~7.1.3||~7.2.0",
         "magento/framework": "102.0.",
         "magento/theme-frontend-blank": "100.3."
     },
     "type": "magento2-theme",
     "license": [
         "OSL-3.0",
         "AFL-3.0"
     ],
     "autoload": {
         "files": [
             "registration.php"
         ]
     },
     "version": "100.3.0"
 }

Register the theme

Edit file registration.php:

<?php
 
use \Magento\Framework\Component\ComponentRegistrar;
 
ComponentRegistrar::register(ComponentRegistrar::THEME, 'frontend/Magetop/default', __DIR__);

We’ll be running Magento in developer mode. In developer mode, Magento’s much more strict about PHP errors, will display raw exceptions, and make it easier to develop modules.

Open command prompt and change directory to your Magento install directory. Run the following command in the command prompt:

php bin/magento deploy:mode:set developer

Now, we go to backend check our theme was complete register.

Select Themes in CONTENT
Magetop Default

Creating statistic files and folders:

Create directories to store the static files: styles, fonts, JavaScript and images. Each type should be stored in a separate sub-directory web in your theme folder.

app/design/frontend/Magetop/default/
 ├── web/
 │ ├── css/
 │ │ ├── source/ 
 │ ├── fonts/
 │ ├── images/
 │ ├── js/

Configuring catalog product images

Copy files view.xml from vendor/magento/theme-frontend-blank/etc/ then edit it if you want. The properties of product images used on the storefront are stored in this file.

If you have logo.svg file you can update to your theme folder it will auto override logo default of Magento.

Or you can change different file formats such as png, jpg but you have to declare it.

To declare a theme logo, add an extending default.xml to /Magento_Theme/layout/default.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="logo">
            <arguments>
                <argument name="logo_file" xsi:type="string">images/logo.png</argument>
                <argument name="logo_img_width" xsi:type="number">300</argument> 
                <argument name="logo_img_height" xsi:type="number">300</argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Then you update file logo.png to <theme_dir>/web/images/

Apply we theme then see it on the frontend

Go to Backend > Content > Configuration then click edit to choose our theme

Design Configuration
Main Website choose theme

Now you can refresh cache then go to frontend to see your changes applied. Good luck!

This is How to create new theme in Magento 2.

You can see the next post: Customize cover, illustration layout in Magento 2.

Follow us for more helpful tutorial!

We hope this is useful blog for you.

Thank you for reading!

5 1 vote
Article Rating

Adam Roger

CEO and Founder of Magetop. A friend, a husband and a dad of two children. Adam loves to travel to experience new cultures and discover what is happening with ecommerce all around the world.

Leave a Reply or put your Question here

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x