Creating a new Magento Blank theme may be a challenging task. That is especially the case when you notice that this one has a different structure than Magento 1. The first time you approach this platform, you may feel a bit overwhelmed. Not knowing where to start is the expected reaction. However, as soon as you start to dig deeper, youll see that the file structure is well-organized. Not only that, but youll also notice that its ability to override content is much better, too. Templates in M2 having HTML5 tags built-in, CSS3, and LESS usage all make this platform a refreshing novelty. Here is how to install and use it properly!
Table of Contents
Installing
First things first, youll need to install this program, and there are several ways to do so. An installation guide will help you do this properly. With Apache (2.2 or 2.4), PHP (5.5.x or 5.6.x), and MySQL (5.6.x), youll have everything you need to start.
A good idea is to use a composer. That will help you manage the components and their dependencies. Once youve installed the program, you should get familiar with the theme structure. One entirely new improvement is that you can create unlimited parent themes. Keep these differences in mind, and youll have no issue creating the new theme.
M2 fallback system
Before you start creating, though, you should learn about the fallback system. Defined by the theme.xml file, the system serves to tell you which parent to fall back on. Since this version has different folder names, you should pay more attention.
Here, when creating the theme, you go to app/design/frontend/
Creating theme folder
Now that you know the basics, you can start. The first step is to create a theme folder. Once you go to app/design/ frontend, youll be able to create a vendor folder app. Youll create the Vendor directory inside of the frontend directory.
To do that, youll have to go to app/design/frontend/
Defining the theme
Every theme needs to contain relevant information. Data such as Name and Parent theme should be there. A preview image is also an important piece of information. For this reason, its significant to declare your theme. Creating theme.xml on the root of the theme folder will enable you to do this.
While the name is necessary and the parent theme is important, declaring an image is an optional step here. For Magento web development, being thorough and including more details is always a good idea. As a result, youll improve both UI and UX, speed up page loading times, and benefit your business in many other ways.
Composer package and registration.php file
As these themes are distributed as Composer packages, this could be your next step. You should create a composer.json file within the theme. However, not doing this wont be a mistake. Its optional, and you could always edit the file copied from Magento Blank.
Whats not optional is adding a registration.php file. This will go into your file themes toot. Adding >/registration.php to /app/design/frontend/
Creating static folders and files
Organizing the directory structure is the next step. JavaScript, CSS, and fonts are just some of the static files that will be placed in your theme. To be as organized as possible, the folders containing these are stored on the web of theme package.
Since Magento 2 has no skin folder, this web folder will store static files. Updating the files will also need to be followed by some commands. Without php bin/magento setup:upgrade; php bin/magento setup:static-content:deploy -f; php bin/magento cache:flush, the changes wont be there on the fronted side.
Configuring catalog product images
The fifth step is catalog product images configuration. If a file like this one already exists in the parent theme, you wont have to create it. Otherwise, you will be required to do it. The configuration details will be stored in this file.
For instance, gallery, file, breakpoints, and product image, along with other relevant details, will all be here. The configuration will allow you to apply your theme at the end of the process.
Defining the logo
At the very end of the Magento 2 theme creation, youll be required to define the logo. While declaring the logo is mandatory, declaring its size is optional. At
You could use any type of file for this. An SVG might be a good option if youre looking for suggestions. Once you command your theme to use this logo, you should edit it. As soon as the logo matches your requirements, your theme is good to go.
Activation
Finally, its time you activated your theme. As soon as youve done all of the previous steps, you can open Content > Design > Theme. If the theme has been properly declared, you should see it in this list. This is where youll see whether youve done a good job so far!
If you do see your theme in the list, you should go to Stores > Configuration > Design. Here, you should make sure to select the right scope. The moment you save changes at Content > Configuration > Edit > Select, you should be welcomed to your new theme!
Conclusion
Even if it seems complicated, mastering new platforms can be done. Patience and discipline will make you capable of conquering any platform out there. With this guide, youll be able to approach Magento 2 quickly and create new themes efficiently!
About the author
Rick Seidl is a digital marketing specialist with a bachelors degree in Digital Media and Communications, based in Portland, Oregon. He carries a burning passion for digital marketing, social media, small business development, and establishing its presence in a digital world, and is currently quenching his thirst through writing about digital marketing and business strategies for Find Digital Agency.
