Magento 2 Theme Development & Customization – Step by Step Guide

What is a Magento theme?

A theme is a component of Magento application which provides a consistent look and feel (visual design) for 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 which can be useful as a base to create your own custom Magento 2 visual experience and easily customize 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 in the theme. This will save you a lot of time in development process
To disable 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 coding.

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

php bin/magento deploy:mode:set developer

Create Theme

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

1. Create a directory for the theme
2. Add a declaration for theme
3. Add a composer.json file
4. Add registration.php
5. Create directories for CSS, JavaScript, images, and fonts
6. Setup theme logo
7. Customize theme layout
8. 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 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 directory structure of your theme, now we have to declare that theme by creating theme.xml file which contains theme name and the parent theme name if it’s inherited from another and if you like you can also specify theme preview image

Composer Package

Magento 2 themes are distributed as Composer packages so it will be registered as a Package on 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:

Creating Directory Structure for Static Files

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

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

│ ├── css/

│ │ ├── source/

│ ├── fonts/

│ ├── images/

│ ├── js/

Configure Images

Product image sizes and other properties used on 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 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 you 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 setup new design layout for your new theme.The layouts for different application components can be distinguished by 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 complete page layout file of Magento and modifying its code, you can just create a file which extends layout with changes you want. So if you want to customize layout of Magento_Catalog/view/frontend/layout/catalog_product_view.xml, you can add a layout file with 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

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 and on 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 theme so that it’s visible on Magento store front.

Login to your Magento store SSH account and go to Magento root directory and run 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 free consultation

Recent Articles

WooCommerce features list for eCommerce store

How Covid-19 Is Impacting eCommerce Business?

Key Questions and Answers on Progressive Web App