Effortless Guide to Magento 2 Theme Customization (with Detailed Examples)

Magento-2-theme-customization

Have you wondered how to make your magento theme customization?

The situation is: you’ve just installed your Magento 2 theme and see the result that is exactly the same as the demo theme. What a nice look! However, now is the time for the nitty-gritty stuff. You might want to customize your Magento 2 theme like footer text, menu text, slider image, brand logo, web layout…

Although small changes are easy to make, huge changes take time. Some are even impossible to make without a deep understanding of both front-end development and the theme itself.

So what can separate small-large changes? In order to understand this, we have to go through a broader question. Ask yourself: What is the difference between theme configuration and theme customization?

Difference between configuration and customization

the-difference

>>>Have a look at Best Place to Know about Magento Theme!

Often, when an enterprise speaks of software customization, it really has a configuration in mind.

As we can see in IQS’s great article on the difference between software customization and configuration, it is easy to mistake configuration and customization when it comes to Magento 2 theme. Theme configuration is small changes you can make using the vendor’s built-in option which can be easily accessed in Magento 2 admin, with the help of the theme’s user guide. On the other hand, theme customization stands for making the big change that is not supported by the theme in default and usually relating to altering the theme code.

But what can you do about it? Save days of work by being crystal-clear about your theme changing needs.

Clearly identify Magento 2 theme changing needs

steps-to-identify-theme

>>>Also check: Magento Theme for E-commerce – Brief and Guide!

There are 3 steps to take to clearly identify your theme changing needs:

  • Name your theme changing needs in detail. For example, “modify theme header” is very vaguely describe, and “move currency and language option from homepage header to homepage footer” is a lot more specific.
  • Identify if the modification is configurable in the theme options. You can do this by either examining the theme’s user’s guide carefully or trying to modify the code of the CMS Blocks and Pages. For example, changing the images on the homepage of the default Luma theme can be done by modifying the static block in Magento Admin. At this step, try to avoid making the change to the site’s source code, as it can be hard to keep change in future theme upgrades, and it can result in bugs.
  • Determine the importance of the modification. If your modification is not configurable in your theme or Magento admin, ask yourself: Is it essential to your brand, or your website’s interface? If not, try to eliminate the task, as it can be very costly in terms of time and money investment trying to get the exact look you want.

However, we understand that there are times when the theme is critical to your business, you may still want to make the change anyway. There are 3 methods to do that: buy a new theme that has the option of your choice, contact a custom development service, or manually customize the theme yourself. In the scope of this article, we manage to give you some basic steps to manually customize the theme.

Manually customize Magento 2 theme basic tutorial with example

In this section, we will go through steps to basically customize Magento 2 theme by changing files with certain types in your website source code. These types are Javascript, CSS, phtml, and XML.

The manual customization below requires a decent knowledge of theme file structure, and in front-end website development. For the sake of simplicity, we use Luma and Blank as the enabled them in the examples below.

Customize Javascript file

Now we will try to add a class to an element on the homepage. After that, we can style that element the way we want, by defining style rules for the class added.

For example, we want to add a class named “customize-js” to the website header.

customize magento 2 theme attempt with JS file

>>>Pay a visit: How to Use Magento 2 Theme Layout for Your Storefront!

We will log in to my FTP account using Filezilla, then go to vendor/magento/theme-frontend-blank/Magento_Theme/web/js

And edit theme.js. Then we will add this command:

$('.page-header').addClass('customize-js');

customize magento 2 theme attempt with JS file code

>>>Don’t miss this: How to install Magento Print Theme!

After that, we delete cache and pub/theme by the command:

rm -rf var/cache/ var/view_preprocessed/ var/page_cache/ pub/static/frontend/Magento/blank

And we will deploy and flush cache using:

php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush

The class is successfully added to the Homepage header.

customize magento 2 theme succeed with JS file

Customize CSS file

The CSS of a theme is generated through the .less file in standard settings. To customize the CSS, we go to the folder: vendor/magento/theme-frontend-blank/Magento_Theme/web/css/source.

Then we edit the file _module.less.

In this example, we want to change to color of the panel header into white, and change the color of the text inside to red.

customize magento 2 theme attempt with CSS file

We input these code to the file _module.less:

.page-wrapper {
    .page-header {
        .panel.wrapper {
            background-color: #ffffff;
            color: #000;
        }
    }
    .header.panel {
        >.header.links {
            >li {
                > a {
                    color: #f00;
                    &:visited {
                    color: #f00;
                    }
                }
            }
        }
    }
}

And we will deploy and flush cache using:

php bin/magento setup:static-content:deploy -f php bin/magento cache:flush

The color of the panel header and the text inside it is successfully changed.

customize magento 2 theme succeed with CSS file

Customize XML and pHTML file

In this case, we want to add an image as a block to the beginning of the homepage.

customize magento 2 theme attempt with XML and phtml file

First, we upload the image of our choice to the folder vendor/magento/theme-frontend-luma/web/images. The image in this example is named banner-test.jpg and look like this:

customize magento 2 theme test banner

Then we create a directory named: vendor/magento/theme-frontend-luma/Magento_Theme/templates/html

And we create a new file named test.phtml with the link to the image:

<?php?>
<img src='<?php echo $this->getViewFileUrl('images/banner-test.jpg'); ?>' alt="Demo">

After that, we go to the folder vendor/magento/theme-frontend-blank/etc and create a referenceContainer in the file view.xml:

<referenceContainer name="content">
    <container name="name-container" as="name.container" before="-" htmlTag="div" htmlClass="customize-layout">
        <block class="Magento\Framework\View\Element\Template" name="file-phtml" template="Magento_Theme::html/test.phtml"/>
    </container>
</referenceContainer>

customize magento 2 theme attempt with JS file
The image is successfully inserted to the beginning of the homepage.

customize magento 2 theme succeed with XML and xphtml

Magento 2 theme customization: in conclusion,

Customizing the theme in your Magento 2 site is an extremely broad matter. Because the desire to customize theme can be unlimited, it is impossible to have a magical theme that can change exactly the way you want in just some click (that’s why each theme needs a user guide itself). It is also impossible to write a guide that can help you customize any theme in detail.

In this article, we try to help you understand your needs for Magento 2 theme customization and determine if you should actually customize your theme, given its time and money cost acknowledged. We also give you some examples of manually customizing certain types of file of your theme manually.

So do you have any more questions regarding Magento 2 theme customization? Let us know right away in the comment section below, and we will respond promptly.

You can also browse the theme we have spent all our time and pride to develop below.

customize magento 2 theme

About Claire Parsons

Nice to meet you. I'm a copywriter, content writer & digital marketer living in Southend-on-Sea, U.K.
Previous Easiest 4-step-guide to Translate Your Magento Theme Completely
Next Magento 2 Theme LESS Usage

Check Also

printshop-theme

Printshop: Magento Print Theme Review & Installation Guide

Want to run an online store in the printing market? Magento Print Theme will help …

Leave a Reply

Your email address will not be published. Required fields are marked *