What is a Magento admin theme? Why do you need admin themes? How can you create a proper theme in the Magento back office and improve the admin experience? Read on to find out – we spill all the secrets here.
What is Magento admin theme?
Why create a custom admin theme?
How to create Magento custom admin theme
How to change admin theme in Magento
Three best Magento admin theme extensions
Online store admins spend almost all their work time in the back office, so it is important for the sake of their job performance and overall productivity that the admin panel has a clear layout and all the necessary tabs and tools at hand. Magento back office is just like that – large workspace on the right and a compact sidebar on the left, providing immediate access to any place of the online store which a developer manages. However, Magento offers more than that – it is also possible to apply an admin theme to your Magento store, designing your back office the way you want.
In this article, we are going to discuss what Magento admin themes are and look through their benefits for ecommerce. Also, we will outline the process of creating the Magento admin theme and review the top 3 Magento admin theme extensions.
What is Magento admin theme?
A theme is a combination of styles, images, layouts and templates. Together, these elements form a Magento application component or a theme that creates a consistent visual design for the area it is intended for. There are two types of Magento admin themes – one for a storefront which defines the style and look of the whole online store, and another one for an admin panel defining the outer look of the Magento back office.
Out-of-the-box Magento comes with two default themes – Luma, the theme for demonstration, and Blank, which can be used as a basis for a Magento custom theme design. Although implementing the default themes into the live store is not prohibited, it is strongly advised to apply an individual design that will single out your store and underline its uniqueness compared to the others. Also, if you make changes to the default themes, they will eventually be overwritten when the new version is introduced. The new theme can be a standalone one or inherited from the default or any existing ones. However, when the theme is inherited, you as its owner can change only certain theme files in it, while the rest of the files will be inherited from the parent theme.
Magento admin panel theme and storefront theme can be downloaded for free or for a certain fee from the official or third-party marketplaces. Another way out here is to create a custom theme, and this is what this article is dedicated to.
Why create a custom admin theme?
A custom admin theme is the one that was built from scratch and it has several important advantages, opposed to a ready made one. The process can be compared with building a house from scratch or purchasing a complete one. Definitely, using a default theme is less time-consuming in terms of development but it is not going to be tailored and you are likely to experience some inconveniences which will eventually also cost time.
#1. Get rid of distrustive unnecessary theme components. When it comes to ready-made templates, you get the components set by a developer and designer for an average user. Half of them you may not even need or never use – it can be destructive and overwhelming. At the same time, plenty of useless features can result in slower loading speed of your website. While creating a theme from scratch, you know what you need and what you want to get. As a result, you get a theme with “stuff” customized to meet your business needs.
#2. More customization opportunities and easier updates. In most cases, any kind of customization can be complex for ready-made themes. While custom ones can always be changed and improved by a developer. Using a theme designed for your business, you get a product that can be upgraded in the future when the new features come out.
#3. Warranty and support. Using a custom admin template, you can get access to the support from developers. It means that out-of-the-box solutions should not scare you off when you think about the future. If anything goes wrong with your custom theme developed by a professional team, you can rely on them to fix the problem as soon as possible. They understand the importance of keeping the high level of their services. Warranty that comes with most of the custom themes will also ensure your online store safety.
#4. Bug fixes. Whenever you find a bug or see any problem with the theme, you don’t have to wait for the future theme update to get the problem solved. With a custom theme, you inform your developers about the existing issue and get help. Moreover, they should provide you with a website testing to avoid any unexpected problems and fix all the possible bugs before they damage your business or job performance.
Discover our step-by-step guide with the process of creating a custom admin theme in Magento 2 and take your online store management experience to the next level.
How to create Magento 2 admin theme
If you are not satisfied with admin themes available at the official or third-party marketplaces and possess the necessary development skills and knowledge, following our guide you can simply create and set a Magento 2 admin theme for your ecommerce. Let’s find out how you can do it:
Step #1: set Magento 2 in Developer mode by executing the php bin/magento deploy:mode:set developer command.
Step #2: create a folder for the new Magento admin theme < VendorName>/<theme_name> at the route app/design/adminhtml.
In our case, we’ve got app/design/adminhtml/BelvG/newAdminTheme.
Step #3: create a theme.xml file and insert the following content:
|
1 2 3 4 5 |
<?xml version="1.0"?> <theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd"> <title>MTK Theme</title> <parent>Magento/backend</parent> </theme> |
Step #4: create registration.php with the following content:
|
1 2 3 4 5 6 |
<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::THEME, 'adminhtml/BelVG/AdminTheme', __DIR__ ); |
Step #5: create the folders for the necessary changes.
For instance, we created a new app/design/adminhtml/Belvg/newAdminTheme/web folder for media files.
At this point, we have already created the theme, but it is still not connected. To connect the admin theme, we create a specialized < VendorName>/< ModuleName > module in the app/code/ folder.
Step #1: create a registration.php file.
|
1 2 3 4 5 6 7 |
<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Belvg_AdminTheme', __DIR__ ); |
Step #2: create etc/ folders and the module.xml and di.xml files in it.
module.xml
|
1 2 3 4 5 6 7 8 9 10 |
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="Belvg_AdminTheme" setup_version="1.0.0"> <sequence> <module name="Magento_Theme"/> </sequence> </module> </config> |
di.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <type name="Magento\Theme\Model\View\Design"> <arguments> <argument name="themes" xsi:type="array"> <item name="adminhtml" xsi:type="string">Belvg/AdminTheme</item> </argument> </arguments> </type> </config> |
Step #3: execute the following commands to register the module:
php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy –f
php bin/magento cache:flush
How to change admin theme in Magento
If you wish to override a template file for admin theme, the best way to do this is to copy this file from vendor/magento/module_name folder into app/design/adminhtml/
For instance, we copy the vendor/magento/module-contact/view/frontend/email/submitted_form.html file into app/design/adminhtml/Belvg/newAdminTheme/Magento_Contact/email/submitted_form.html.
If you need to create another admin theme and inherit it from the recently created one, then you can follow the guide we outlined above, and include the recently created theme into the theme.xml file of the parent tag.
|
1 2 3 4 5 |
<?xml version="1.0"?> <theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd"> <title>MTK Theme 2</title> <parent>Belvg/newAdminTheme</parent> </theme> |
What are the best Magento admin theme extensions?
In case you feel the lack of expertise or need time to create a custom Magento admin theme yourself, it is no problem – there is a wide selection of admin themes for Magento available at the marketplaces. We selected the top 3 Magento admin theme extensions and can help you make the right choice.
Magento 2 Development
Take your online store to the next level with BelVG Magento 2 Development
VISIT THE PAGEMagento 2 Admin Theme
This Magento admin responsive theme is a great tool to simplify and enhance the store admin work. The theme is Retina Ready and user-friendly, supports RTL and has attractive icons for front admin. Magento 2 admin theme also supports automatic translation to the various languages and is frequently updated by the developers, which means constant improvement and new features.
Compatibility: Magento 2.0.0 – Magento 2.1.x
Cost: free.
Magento 1 & 2 Responsive Admin Template
This Magento admin theme has a modern, stylish design of more than 100 pages, easy to install and intuitive to use. Due to its clean and high-quality code, it is simple to customize it further. The theme implements a search tool that allows you to find anything in the admin panel within seconds. Also, a peculiar icon font will make your admin panel look more attractive and peculiar.
Compatibility: Magento 1.9.0 – Magento 2.3.0
Cost: $85.38.
Wunderadmin – Magento admin theme
Change the way your admin panel looks and feels with Wunderadmin theme for back office. The theme allows you to customize the color scheme of the admin interface and upload your company logo, promoting the corporate spirit among the company employees. The theme requires no programming skills and is simple to set up and configure.
Compatibility: Magento 1.7 – 1.9
Cost: $37.
Haven’t found the theme that suits your needs and requirements? Turn to BelVG for Magento custom development and we will create the theme you need from scratch.
Wrapping it up
Hopefully, we’ve clarified all the details about the topic of Magento admin themes. We believe the information we provided is useful to both developers who are searching for a clear guide on how to create a custom Magento admin theme and store admins or owners who are interested in the top-rated Magento admin theme extension. All in all, if you are looking for a reliable Magento development partner to bring your ecommerce vision to life, BelVG is ready to help!
Have any questions or comments? You are welcome to leave them down below!
Partner With Us
Looking for a partner to grow your business? We are the right company to bring your webstore to success.
Talk to Andrey
Awesome blog…customizing theme could help to better arrangements for content & personal styling.