Unlocking the Power of Magento 2 Theme Development: A Step-by-Step Guide

Magento 2 themes are critical in maintaining a consistent appealing look and feel around the store. Developers can customize the Magento admin panel and storefront with custom templates, patterns, and styles.

Magento 2 has two themes: Luma and Blank – which you can access after installing Magento 2. Luma is a demo theme, while Blank is a template for customizing Magento themes. Luma is a Magento 2 theme with no restrictions on use.

While going for Magento 2 upgrade services, the latest version may overwrite the default files. You go for Magento 2 development services to get enhance theme development

Here’s what you can learn about Magento theme development and how to make a custom theme.

How to Create a Custom Magento Theme

Here come 10 easy steps for Magento 2 Theme Development:

Establish a theme directory

For creating a Magento 2 theme, navigate to <your Magento 2 root directory>/app/design/frontend.

Add a new directory under the frontend directory that matches your theme vendor: /app/design/frontend/<Vendor>.

In your theme vendor directory, create a guide for your Magento 2 theme: /app/design/frontend/<Vendor>/m2-theme.

When you’re done setting up this structure, it’s time to specify the Magento 2 theme for Magento to recognize. Magento 2 offers the option of setting a theme as a default theme.

Declare Magento Theme

Make a theme.xml under app/design/frontend/Vendor/m2-theme/theme.xml and put this code in it:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
 <title> Vendor m2-theme</title>
 <parent>Magento/Luma</parent>
 <media>
  <preview_image>media/m2-theme-image.jpg</preview_image>
 </media>
</theme>
    

Under the <title> tag, add your theme’s name. Using the “parent” element, you can specify a fallback theme.

Check that you’ve got this thumbnail in the right place. Magento 2 admin will display an error if this file is not in the correct location.

Composer package

Composer is a PHP tool for managing dependencies. Declaring your project’s dependencies will manage them for you (install/update).

A Magento 2 theme is a Composer package, which means it will be registered as a package on the server. Optional: add composer.json.

Put Registration.php in there.

To register your theme with Magento, add a registration.php to your theme directory: app/design/frontend/Vendor/m2-theme/registration.php. However, add this code to your registration.php:

<?php
 /**
 * Copyright © Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
 \Magento\Framework\Component\ComponentRegistrar::register(
 \Magento\Framework\Component\ComponentRegistrar::THEME,
 'frontend/ Vendor/m2-theme',
 DIR
 );    
    

Configure Custom Theme

Once you have installed your theme on your file system, it will be activated and applied to your store. Visit the Magento 2 backend, Content → Design → Themes. The theme must appear on this list.

Upon seeing your theme here, navigate to Stores → Configuration → Design and choose your new theme. Once you have chosen your theme, press the Save Config button.
Then proceed to System → Cache Management → Tap Flush Magento Cache.

Adjust Image Properties

A view.xml file is required to configure the catalog and other image sizes. This file must be included when your custom Magento theme differs from the parent theme regarding product image sizes. A view.xml file sets the size of all product images in the storefront.

For example, you can set 350 x 350 pixels for the category grid product images. You need to copy the view.xml file from your parent theme’s etc. directory to the etc. directory of the theme you are creating.

Add a logo to a custom theme

In a default.xml file, add the following code to the Magento_Theme/layout directory to declare the theme logo. The file path for default.xml is /app/design/frontend/Vendor/m2-theme/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/m2-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>            
    

Customize Theme Layout

After you have the basic structure of your theme in place, all you have to do is modify or overwrite the layout to customize it.

Styling the theme

The Magento 2 application architecture is based on the model view controller pattern. In this case, we will concentrate on styling, which requires editing CSS or LESS. Since the Magento 2 theme is constructed using LESS, we’ll use it to edit it.

Layout override

For modifying a theme’s layout, the file must be placed at this location: /app/design/frontend/Magento/luma/Magento_Theme/layout/default.xml.

Conclusion

Now you have complete details on Magento 2 theme development. You can connect with magento 2 development company to get the best theme development services. If you are still confused with theme development, contact us and we will assist you with the best.