Magento 2 provides tons of templates, layouts, and styles as default. We as Magento developers can override these files to make our own customizations. It essentially speeds up the entire development process while keeping it simple as well. In order to do the override, you first need to know how these templates, layouts, and styles in Magento 2 used and where they are located. So, let us dive right into it.
Identifying the Location of These Templates
Frontend developers love the inbuilt feature that provides hints to where these templates, layouts, styles in magento2 are located. There are two different methods to turn this feature on and off. You can do it from the GUI(graphical user interface) or from CLI(command-line interface) as well. Let us explore these methods in further detail.
GUI
To toggle this feature in GUI you will have to log in to your storefront admin page. This page consists of a prebuilt toggle hints feature. Please navigate to Stores>Settings>Configuration>Advanced and click on the developer. Select the view from the dropdown menu on the upper left corner of the screen. It will determine the view that you want the hints for. Next, toggle template path hints for storefront and template path hints for admin to yes. Finally, save the config and that is it you are done.
CLI
To toggle this feature from CLI you will have to run a few commands.
Step 1:- you can either enable or disable this command.
$ sudo php bin/magento dev:template-hints:enable
Step 2:- Clean the cache to view the changes in the storefront.
$ sudo php bin/magento c:c config full-page
After successfully executing these commands you must refresh or reload the page to view changes. you can see the hints enabled for your entire layout of the page as shown in the below image.
The hints will enable you to get the location of layout and style files. However, once you determine the location of the files we recommend you not to edit these default files. Instead, override them and extend them with your own customizations. Going further we will learn how to deduce the exact location of layouts and styles in Magento 2 using these hints.
Finding the Location of Layout Files
In Magento 2 layouts are saved according to the respective modules. First, you need to decide which element you want to customize. After that determine its template file and which module it exists in. Then you can locate this module in the layout directory by easily doing a search. The path to default layout files is as follows <Parent>/<Module>/layout/. This directory can provide you the layout files for the element that you want to edit. These files can also be searched by navigating to <Module>/View and then going into frontend/layout and base/layout. You can place your own layout files with which you will override the default files in the following directory structure <Your_Theme>/<Module>/layout. You have the option to either override these layout files or extend them.
Finding the Location of Style Files
Style Files in Magento 2 can be found in the same way as we did for layout files. you can also use the browsers debugging tool to determine the class name then search the file in the specified module directory. The style directory is separate for each of the modules and themes as well as frontend and base areas. Their respective paths are listed below:-
- Base Module styles:- <Module>/view/base/web/CSS
- Frontend Module styles:- <Module>/view/frontend/web/CSS
- Your theme’s styles:- <Your_theme>/web/CSS
- Your theme’s modules styles:- <Your_theme>/<Module>/web/CSS
- Parent theme’s styles:- <Parent_theme>/web/CSS
- Parent theme’s modules styles:- <Parent_theme/<Module>/web/CSS
In a similar way to layouts, you can either choose to override styles or extend them for specific elements and modules. These files are mainly stored in two extensions .less and .css Learn More.
