CMS, Commerce, Magento, OpenSource

Creating a Custom Theme in Magento 2

A theme is a component of Magento 2 which gives a reliable look and feel to your entire store. By default, Magento 2 comes up with LUMA and BLANK themes. To have a theme of your own choice, you can easily create a custom theme in Magento 2. 

Following are the steps to create a theme.

Step 1: Create a Theme Directory

  1. Navigate to the <magento root>/app/design/frontend/ directory.
  2. Under the frontend directory, create a vendor directory for theme package:
    <magento root>/app/design/frontend/Tadigital

    Here, ‘Tadigital’ is the vendor name for the theme.

  3. Next, create a Theme directory under the vendor directory.
    <magento root>/app/design/frontend/Tadigital/customTheme

    Here, ‘customTheme’  is the name of the Theme Directory for our theme.


Directory Structure
Directory Structure

Step 2: Declare Theme.xml

  1. Create a theme.xml file in the root of your theme directory.
    <theme xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
         <title>Custom Theme</title> <!-- your theme's name -->
         <parent>Magento/blank</parent> <!-- the parent theme, in case your theme inherits from an existing theme -->

<title>: Specify the name of your theme
<parent>: Specifies the parent theme of your theme for fallback purposes.

Step 3:  Create registration.php file

  1. Create a registration.php file in your theme root directory to register the theme in Magento system.
  2. Specify the vendor name and the theme name in the registration.php file.
    use \Magento\Framework\Component\ComponentRegistrar; 
    ComponentRegistrar::register(ComponentRegistrar::THEME, 'frontend/Tadigital/CustomTheme', __DIR__);

Step 4:  Add Composer.json file

  1. Add composer.json to register your theme as a package. This step is optional.
        "name": "tadigital/customtheme", 
        "description": "N/A", 
        "config": { 
            "sort-packages": true 
        "require": { 
            "php": "~7.1.3||~7.2.0", 
            "magento/framework": "*", 
            "magento/theme-frontend-blank": "*" 
        "type": "magento2-theme", 
        "license": [ 
        "autoload": { 
            "files": [ 

Step 5: Theme Logo 

1. Create a directory called web/images under your root theme directory. Add a logo image to the images directory.

2. Navigate to app/design/frontend/<vendor name>/<theme name>/Magento_theme/layout and create a default.xml file. Add the following code to the XML file:

<page xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> 
        <referenceBlock name="logo"> 
                <argument name="logo_file" xsi:type="string">images/my_logo.png</argument> 
                <argument name="logo_img_width" xsi:type="number">300</argument> 
                <argument name="logo_img_height" xsi:type="number">300</argument> 

3. The first argument specifies the name of the logo.

4. Specifying the width and height of the image is optional.

Step 6: Apply Theme

  1. In the admin panel, navigate to Content -> Design -> Configuration. It displays the design configuration for the store views.
Design Configuration
Design Configuration

2. Click on the edit of the store view for which you want to apply the custom theme.

3. Select the custom theme from the Applied Theme drop-down menu and click on the Save Configuration button.

          4. The custom theme is applied to the store view with the logo. 


          5. In the admin panel navigate o Content -> Design -> Themes. It displays the grid of available themes for your site. 



In this way, you can easily create custom themes which reflects your own design and gives a unique look and feel to your website. Custom Themes are useful as they fulfil the requirements according to business needs.

About The Author