Magento theme customization: Simple guide to make it effectively

You’ve just installed an eye – catchy Magento 2 theme for your website. It looks great. However, you want to make some changes to that theme so that it can better reflect your brand. Or maybe you just want to differentiate your website from others. Then, you will need to change some parts of your Magento 2 theme like footer text, menu text and so on. In this blog, we will deliver you sufficient understanding about Magento theme customization. From this, hopefully you will be able to make some changes with your theme

When it comes to Magento theme customization, small changes are easy to make. On the other hand, bigger or huge ones take a lot of time. Sometimes, you must have a deep understanding about Magento to do that. In the first part, we will distinguish Configuration and Customization

Configuration vs Customization

Most of the time, people confuse between Configuration and Customization. And this happens even more often when it comes to Magento 2 theme customization. 

The Configuration is the small changes. They’re quite easy to carry out with the vendor’s built-in option. In addition, this option can easily be accessed in Magento 2 admin, with the help of the theme’s user guide

On the other hand, Customize often refers to the big changes, and these changes are not supported by the theme by default. As a result, to Magento theme customization requires alter the theme code

Also read: Magento Customization: Methods To Enhance Your E commerce Site

Determine the changes for your Magento 2 theme

Instead of jumping right in Magento theme customization, you should identify the changing needs first. In particular, list down which parts you want to customize, and do you need those changes. Here are some steps for this part

  • Write down your changing needs. Make sure you write them in detail. 
  • Check if the modifications are configurable in the theme options. There are two main ways to do this. In the first method, you can carefully check the user’s guide. Otherwise, you can try to change the code of the CMS Blocks and Pages. However, try your best to avoid changing the site’s code. It will not only make your site buggy,  but also hard to keep change in the future
  • Finally, do you really need that modification, especially when it’s not configurable in your theme or Magento? If yes, you can carry on. On the other hand, in case you don’t think it’s necessary, try to avoid this task. It can cost you a lot of time, effort and budget.

Now, suppose you really need to make some changes to your Magento 2 theme. Then, there are often 3 options for you to choose: Buy new themes, contact external Magento developers and carry on Magento theme customization yourself. Depending on your needs and situations, you can choose the best option for your business. In this blog, we mainly focus on manually customizing Magento themes yourself.

Manual Magento theme customization instruction

Here are some steps to customize Magento 2 themes by yourself.

Keep in mind that you need to have decent knowledge about theme file structure and front – end website development. Otherwise, you might end up with buggy websites. Most of the time, Magento 2 themes are written in Javascript, CSS, phtml and XML. 

To understand more about Magento 2 theme customization, let’s consider these examples below. In order to make the matter more simple, we use Luma and Blank 

Customize Javascript file – Magento theme customization

In this example, firstly, we will add a class to an element on the homepage. Then, we will define style rules for that class. By this way, we can freely style that element

To illustrate, we need to add a class named “ customize-js” to the website header. 

guide

To do that, log in to an FTP account. After that, navigate to vendor >> magento >> theme-frontend-blank >> Magento_Theme >> web >> js >> edit theme js

Next, we’ll add this command 

$(‘.page-header’).addClass(‘customize-js’);

Magento 2 theme customization

Then, to delete all the cache and pub/ theme, we use the following command

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

After deleting, we will deploy and flush cache with the code below

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

php bin/magento cache:flush

After doing this successfully, your homepage header will look like this

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

php bin/magento cache:flush

Customize CSS file

Coming to another part of Magento theme customization – Customize CSS file. Since CSS file of the theme is generated through the .less file, then to customize this file, we need to edit .less file. Here’s the detailed instruction 

Go to vendor >> magento >> theme-frontend-blank >> Magento_Theme >> web >> css >> source. After that, you need to edit file _module.less.

Suppose you want to change the color of the panel to white and that of the text into red. In the image below, we want to change the color of the text within the red box

Magento 2 theme customization

Then, we need to edit file _module.less. To do that, add the following code in that file

Magento 2 theme customization

Next, deploy and flush cache with the code below

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

After done successfully, your panel header will look like this. 

Magento 2 theme customization

Customize XML and pHTML

Moving to another part of Magento theme customization – Customize XML and pHTML. In this example, we want to add an image as a block to the beginning of the homepage

guide

Firstly, go to vendor >> magento >> theme-frontend-luma >> web >> images. Then, upload the image of choice into this file. Here is the image we choose. In this case, we name this image banner-test.jpg

vendor

After that, create a directory named vendor/magento/theme-frontend-luma/Magento_Theme/templates/html. Then, make 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”>

Next, go to the folder vendor >> magento >> theme-frontend-blank >> etc to create a referenceContainer in the file view.xml:

The code will look like this

guide

And finally, your homepage will look like this

luma

Above we show you detailed instructions for Magento theme customization with examples. Hopefully through this, you will be able to manually customize your theme. However, keep in mind that they are just basic customization. If you want to make bigger or huge changes to your Magento 2 theme, then we highly recommend you contact external Magento partners. Otherwise, you might end up with buggy or dysfunctioning websites. 

In case you are looking for professional and enthusiastic Magento partner, then we highly recommend ArrowHitech

ArrowHitech – Ideal partner for Magento theme customization

ArrowHitech is the leading IT outsourcing company in Vietnam. After 14 years of constant development, ArrowHitech has expanded its business to different countries in the world besides Vietnam such as Japan, Europe and US. We have completed thousands of projects, including Magento development. Therefore, we confidently help you with Magento 2 theme customization. At the end of the day, you’ll receive a well – functioning, eye – catchy website without any redundancy. What’s more, we will ensure that your website can greatly reflect your business. Working with us, you’ll surely get unique, exclusive and stunning websites. Contact us here.

Here are the process of our company when customizing Magento 2 theme

Consulting

AHT consulting

Instead of jumping right in customizing your theme, we will analyze your business situation and expectations. From that, we can deliver you helpful advice. For example, should you make changes to your theme, or which part should you change? 

Thanks to that, ArrowHitech will not only meet all your requirements, but we can also go beyond that. 

Product management

ArrowHitech can boost your website to the new level. In particular, we will upgrade the Magento’s features and capabilities. After that, your website can better handle your products and inventory.

Responsive themes

Once we finish assessing your current business, we will help you choose the best approach for your web design. For instance, select between Responsive or PWA. 

Managing order

ArrowHitech can help you with order management. Thus, you can better keep track of your order and sales. Moreover, this is a great way to avoid “ lost” items during shipping 

Payment gateway

We will make the transactions on your website a breeze. As a result, we can greatly improve your customer satisfaction

If you need to know more about our work, check our portfolio here for more information

Contact us now

ArrowHitech will not only be your partner during your Magento project, but also afterward. If any problems come up, especially Magento theme customization, simply contact us via hotline, email or contact form. Our 24/7 all – year – through customer service will support you immediately. Moreover, there are no language borders when working with us. Besides English and Vietnamese, our employees can communicate fluently in different languages such as Japanese. Urging to work with our decade – long experienced developers.

Tags

Share