Magento Theme Customization Tutorial: Step by Step

The first time you install Magento, the design elements of your store base on the “Default” Theme, but the original default theme could be missing many features and not so responsive. In this guide, we will give you a complete Magento theme customization tutorial, which can help you create your own Custom Magento theme.

Let’s start!

What Is Magento Theme

A Magento theme is a component of the Magento application; it brings a consistent look and feel for the entire application area, determines the visual presentation, and the unique look of your store, using a combination of custom templates, layouts, styles or images.

There are only two default Magento themes at the start – Luma and Blank after finishing installing Magento. However, you can customize a theme for your site for the best visual experience for users, which helps to increase your sales rate.  

Detailed Magento Theme Customization Tutorial

In this tutorial, we will show you how to customize your Magento Theme for making the best user visual experience.

To customize a Magento theme, you should have at least a bit of Magento coding experience and some knowledge of Magento 2 to make sure the whole process can run smoothly.

Pre-setup

Before you start customizing your theme, there is something that you must do to save much time and make sure the customization runs flawlessly.

1, Disable Cache

To disable the cache, go to Admin → System → Cache Management → select all cache types then disable them, now, you’ve had all the cache disabled and ready to go.

By disabling the cache, you don’t need to clear the cache whenever you make any changes in the theme.

2, Enable Developer Mode

Switch your Magento store to developer mode to ensure that all changes made in real-time, and moreover you can view any errors while coding.

Enabling developer mode by running a command from the terminal using SSH access. After logging into your Magento SSH account, go to Magento root directory and run this command:

bin/magento deploy:mode:set developer

Customize Theme

There are four main steps of customizing your Magento theme:

1. Create a Theme Containing Directory
2. Declare your Magento theme
3. Directory Structure in Magento Theme
4. Apply and Configure theme in Admin Panel

Let’s begin!

Create Theme Directory

Go to: /app/design/frontend in your Magento root directory.

Create a new directory using the name you want for the theme package, for example:

 /app/design/frontend/example (Example is the name of my theme vendor)

Now, create a directory for your Magento theme under your theme vendor directory:

 /app/design/frontend/example/Magento-theme (Magento-theme is the name of my Magento theme directory)

Then you are done with creating your Theme directory, but Magento hasn’t known it exists, you need to declare your Magento theme before you can set your theme as the current theme in your Magento backend.

Declare your Magento theme

You can declare the theme you’ve created by creating theme.xml file under app/design/frontend/example/magento-theme/theme.xml, use the code:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">

<title>Magento-theme</title>

<parent>Magento/Luma</parent>

<media>

<preview_image>media/magento-theme-image.jpg</preview_image>

</media>

</theme>

Insert the name of your theme in your <Title> tag, declare a theme image in the <preview_image> tag; it’s a thumbnail image showing in the Magento 2 admin on our theme page so we can see a preview of your theme.

app/design/frontend/example/magento-theme/media/magento-theme-image.jpg so you won’t have any error when you visit your theme page in Magento admin.

Make a Composer package for your Magento 2 Theme.

In your theme directory: app/design/frontend/example/magento-theme/composer.json, add a composer.json file to register the package on a packaging server.

{

    "name": "example/magento-theme",

    "description": "N/A",

    "require": {

        "php": "~5.5.0|~5.6.0|~7.0.0",

        "example/magento-theme": "100.0.*",

        "magento/framework": "100.0.*"

    },

    "type": "magento2-theme",

    "version": "100.0.1",

    "license": [

        "OSL-3.0",

        "AFL-3.0"

    ],

    "autoload": {

        "files": [

            "registration.php"

        ]

    }

}

Because Magento themes are distributed as Composer packages so it will be registered as Package on server, and this file is provided in the them dependency information on Magento default public packaging server: packagist.org.

Add registration.php

To register your theme in the system, add a registration.php file in your theme directory:  app/design/frontend/example/magento-theme/registration.php then use the below code in your registration.php file:

<?php

/**

 * Copyright © 2017 Magento. All rights reserved.

 * See COPYING.txt for license details.

 */

\Magento\Framework\Component\ComponentRegistrar::register(

    \Magento\Framework\Component\ComponentRegistrar::THEME,

  'frontend/Cloudways/m2-theme',

    __DIR__

);

Directory Structure in Magento Theme

Now, you’ve done adding theme declaration and registration, it’s time to create the directory structure for customize your Magento theme, styles and template files.

/app/design/frontend/example/Magento-theme/theme.xml

/app/design/frontend/example/Magento-theme/registration.php

/app/design/frontend/example/Magento-theme/composer.json

/app/design/frontend/example/Magento-theme/media

/app/design/frontend/example/Magento-theme/media/magento-theme-image.jpg

/app/design/frontend/example/Magento-theme/web

/app/design/frontend/example/Magento-theme/web/css

/app/design/frontend/example/Magento-theme/web/css/source

/app/design/frontend/example/Magento-theme/web/css/fonts

/app/design/frontend/example/Magento-theme/web/css/images

/app/design/frontend/example/Magento-theme/web/css/js

/app/design/frontend/example/Magento-theme/etc

/app/design/frontend/example/Magento-theme/etc/view.xml

/app/design/frontend/example/Magento-theme/Magento_Theme

/app/design/frontend/example/Magento-theme/Magento_Theme/layout

/app/design/frontend/example/Magento-theme/Magento_Theme/layout/default.xml

Each type of files should be stored in its own sub-directory of web in theme directory.

You can see the /app/design/frontend/example/Magento-theme/etc/view.xml directory, copy the view.xml file from the etc directory of an existing theme to have your product image sizes and other properties used on your theme configured.

To declare the Theme Logo in the Magento and use it with a different name and format, create a default.xml file in your theme’s layout directory. Distinguished

Now your theme structure is basically created, you can customize or override your layout and setup new design layout of your new theme.

Apply and Configure theme in Admin Panel

Everything is ready and now you can activate your theme and apply it to your store.

In Magento backend, go to Content > Design > Themes, your theme appears on this list.

After that, go to Stores > Configuration > Design, select your theme, then press the “Save Config” button.

Now you can start configuring images, image properties, declaring logo, editing templates.

Sum Up

And that the Magento theme customization tutorial. We have gone through all the most essential things required in customizing your theme.

I hope after reading this Magento theme customization tutorial, you can learn how to start building your Magento theme. 

Now you can make a personalized theme as your liking. We appreciate any questions and suggestions from you.

Comment below to let us know your opinions.

Thanks for reading!