Create or customize theme in Magento 2: A step-by-step guide

Magento 2 is a popular ecommerce platform that offers a wide range of customization options for online store owners. One of the ways to customize your store is by modifying the luma theme, which is the default theme that comes with Magento 2. In this article, we will walk you through the process of customizing the luma theme in Magento 2 and show you how to make your store stand out.

Related reads

1. How to enable maintenance mode in magento 2

2. Hyva theme for magento 2

3. How to install a theme in magento 2

1. Create a child theme

The first step in customizing the luma theme is to create a child theme. A child theme is a theme that inherits the functionality and design of the parent theme (in this case, luma) but allows you to make changes without affecting the parent theme. This way, if you ever need to update the luma theme, your customization will not be lost.

To create a child theme, you will need to create a new folder in the “app/design/frontend” directory and name it “Webbytroops/webbytheme”.

“Webbytroops”: Used as a vendor name

“webbytheme”: Used as a theme name

You will also need to create a “registration.php” file in this folder that contains the following code:

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

\Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontened/Webbytroops/webbytheme',
    _DIR_
);
);

2. Create theme.xml

To create a theme.xml app\design\frontend\Webbytroops\webbytheme\theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Luma Child</title>
    <parent>Magento/luma</parent>
    <media>
        <preview_image>media/preview.png</preview_image>
    </media>
</theme>

3. Copy and modify luma theme files

Once you have created the child theme, you can start copying and modifying the luma theme and other modules files. For example, if you want to change the product list template file, you can copy the “vendor/magento/module-catalog/view/frontend/templates/product/list.phtml” file to your child theme following and modify it.

You need to follow the folder structure for catalog module such as the list file will be kept at the path “app/design/frontend/Webbytroops/webbytheme/Magento_Catalog/templates/product/list.phtml.” You can also copy and modify other files such as images and js to change the overall look of your store.

4. Update the theme in the Magento admin

After you have made your changes, you need to update the theme in the Magento admin. Go to “Content>Design>Configuration” and select the store view you want to update.

Under “Applied Theme,” select your child theme and save the changes.

5. Upgrade, compile and deploy changes

You will need to run these commands to deploy your theme content or clear the cache to see the changes on your store.

php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy
php bin/magento cache:flush

Customizing the luma theme in Magento 2 is a great way to make your store stand out and create a unique look and feel. With this step-by-step guide, you can easily modify the luma theme and create a design.