A Magento theme is a collection of layouts, templates, images, and styles that control a website’s appearance. Magento themes are generally available as Composer packages or archives. Those in Composer packages can be installed using Composer, while archives can be uploaded to the Magento filesystem and installed via the command-line.
By default, Magento offers two themes:
- Luma, a ready-to-use theme that is fully-responsive.
- Blank, a bare-bones theme to use for creating a custom theme.
Magento theme inheritance
Magento theme inheritance enables developers to extend theme appearance selectively without having to design themes from scratch. Using either of its default themes or even third-party themes as the parent theme, developers can create smaller ‘child’ themes that inherit and customize the parent theme’s look and feel without affecting the parent theme.
Besides saving time and providing ease-of-customization, Magento theme inheritance also creates a fallback system. If any of the view files in the child theme fail to load, Magento loads them from the parent theme instead.
Child themes inherit view configurations, layouts, templates, and static files from the parent theme, and only those files that are not overridden by the child theme will be used from the parent theme.
Magento theme structure
While most Magento themes are located under the app/design/frontend/<vendor> file path, they can reside in a different directory such as under vendor/magento/theme-frontend-<theme_code>.
Note: When using multiple themes by the same vendor, each one should be stored in a unique directory.
A typical Magento theme directory structure looks like this:
<theme_dir>/
├─<Vendor>_<Module>/
| ├─web/
| | ├─css/
| | | ├─source/
| ├─layout/
| | ├─override/
| ├─templates/
├─etc/
├─i18n/
├─media/
├─web/
| ├─css/
| | ├─source/
| ├─fonts/
| ├─images/
| ├─js/
├─composer.json
├─registration.php
├─theme.xml
While most of the files and folders are optional, the registration.php and theme.xml files are required every theme.
Besides the two required files, all other files can be divided into two categories as follows:
1. Static files
All files that are served by the browser without processing are called static files. They are usually present in directories under the <theme-dir>/web (except the ‘source’ sub-directory) and <theme-dir>/media paths.
A key difference between static and other theme files is that they do not participate in page generation even though they are referenced on web pages.
2. Dynamic files
Dynamic files are .less, template, and layout files that are processed or executed by the server to return a result on the client’s side.
Magento theme components
Now that you understand the general structure of a Magento theme let’s look at its three primary components.
1. Layouts
Layouts are further divided into three subcomponents: layouts, containers, and blocks.
Layouts provide structure to web pages using XML files to define the different containers and blocks on a page.
Containers are like skeletal structures that provide content structure to a webpage. Header, left/right column, main column, and footer are all examples of containers.
Blocks are the meat of the page responsible for rendering the UI elements of a page. They use templates to generate the HTML into its parent blocks. Product listings, tags, and category lists are all examples of blocks on a web page.
2. Templates
While the layout files determine what is loaded on a webpage, templates determine how the content inside layout blocks is presented on a webpage.
Overriding templates will help you customize the order of layout blocks on a page and modify how elements are grouped. They do not contain any logic and are only displayed when called in a layout file.
3. Styles
To simplify styling, Magento incorporates a CSS preprocessor called Less to manage complex CSS files. Both CSS and Less stylesheets can be used in a custom Magento theme to customize storefront styling.
When creating a custom theme, you can take either one of the following approaches to customize storefront styling:
- Override default Less files when inheriting from one of the out-of-the-box Magento themes.
- Create and compile your own CSS files using a third-party preprocessor.
- Use the in-built Less preprocessor to create your own .less files.
No matter which method you choose, you must always use Magento in the default or developer mode when working with styles. Production mode serves static files from the cache and does not allow writing or updating files on the filesystem.
The use of themes allows Magento users to customize the appearance of their stores easily and efficiently. This helps businesses stay a step ahead of the curve with attractive and high-performing websites.