Magento Custom Theme Development¶

Statistics clearly show that Magento is the most preferred platform when it comes to building an online store. A platform that has adopted an e-commerce-centric approach while crafting solutions on Store-front and backend. As the storefronts get the attention of visitors and customers, merchants should focus on how to make the store visually appealing. Store-fronts are crafted following theme or templates. Magento theme is a component that provides consistency in look and feel for the entire online shop (Front-part or Admin-panel).

Magento natively provides the Luma theme as default after installing Magento 2 and sample data. This Luma theme is constructed following the Blank theme. So, when it comes to providing your brand aesthetic and mood, we suggest going with the custom theme. We have already shared why to choose the custom theme for your online store here. Utlizing images, fonts, designs, and style, you can improve the visual appeal of the storefront and admin panel with the best UI/UX.

Magento, being open-source, has no restrictions on using the Luma theme. Please do not change the default theme files as they got overwritten with upgrades. This article drives you with the steps to create a custom Magento theme. This custom Magento theme development will work as template for your future Magento stores.

Prerequisites for Theme Development¶

• Magento Codding experience

• Basic Magento 2 knowledge

• Magento 2 is installed in your local environment and works perfectly to build and test the custom theme.

• System Requirements:

  • Web Server: Apache 2.4

  • MySql version: 8.0

  • PHP version: 8.1

  • Composer: 2.X

Custom theme development steps¶

Following are the steps you need to perform if you are willing to build a custom theme:

1. Create a directory for the theme

2. Add a declaration for the theme

3. Add a composer.json file

4. Add registration.php

5. Create directories for images, fonts, CSS, and javascript

6. Configure your theme in the Admin panel

7. Run Deployment Commands

Let’s move ahead step by step and see how to build a custom theme.

Creating a folder for the custom theme:¶

Go to: /app/design/frontend and create a new directory with the choice of the vendor name you want for the theme package.

For instance, We have used the name Navigate here: /app/design/frontend/Navigate

Create your theme directory in your vendor directory, for example – Theme_Name:

/app/design/frontend/Navigate/Theme_Name/

Add a declaration for the theme.¶

Once we are done with the directory creation of the theme, we have to declare that theme by creating a theme.xml file to declare it.

theme.xml defines basic theme configuration, including at least the title, and usually, the parent theme is extended.

Create the theme.xml file under app/design/frontend/Navigate/Theme_Name/theme.xml and use the code below:

1
2
3
4
5
6
7

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

Add a composer.json file.¶

If you want to distribute the theme as a package, add a composer.json file to the theme directory. Once done, register the package on a packaging server.

app/design/frontend/Navigate/Theme_Name/composer.json to register the package on a packaging server. In the theme dependency information, you will find this file.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

{
"name": "Navigate/Theme_Name",
"description": "N/A",
"require": {
"php": "~5.5.0|~5.6.0|~7.0.0",
"Navigate/Theme_Name": "100.0.",
"magento/framework": "100.0."
},
"type": "magento2-theme",
"version": "100.0.1",
"license": [
"OSL-3.0",
"AFL-3.0"
],
"autoload": {
"files": [
"registration.php"
]
}
}

Add registration.php¶

Follow this code to register your theme in the Magento system and create a registration.php file in the theme directory.

app/design/frontend/Navigate/Mytgeme/registration.php and use the following code in your registration.php:

Code:

1
2
3
4
5
6
7

<?php
use Magento\Framework\Component\ComponentRegistrar;
ComponentRegistrar::register(
ComponentRegistrar::THEME,
'frontend/Navigate/Theme_Name',
DIR
);

Create directories for CSS, JavaScript, images, and fonts¶

The theme is made up of many files like styles, fonts, javascript, images, etc. The Theme package should consist of all files, and each one has to be stored in its sub-directory of web in the theme directory:

The theme package consists of many files: styles, fonts, JavaScript, and images. Each one has to be stored in its own sub-directory of web in the theme directory:

1
2
3
4
5
6
7

app/design/frontend/Navigate/Theme_Name
├── web/
│ ├── css/
│ │ ├── source/
│ ├── fonts/
│ ├── images/
│ ├── js/

Directory Structure in Magento 2 Theme Development¶

By now, you are able to see what the theme directory should look like. Here, we have set our name as a vendor and directory name.

app/design/frontend/Navigate/

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

├── Theme_Name/
│   ├── etc/
│   │   ├── view.xml
│   ├── web/
│   │   ├── images/
│   │   │   ├── logo.svg
│   │   ├── css/
│   │   │   ├── source/
│   │   │   │   ├── _theme.less
│   │   ├── fonts/
│   │   ├── js/
│   ├── registration.php
│   ├── theme.xml
│   ├── composer.json

Configure your theme in the Admin panel¶

Follow the steps to configure the theme in the Admin panel.

1. Go to Magento 2 backend, then to Content > Design > Themes. And make sure your theme appears on this list.

2. Go to Store => Configuration => Design => Choose your newly created theme from those shown in the image below.

3. Select Theme_Name from the applied theme drop-down menu and click on Save Configuration.

After selecting your theme, click on the “Save Config” button.

Clear the cache.

Run Deployment Commands¶

Run all the listed commands one by one. Open the SSH terminal and go to the root directory of your Magento 2 instance.

1
2
3
4
5
6
7
8

rm -rf var/di/* var/generation/* var/cache/* var/log/* var/page_cache/* var/session/* var/view_preprocessed/* pub/static/*
php bin/magento setup:upgrade
php bin/magento setup:db-schema:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy
php bin/magento indexer:reindex
php bin/magento cache:clean
php bin/magento cache:flush

Congratulations!! You have successfully created your custom theme. The article has covered vital steps for theme customization at the initial stage. As you progress and gain hands-on experience like our Magento experts, you may achieve to craft more complex themes with responsiveness. Don’t forget to look into related articles for best practices and tips!

• Theme Development: Best practices and tips

• How to make your theme responsive