How To Create New Theme In Magento 2

January 2, 2020July 22, 2021 Adam Roger 0 Comments Create New Theme In Magento, Create New Theme In Magento 2, How To Create New Theme In Magento, How To Create New Theme In Magento 2, magento 2 tutorials, Magento 2.3 create New Theme

Table Of Contents hide

1 Creation of Magento 2 theme folder

2 Declaration of theme

3 Developing composer package to distribute it

4 Register the theme

5 Creating statistic files and folders:

6 Configuring catalog product images

7 Declaring theme logo

8 Apply we theme then see it on the frontend

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.

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.

Declaring theme logo

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

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.

We hope this is useful blog for you.

Thank you for reading!

5 1 vote

Article Rating

Magetop Blog