Here’s the updated step-by-step guide for creating a Magento 2 theme with the namespace Acesoftech and theme name AcesoftechAcademy:
Folder Structure Overview
The final folder structure should look like this:
app/design/frontend/
└── Acesoftech/
└── AcesoftechAcademy/
├── etc/
│ └── view.xml
├── web/
│ ├── css/
│ │ └── source/
│ ├── fonts/
│ ├── images/
│ │ └── logo.svg
│ ├── js/
├── registration.php
├── theme.xml
├── composer.json
1. Create the Magento Theme Folder
Navigate to app/design/frontend and create the following folder structure:
app/design/frontend/
└── Acesoftech/
└── AcesoftechAcademy/
2. Declare Your Theme
Create a theme.xml file in app/design/frontend/Acesoftech/AcesoftechAcademy with the following content:
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd"> <title>Acesoftech Academy</title> <!-- Theme name --> <parent>Magento/blank</parent> <!-- Inherits from Magento Blank theme --> <media> <preview_image>media/preview.jpg</preview_image> <!-- Path to the preview image --> </media> </theme>
3. Composer Package
Create a composer.json file in app/design/frontend/Acesoftech/AcesoftechAcademy with the following content:
{
"name": "acesoftech/acesoftechacademy",
"description": "Acesoftech Academy Theme for Magento 2",
"require": {
"php": "~7.0.0|~7.1.0|~7.2.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"
]
}
}
4. Register the Theme
Create a registration.php file in app/design/frontend/Acesoftech/AcesoftechAcademy:
<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::THEME, 'frontend/Acesoftech/AcesoftechAcademy', __DIR__ );
5. Create Static Files and Folders
Create the following folder structure under app/design/frontend/Acesoftech/AcesoftechAcademy:
├── web/
│ ├── css/
│ │ ├── source/
│ ├── fonts/
│ ├── images/
│ │ ├── logo.svg
│ ├── js/
Place your custom CSS, fonts, images, and JavaScript files in the respective directories.
6. Configure Catalog Product Images
Create a file etc/view.xml in app/design/frontend/Acesoftech/AcesoftechAcademy with the following content:
<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd"> <images module="Magento_Catalog"> <image id="category_page_grid" type="small_image"> <width>250</width> <height>250</height> </image> </images> </view>
7. Declare Theme Logo
Create the file app/design/frontend/Acesoftech/AcesoftechAcademy/Magento_Theme/layout/default.xml and define your custom logo:
<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.svg</argument> <argument name="logo_img_width" xsi:type="number">300</argument> <argument name="logo_img_height" xsi:type="number">300</argument> </arguments> </referenceBlock> </body> </page>
Summary
Magento 2 custom theme development allows businesses to design tailored eCommerce experiences. By leveraging Magento’s robust architecture, developers can customize layouts, integrate unique styles, and enhance store branding.