How to make a Magento Theme?

Maintaining a uniform design and vibe throughout your store is crucial, and Magento 2 themes are key to achieving this. By combining custom templates, designs, styles, or images, you can enhance the visual appeal of both the Magento 2 admin panel and the storefront.

Default Magento 2 Themes

After installing Magento 2, you will notice two default themes: Luma and Blank. Luma serves as a demo theme, while Blank is a starting point for custom Magento theme development.

Customizing Magento 2 Themes

Using the Luma theme for your live store is unrestricted. However, it is advised not to edit the default Luma and Blank theme files directly. Changes to these files may be overridden during Magento 2 upgrades.

This guide covers the fundamentals of frontend custom Magento 2 theme development. It is useful for both beginners and advanced Magento developers looking to refresh their knowledge.

Magento 2 Theme Development Requirements

Before starting your Magento 2 theme development, ensure you meet the following requirements:

• Experience working with Magento.
• Basic understanding of Magento 2.
• Magento 2 installed on your localhost with access to both frontend and backend.
• If you don’t have Magento 2, consider using Cloudways for quick setup.

Magento 2 Theme Development Directory Structure

To modify the Magento theme, you need to build the directory structure. Below is an example of how your theme directory should look:

bashCode kopiëren/app/design/frontend/Cloudways/m2-theme/theme.xml
/app/design/frontend/Cloudways/m2-theme/registration.php
/app/design/frontend/Cloudways/m2-theme/composer.json
/app/design/frontend/Cloudways/m2-theme/media/m2-theme-image.jpg
/app/design/frontend/Cloudways/m2-theme/web/css/source
/app/design/frontend/Cloudways/m2-theme/etc/view.xml
/app/design/frontend/Cloudways/m2-theme/Magento Theme/layout/default.xml

Creating a Theme Directory

Navigate to your Magento 2 root directory and create a directory for your theme:

bashCode kopiëren/app/design/frontend/Cloudways/m2-theme

Declaring the Magento 2 Theme

Create the theme.xml file in /app/design/frontend/Cloudways/m2-theme/ and add the following code:

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

Creating a Composer Package

Create a composer.json file in your theme directory:

jsonCode kopiëren{
    "name": "cloudways/m2-theme",
    "description": "Magento 2 Custom Theme",
    "require": {
        "php": "5.6|7.0|7.1|7.2|7.3|7.4",
        "magento/framework": "100.0.*"
    },
    "type": "magento2-theme",
    "version": "100.0.1",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}

Registering Your Custom Theme

Create a registration.php file in your theme directory:

phpCode kopiëren<?php
use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(
    ComponentRegistrar::THEME,
    'frontend/Cloudways/m2-theme',
    __DIR__
);

Applying and Configuring Your Custom Theme in Admin

To activate your theme, go to the Magento 2 backend and navigate to:

cssCode kopiërenContent > Design > Themes

Ensure your theme is listed. Then, go to:

Code kopiërenStores > Configuration > Design

Select your newly generated theme and save the configuration.

Configuring Theme Image Properties

To configure catalog image sizes, create a view.xml file in your theme’s etc directory:

xmlCode kopiëren<view>
    <media>
        <images module="Magento_Catalog">
            <image id="category_page_grid" type="small_image">
                <width>350</width>
                <height>350</height>
            </image>
        </images>
    </media>
</view>

Declaring a Logo for Your Custom Theme

Create a default.xml file in /app/design/frontend/Cloudways/m2-theme/Magento Theme/layout/:

xmlCode kopiëren<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>

Theme Inheritance

Theme inheritance allows extending themes while reducing maintenance time. A parent theme is defined in the child theme using a theme.xml file. Magento will use the fallback method to locate view files not found in your custom theme.

Styling the Theme

Magento 2 uses LESS for styling. To customize the theme, create a LESS file in:

bashCode kopiëren/app/design/frontend/Cloudways/m2-theme/web/css/source/cw-theme.less

Add your custom styles:

cssCode kopiëren.page-wrapper {
    background-color: #fff;
}
.cwcustom-class {
    color: blue;
}

Theme Layout Override

To override a layout, place the layout file with the same name in the following folder:

bashCode kopiëren/app/design/frontend/Cloudways/m2-theme/Magento Theme/layout/default.xml

Frequently Asked Questions

What is a Magento Theme?

A Magento theme is a collection of files including CSS, HTML, PHP, XML, and images that determine the style and feel of an online store.

Where are Magento’s default themes located?

Magento themes are located in app/design/frontend/__. Built-in themes can be found in vendor/magento/theme-frontend.

What is the default extension for Magento template files?

The default extension is .phtml.

How can I change the Magento theme?

1. Log in to the Admin Panel.
2. Go to Content > Design > Configuration.
3. Click Edit next to the store view you want to change.
4. Select the desired theme from the Applied Theme dropdown.
5. Click Save Configuration.

By following these steps, you can create and customize your Magento 2 theme effectively.

4o