Contact us: +91 9010449276 | Email Us: [email protected]
How to create a luma child theme in Magento 2

How to create a luma child theme in Magento 2

How to create a luma child theme in Magento 2

In this article, I am going to explain how to create the Luma Child Theme in Magento 2.

Themes mainly define the look and feel of your store. Theme customizations using a parent theme are not recommendable.

By creating a child theme, there is no limitation for the level of the theme inheritance

If you want to customize your theme appearance, It is better to create a child theme in Magento 2 rather than making the changes in the parent theme. The reason, if you are making any changes in the parent core files, then later upgrading the Magento version which leads you in loss of theme changes in the parent theme.

To easily extend the theme and reduce the maintenance tasks, create a child theme in Magento 2 and customize it as per your requirement. By defining, the child theme is a theme that inherits all the properties of the parent theme and supports unlimited customizations. It is useful to customize the existing parent theme design as per the requirements.

Steps to Create Child Luma Theme in Magento 2:

Please follow these steps one by one. If you follow these steps properly then you can implement your theme in your space.

Lets us create a child theme so our all custom themes in Magento 2 go here:

app/design/frontend/company_name/theme_name

Let us assume, our company name is mycompany and our theme name is basic. We need to create the following directory structure for our theme:

mycompanyThe name of the theme package

basic – The name of the theme. We can have multiple named themes inside the mycompany folder.

etc/view.xml – This file is used to specify product image dimensions, thumbnails, etc.

Magento_Theme – This directory is used to override existing Magento’s theme files.

Magento_Theme/layout/default.xml – By default Magento2 assumes that your theme’s logo file should be: /web/media/logo.svg If you want some other file for logo, then you must declare it in default.xml file.

This file is also used to override the default theme settings.

media/preview.png – The preview of the current theme.

web – This directory contains all the theme’s static data like images, styles, javascript, fonts, etc.

registration.php – This file is required to register our theme to the Magento2 system.

theme.xml – This is a compulsory file that defines our theme name, its parent and optionally theme’s preview image.

Creating theme files

Let us now create our files one by one.

theme.xml ( app/design/frontend/mycompany/basic/theme.xml )

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
   <title>Basic</title> <!-- your theme's name -->
   <parent>Magento/blank</parent> <!-- the parent theme -->
   <media>
       <preview_image>media/preview.jpg</preview_image> <!-- theme's preview image -->
   </media>
</theme>

registration.php ( app/design/frontend/mycompany/basic/registration.php )

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/mycompany/basic',
    __DIR__
);

default.xml (app/design/frontend/mycompany/basic/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/my_logo.png</argument>
              <argument name="logo_img_width" xsi:type="number">200</argument>
              <argument name="logo_img_height" xsi:type="number">200</argument>
           </arguments>
        </referenceBlock>
    </body>
</page>

At this point, our theme is ready. Clear your cache and we will now select our new theme from admin.

Now, login to admin and move to the following path:

Content -> Design -> Themes

I have created my theme with this name “Amsducatinew“.

Now go to select the theme in design configuration:

Stores -> Configuration -> Design

Choose Main Website in front of Store View at the top left. Now click

Select Theme

Choose Main Website in front of Store View at the top left. Now click Design -> Design Theme

Uncheck Use Default checkbox and pick your theme. Click Save Config, clear your cache and your new theme is ready. Check your home page.

After that, You can override your module-theme from vendor to your theme design path from there you can customize your header, footer, and body.

Thanks for reading. Happy coding.

For more updates, please do subscribe and follow on social media facebook, twitter, Instagram and Pinterest

 

 

Close Menu