Magento 2 Theme Development & Customization – Step By Step Guide for 2024

What is a Magento theme?

A theme is a component of the Magento application that provides a consistent look and feel (visual design) for the entire Magento application area (for example, storefront or Magento admin). It uses a combination of custom templates, layouts, styles, or images.

Themes are designed to override or customize view layer resources, provided initially by modules or libraries.

In this guide, we will help you to create a simple Magento 2 theme that can be useful as a base to create your own custom Magento 2 visual experience and easily customize the design layout of all pages.

Follow Below Step by Step Guide for Magento 2 Theme Development & Customization

Disable Cache

Before you start, Please make sure that your Magento cache is disabled so that you don’t need to clear the cache every time you make changes to the theme. This will save you a lot of time in the development process.

To disable the cache, go to Admin → System → Cache Management → select all cache types and disable them.

Developer Mode

Ensure that your Magento store is in developer mode so that all changes are reflected in real-time and you can view any errors you come across while doing the coding.

To enable the developer mode, you would need to run commands from the terminal using SSH access. Log in to your Magento store SSH account and go to the Magento root directory and run the below command:

php bin/magento deploy:mode:set developer

Create Theme

Here is the list of steps you need to follow for theme development:

• Create a directory for the theme
• Add a declaration for the theme
• Add a composer.json file
• Add registration.php
• Create directories for CSS, JavaScript, images, and fonts
• Setup theme logo
• Customize theme layout
• Configure your theme in the Admin panel

Let’s understand each step in detail.

Create a Directory Containing Theme

Go to: /app/design/frontend And create a new directory with the vendor name you want for the theme package,

For example i have used name Mageice here : /app/design/frontend/MageIce

Now in your vendor directory, create your theme directory, for example – Icecube: /app/design/frontend/MageIce/Icecube/

app/design/frontend/
├── /

│   │   ├──.../

│   │   │   ├── ...

Declare your Theme

Once you have created the directory structure of your theme, now we have to declare that theme by creating a theme.xml file which contains the theme name and the parent theme name if it’s inherited from another and if you like you can also specify the theme preview image.

Composer Package

Magento 2 themes are distributed as Composer packages so they will be registered as a Package on the server. Add a file composer.json which is optional.

{
"name": "mageice/icecube",
"description": "N/A",
"require": {
"php": "~5.5.0|~5.6.0|~7.0.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"
]
}
}

Adding registration.php

Now to register your theme in the system, add a file registration.php in your theme directory with the below content:

/**
* Copyright © Magento. All rights reserved.
* See COPYING.txt for license details.
*/
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
'frontend/MageIce/Icecube',
_DIR_
);

Creating Directory Structure for Static Files

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

app/design/frontend/mageice/icecube
├── web/

│ ├── css/

│ │ ├── source/

│ ├── fonts/

│ ├── images/

│ ├── js/

Configure Images

Product image sizes and other properties used on the theme are configured in a view.xml which is a configuration file. It is required for a theme but is optional if exists in the parent theme. Create the etc directory as above and copy view.xml from the etc directory of an existing theme.

Declaring Theme Logo

In the Magento application, the default format and name of a logo image is the logo.svg. You can use a logo file with a different name and format, but you might need to declare it. You have to create a file default.xml in your theme’s layout directory and below code, if your theme_logo.png is in size of 300×300:

Customize Theme Layout

Once your basic theme structure is created, now you can customize or override any layout and set up a new design layout for your new theme. The layouts for different application components can be distinguished below:

• Base layouts: Layout files of modules
  • Page configuration and generic layout files: Magento_Catalog/view/frontend/layout
  • Page layout files: Magento_Catalog/view/frontend/page_layout
• Theme layouts: Layout files of themes.
  • Page configuration and generic layout files: app/design/frontend/mageice/icecube/Magento_Catalog/layout
  • Page layout files: app/design/frontend/mageice/icecube/Magento_Catalog/page_layout

Create a Theme Extending File

Instead of using the complete page layout file of Magento and modifying its code, you can create a file that extends the layout with changes you want. So if you want to customize the layout of Magento_Catalog/view/frontend/layout/catalog_product_view.xml, you can add a layout file with the same name in your custom theme: app/design/frontend/mageice/icecube/Magento_Catalog/layout/catalog_product_view.xml

Configure the Theme in Magento Admin Panel

The next step is to apply the custom theme you created from Magento Admin so it’s available on your front site. To apply theme go to Admin->Content->Design->Configuration.

Click Edit on your store view and a page with design configuration will open on the Default Theme tab, in the Applied Theme drop-down, select your newly created theme and Click Save Configuration.

Final Deployment

Last but not least, we have to run one command to deploy the files we have created for them so that it’s visible on the Magento storefront.

Log in to your Magento store SSH account and go to the Magento root directory and run the below command:

php bin/magento setup:upgrade

And after that, you have to run another command to deploy the theme files.

php bin/magento setup:static-content:deploy

That’s all, If you have any further questions about Magento 2 theme development or if need any help from our expert Magento 2 developers, contact us now for a free consultation.