Beginners Guide to theming in Magento 2
Technology

Beginners Guide to theming in Magento 2

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, you’ll see that the file structure is well-organized. Not only that, but you’ll 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!

Installing

First things first, you’ll 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), you’ll 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 you’ve 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 you’ll 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/<vendor>/<theme>. Another thing to remember is that encapsulated modules are default. Due to this, you’ll have templates, js, and other assets neatly organized. 

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, you’ll be able to create a vendor folder app. You’ll create the Vendor directory inside of the frontend directory. 

To do that, you’ll have to go to app/design/frontend/<vendor_name>. The next step is to create the theme folder. Make sure to name the folder something relevant and, if possible, meaningful. This will create the perfect base for declaring the theme. 

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, it’s 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, you’ll 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 won’t be a mistake. It’s optional, and you could always edit the file copied from Magento Blank.

What’s not optional is adding a registration.php file. This will go into your file theme’s toot. Adding >/registration.php to /app/design/frontend/<Vendor_Name>/<Theme> will be the final step in declaring your theme. Make sure that the code matches your theme structure. 

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 won’t 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 won’t 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, you’ll be required to define the logo. While declaring the logo is mandatory, declaring its size is optional. At <theme_dir>/Magento_Theme/layout/default.xml, you’ll be able to define the logo. 

You could use any type of file for this. An SVG might be a good option if you’re 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, it’s time you activated your theme. As soon as you’ve 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 you’ll see whether you’ve 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, you’ll be able to approach Magento 2 quickly and create new themes efficiently!

About the author

Rick Seidl is a digital marketing specialist with a bachelor’s 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.

Leave a Reply

Your email address will not be published.