Back to Top

Custom Theme in Magento 2

Updated 9 April 2024

Magento 2 Theme Development & Customisation – Today, we will learn how to create a custom theme in Magento 2. Let’s look through all the steps which are required to create a custom theme in Magento2.

Create a Magento 2 theme directory :

Magento 2 themes are located in the /app/design/frontend folder, so First, we have to create a Vendor folder and then create a theme folder inside of it.

E.g: app/design/frontend/Webkul/CustomTheme

Here, Webkul is a Vendor name and CustomTheme is the theme name.

Searching for an experienced
Magento 2 Company ?
Find out More

Magento theme declaration :

First, we should create a theme.xml file in the theme root folder with the following code:

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

Here, we set the theme’s title tag where we set the ThemeName and parent tag where we set the parent theme name because all unfound static files, as well as template files, will be taken from a parent theme. and In the preview_image tag, a thumbnail is defined to present a theme in the admin part.

Magento theme registration

To register the theme into the system, we need to create a registration.php file at the root directory of the theme folder.


Adding Composer.json file

This step is not necessary, but if you want to spread a theme as a composer package then you need to create a composer.json file in the root directory.

    "name": "Webkul/CustomTheme",
    "description": "This is a Custom Theme",
    "require": {
        "php": "~5.5.0|~5.6.0|~7.0.0",
        "Webkul/CustomTheme": "100.0.*",
        "magento/framework": "100.0.*"
    "type": "magento2-theme",
    "version": "100.0.1",
    "license": [
    "autoload": {
        "files": [

Now, run the Magento setup: upgrade and deploy commands and check our custom theme is available in the Admin area.

Proceed to the section Content —> Design —> Themes and make sure that the created theme is on the list:


If you apply the custom theme then proceed with Content → Design → Configuration and then click Edit for the website or web store that you want to apply your theme too. Select a theme and save settings.


Creating directories for CSS, JavaScript, images, and fonts

Let’s create folders for custom theme static files. The structure should be the following:



Theme logo definition

In Magento2, the logo format is SVG by default, and the logo.SVG is located in <theme_dir>/web/images

To add a custom logo then:

1> If the logo format is SVG then put in <theme_dir> /web/images

2> if the logo format is different then it’s necessary to add a file <theme>/Magento_Theme/layout/default.xml.

In this case, we extend the layout of a parent theme. Then in the layout, the data on the logo should be added.

For customlogo.png with the size 70×40 will be declared as:

<page xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <css src="css/style.css" />
        <referenceBlock name="logo">
                <argument name="logo_file" xsi:type="string">images/mytheme.png</argument>
                <argument name="logo_img_width" xsi:type="number">70</argument>
                <argument name="logo_img_height" xsi:type="number">40</argument>

The complete file structure will be:


If the theme is applied then the front page will look as follow.


Now, you can add CSS and JS to change the styling and override the Magento Layouts for styling.

This is a simple step for creating a custom theme in Magento 2.

Thanks !!

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*

Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home