How to Create a Custom Theme in Magento 2?

Want to get started with a custom Magento 2 theme development? Learn here the step-wise method.

Magento 2 is an ideal e-commerce platform for brands looking for high-end customizations. It allows brands to create e-stores that match their visual branding and offer experiences that match their brand values. By default, it offers a Luma theme and a blank theme (as a base for custom theme development.)

Businesses can use the default Luma theme in production, but ideally, most businesses choose to develop a custom theme. And that’s why learning how to create a custom Magento 2 theme can be important for you as a developer.

Why Create a Custom Magento 2 Theme?

Custom Magento 2 theme development is crucial for several reasons. It helps the e-commerce business:

• Create a design that matches the brand’s identity
• Improve the website’s search engine-friendliness
• Deliver experiences that match brand ethics
• Make the site stand out from others

Overall, custom Magento 2 theme development is essential to creating an online store on the platform. Also when creating a custom theme in Magento 2, adding unique visual elements can make your store stand out, especially during seasonal events. For example, snowfall effect in Magento store.

Custom Magento 2 Theme Development: Prerequisites

Ideally, Magento 2 custom theme development requires you to have:

• Experience in Magento 2 development
• Knowledge of UX fundamentals
• Magento instance in a local environment

Let’s get started with the Magento custom theme development tutorial.

How to Create a Custom Magento 2 Theme?

Magento does not recommend modifying the default theme code. The Magento version upgrade may override these changes. Instead, it is recommended to create a new theme.

Follow the steps below to create a custom Magento 2 theme.

Step 1: Create a Theme Directory

You need to create a new directory for the custom Magento 2 theme.

• Go to the [root_directory]/app/design/frontend
• Create a new folder with the vendor name, for e.g., Meetanshi
• Inside the vendor folder, create another folder with the theme name, for e.g. MitTheme

Here’s what the Magento 2 custom theme directory will look like:

app/design/frontend/
├── Meetanshi/
│ │ ├──MitTheme/
│ │ │ ├── …
│ │ │ ├── …

Step 2: Declare Magento Theme

Now, you need to declare a new theme so Magento 2 can find it. To do that, create a theme.xml file in the [root_directory]/app/design/frontend/Meetanshi/MitTheme with the following code:

<theme xmlns_xsi="http://www.w3.org/2001/XMLSchema-instance" xsi_noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Meetanshi MitTheme</title>
<parent>Magento/Luma</parent>
<media>
<preview_image>media/MitTheme-image.jpg</preview_image>
</media>
</theme>

In the above code, we’ve specified the following:

• Title: Name of the custom theme
• Parent: Theme for fallback purpose
• Preview Image: Location of thumbnail image for the custom Magento 2 theme

Please note: In the above example, the preview image, i.e. MitTheme-image.jpg is located in the app/design/frontend/Meetanshi/MitTheme/media/ directory. You will need to upload the preview image to the media directory before specifying it in the theme declaration.

Step 3: Add Composer Package

Create a composer.json file to declare the libraries that your custom Magento 2 theme depends on. This is important to distribute your theme as a package.

Here’s an example of composer.json file:

{
    "name": "Meetanshi/MitTheme",
    "description": "N/A",
    "require": {
        "php": "~5.5.0|~5.6.0|~7.0.0",
        "magento/theme-frontend-blank": "100.0.*",
        "magento/framework": "100.0.*"
    },
    "type": "magento2-theme",
    "version": "100.0.1",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}

Step 4: Add Registration.php File

Next, create a registration.php file for the custom theme. Navigate to the app/design/frontend/Meetanshi/MitTheme and create a registration.php file with the following code:

<?php
/**
* Copyright © Magento. All rights reserved.
* See COPYING.txt for license details.
*/
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
'frontend/Meetanshi/MitTheme',
__DIR__
);

Step 5: Configure Custom Theme

Once you’ve declared the custom Magento 2 theme, you can configure it from the admin panel. Go to Stores > Configuration > Design and select the custom theme you created. For e.g., MitTheme in our case.

Click the “Save Config” button to apply changes.

And flush Magento 2 cache from the System > Cache Management.

Step 6: Configure Image Properties

To configure the image sizes on the frontend pages like product grids, you need to configure the view.xml file. Copy the view.xml file of the parent theme into /app/design/frontend/Meetanshi/MitTheme/etc/ directory and modify it to change the image sizes.

For e.g., you can modify the following snippet to change the dimensions of the category grid images;

...
  <image id="category_page_grid" type="small_image">
      <width>550</width>
      <height>550</height>
  </image>
...>

Step 7: Declare Logo in Custom Theme

To add a logo for your theme, you need to create a layout directory and define it. Navigate to /app/design/frontend/Meetanshi/MitTheme/Magento_Theme/layout/ and create default.xml with the following code:

<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">350</argument>
<argument name="logo_img_height" xsi:type="number">350</argument>
</arguments>
</referenceBlock>
</body>
</page>

Step 8: Add Basic Layout Elements

Magento pages are made up of containers and blocks. The containers contain the elements that appear on the page. For e.g., there are containers for the header, footer, etc.

Step 9: Define Layout Files Types & Conventions

The Magento 2 pages are rendered according to the layout files defined. Here are the basic conventional locations for different types of layouts:

• Base layouts: Layout files provided by modules. Conventional location:
  • Page configuration and generic layout files: /view/frontend/layout
  • Page layout files: /view/frontend/page_layout
• Theme layouts: Layout files provided by themes. Conventional location:
  • Page configuration and generic layout files: /_/layout
  • Page layout files: /_/page_layout

But it is recommended to create a child Magento theme on top of the default Luma or Blank theme. That’s because it can be overwhelming to define the custom Magento 2 layouts and elements.

You can utilize the child-parent theme relationship in Magento 2 and start customizing the base theme. You can always hire our Magento customization experts to get any help with custom theme development. You can customize your theme by adding sticky add to cart button to serve better user experience, without letting users browsing journey getting disturbed.