Continuing from our previous discussions about the key updates for front-end developers in Magento 2, we will now focus specifically on the changes to the templating system. While the modifications aren't overly extensive, it's essential for developers particularly those upgrading from Magento 1.x to Magento 2 to familiarize themselves with the new system.

This guide will walk developers through the updates to layout XML and the new overall project structure of Magento 2.

Here are example of layout file

/view/frontend/page_layout/2columns-left.xml

One of the most significant differences between Magento 1.x and Magento 2 is the overall project structure. In Magento 1.x, templates were defined in app/design/frontend/<package>/<your_theme>, while theme assets were located in skin/frontend/<package>/<your_theme>. However, in Magento 2, everything is consolidated into a single base folder location. This means there is no longer a separate skin folder for theme assets.

All of your templates and assets are now stored in:

app/design/frontend/ (which is the previous location for your templates).

You'll soon notice that, unlike in Magento 1.x, where all templates were stored in app/design/frontend/template, Magento 2 introduces several folders, as shown in the screenshot below.

Magento2

Each of these folders corresponds to a module in Magento 2, where templates or assets can be overridden in this theme. The default versions of each module are located in app/code/Magento. Let’s take a look at the structure of a typical module.

Magento2

Here’s an example of the checkout module within a custom theme. As you can see, it includes a folder for layout updates (which we’ll discuss later), a folder for templates, and a “web” folder that replaces the old skin/frontend/ structure. Instead of consolidating all sitewide assets and JavaScript in one folder, assets are now organized by module specifically, in this case, the Magento Checkout module.

If you look closely, you might also notice a template folder inside the web folder of this module. This is specific to a few Magento 2 modules (including Checkout) that utilize KnockoutJS for templating. We’ll explore KnockoutJS in greater detail in a future tutorial. These templates use .html files and incorporate internal logic (meaning no PHP is used).

As mentioned earlier, if you wish to override or modify the core modules’ templates and JavaScript, you’ll need to create a corresponding module folder in your theme that matches the path(s) of the files you want to override or extend.

For example, if you navigate to app/code/Magento, you’ll find all the default modules used by Magento 2 core. To override something in the Catalog module, you would create a folder in your theme named Magento_Catalog. This references the package_name in this case, the “Magento” portion of app/code/Magento and the part after the underscore refers to the module name, which is Catalog: app/code/package/module.

In other words, to override the contents of a module in app/code/package/module, you will need to create a folder named package_module in your theme.

Also, note that you can only override the contents of the view/frontend portion of the module within your theme (so app/code/Magento/Catalog/view/frontend maps to app/design/frontend/your_package/your_theme/Magento_Catalog). If you need to override Controllers and Blocks, that is done in a different location and typically requires a backend developer, which is beyond the scope of this guide.