Below is a complete step-by-step guide to creating a custom Magento 2 theme using the namespace
Acesoftech
and the theme name
AcesoftechAcademy.
Folder Structure Overview
After completing all steps, your final theme folder structure will 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 Directory
Navigate to the
app/design/frontend
directory and create the following folder structure:
app/design/frontend/
└── Acesoftech/
└── AcesoftechAcademy/
2. Declare the Theme
Create a
theme.xml
file inside
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 title displayed in Admin Panel -->
<parent>Magento/blank</parent>
<!-- Parent theme inheritance -->
<media>
<preview_image>media/preview.jpg</preview_image>
</media>
</theme>
3. Create Composer Package
Create a
composer.json
file in the theme root directory:
{
"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 to register the theme with Magento:
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
'frontend/Acesoftech/AcesoftechAcademy',
__DIR__
);
5. Create Static Assets
Add the following directories under the
AcesoftechAcademy
theme:
├── web/
│ ├── css/
│ │ └── source/
│ ├── fonts/
│ ├── images/
│ │ └── logo.svg
│ ├── js/
Place all custom CSS, fonts, images, and JavaScript files in their respective folders.
6. Configure Product Image Sizes
Create
etc/view.xml
to define catalog image dimensions:
<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. Set Theme Logo
Create the layout file below to define your custom logo:
app/design/frontend/Acesoftech/AcesoftechAcademy/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/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>
5. Understanding Layout XML (Page Structure Control)
Layout XML files control the structure of Magento pages. They decide which blocks appear on a page and where they are placed.
Think of Layout XML as the blueprint of a Magento page.
5.1 Global Layout Changes
Global layout changes apply to all pages across the website.
File location:
app/design/frontend/Acesoftech/AcesoftechAcademy/Magento_Theme/layout/default.xml
Example: Remove the Compare Products link globally.
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<remove name="compare-link" />
</body>
</page>
5.2 Page-Specific Layout Files
Magento automatically loads layout XML files based on page routes.
Common examples include:
• Home Page → cms_index_index.xml
• Product Page → catalog_product_view.xml
• Category Page → catalog_category_view.xml
These files allow you to customize individual pages without affecting the entire website.
6. Overriding PHTML Templates (HTML Customization)
PHTML template files control the HTML output of blocks in Magento.
6.1 Correct Way to Override Templates
Locate the original template inside the Magento core:
vendor/magento/module-*/view/frontend/templates/
Copy the required template into your theme directory:
app/design/frontend/Acesoftech/AcesoftechAcademy/<Module_Name>/templates/
Important: Never edit files directly inside the vendor directory.
7. Styling in Magento 2 (LESS Made Simple)
Magento 2 uses LESS instead of plain CSS by default, allowing better customization and variable management.
7.1 Important LESS Files
Location:
web/css/source/
├── _variables.less → Override default colors, fonts, spacing ├── _extend.less → Add your custom styles
7.2 Add Custom Styles
Example custom styling:
.page-title {
font-size: 26px;
font-weight: 600;
}
8. Adding JavaScript in Theme
Magento uses RequireJS to manage JavaScript dependencies and loading.
8.1 requirejs-config.js
Create the file:
app/design/frontend/Acesoftech/AcesoftechAcademy/requirejs-config.js
var config = {
map: {
'*': {
customJs: 'js/custom'
}
}
};
8.2 Custom JavaScript File
Create the file:
web/js/custom.js
define(['jquery'], function ($) {
'use strict';
return function () {
console.log('Custom theme JS loaded');
};
});
9. Static Content Deployment & Magento Modes
Magento works in different modes that affect performance and development workflow.
9.1 Developer Mode (During Development)
Use Developer Mode while building or customizing the theme.
php bin/magento deploy:mode:set developer
Benefits:
• Faster development
• No need to deploy static content repeatedly
• Helpful error reporting
9.2 Production Mode (Live Website)
Production Mode is required for live stores to ensure maximum performance.
# 1️⃣ Create theme files
# 2️⃣ Register in DB
php bin/magento setup:upgrade
# 3️⃣ Flush cache
php bin/magento cache:flush
# 4️⃣ Deploy assets
php bin/magento setup:static-content:deploy -f
Production Mode advantages:
• Faster page loading
• Optimized static files
• Secure and stable for live traffic
Summary
Magento 2 custom theme development enables businesses to create unique, branded eCommerce storefronts.
By utilizing Magento’s flexible theme architecture, developers can customize layouts, control design elements,
and deliver an enhanced user experience aligned with business goals.
