8. Templates

Viktor Khliupko¹

(1)Duesseldorf, Germany

In this chapter, we will gather popular Magento 2 templates and themes. In addition, you will find some useful information on theme development in Magento 2, key aspects of the Magento 2 front-end architecture, as well as other features related to the Magento 2 theming.

Magento 2 Templates and Themes

We constantly update the list of Magento 2 themes here: Magento 2 Templates and Themes¹. You can find top solutions in the post. Besides, there are a lot of individual reviews of each theme listed there, so check further links to our blog.

Ketty Magento 2 Beta

Ketty Magento 2 Beta was among the first Magento 2 themes available for the platform. In addition to perfect look, it offers such features as responsive design, cross-browser support, slider, configurable swatches, Ajax cart, product zoom, improved checkout, and a user-friendly admin panel. This Magento 2 theme is free, you only have to pay with a tweet.

Get Ketty Magento 2 Beta

Live Demo

Crafts

Crafts is a free stunning theme designed for Magento 2, which supports the latest version of the platform. Nowadays, the key feature of modern Magento themes is responsive design, and Crafts is not the exception. This e-commerce Magento template ships with responsive web design. In addition, it offers off-canvas menu and three bonus theme skins.

Themeforest

Themeforest ² already offers a lot of Magento 2 themes. For instance, these: Porto³ and Everything Store Magento 2⁴. More themes are reviewed here: ThemeForest Templates⁵

Download Crafts 2.0

Crafts Installation Guide

Crafts on GitHub

Live Demo

TemplateMonster

Alternatively, check premium magento themes from TemplateMonster: TemplateMonster Magento 2 Themes⁶

Useful Links

Magento 2 Developer Documentation

Before starting any customizations related to Magento 2 templates and themes, it is extremely important to examine Magento 2 Developer Documentation . All articles here are divided into three categories: Get Started with Magento, System Administrators, and Developers. Although the information introduced in Developer Documentation covers all aspects related to such a Magento 2 component as themes, it is necessary to understand the whole platform before diving deep into Magento 2 templates and themes development.

Front-end Architecture of Magento 2

The core difference between Magento 2 and previous versions is that the front end is now updated with HTML5, CSS3, jQuery, and other newer technologies. The overall layout manipulation also differs a lot. The same is true about file structure and Magento UI library, which is now based on LESS preprocessor. The last one includes a built-in compiler.

All nuances of Magento 2 front-end architecture are described at Inchoo. The post consists of three parts. The first one is dedicated to theme workflow changes, the second part describes updates and improvements of layout, and the last one is about the new Magento UI library.

Magento 2: Serving Frontend Files

Magento 2: Serving Frontend Files. This article by Alan Storm will help you understand the way new technologies are integrated into the Magento 2 system by introducing you to such topics as Serving CSS and Javascript Files, Magento 2 Root Folder, Magento 2 Modes, Serving a Frontend Asset File, Magento 2 Static Asset Serving, etc. The information provided by Alan is vital for your further work with Magento 2 templates and themes.

Magento 2 Theme Structure by DCKAP

Before exploring Magento 2 themes and templates, it is extremely important to learn their structure. This topic is described in detail here: Magento 2 Theme Structure⁷.

Magento 2 Theming by Shero

In the Magento 2 Theming article on Shero, you can find such important things as updated PHP, CSS, and HTML requirements introduced in Magento 2; front-end development features, including CSS preprocessor, blank theme, UI library, and visual design editor; as well as key layout improvements. All these nuances are described here: Magento 2 Theming.

Core Principles for Theming in Magento 2

If you are looking for courses on Magento 2 Theming, then get ready to spend $375. For this money, you will get all the development skills necessary to implement and customize templates and themes on the popular e-commerce platforms. You can pay for the course here: Core Principles for Theming in Magento 2.

How to create a Magento 2 theme

This useful topic is covered by two sources: devdocs.magento⁸ and Magestore⁹. The official documentation includes six steps. It starts with creation of a theme folder. The second step is about theme declaration. Then the post shows how to configure images in Magento 2. The fourth step teaches how to add folders for static files. The next one is about a logo for your theme. The last step teaches how to create a theme preview.

In its turn, post on Inchoo will help you understand more about Magento 2 theme and template structure. The author divides his tutorial into two parts. The first one is about primary elements in Theme package. The second part reveals the secrets of its customization in Magento 2.

Magento 2 Templates and RequireJS

RequireJS is an important tool for Magento development. Being a JavaScript¹⁰ modular script loader, it is optimized for work within JS environments, so you can leverage all its power working with Magento 2 templates and themes. RequireJS will not only improve the quality of code, but also increase the speed of your projects. For further information, check this post: Advanced Development with RequireJS¹¹.

Handlebars and Magento 2 templates

With Handlebars, you can easily build semantic templates. The project is compatible with Mustache templates and in Magento 2 is used for dynamic loading of various template parts. For further information, visit its web site: Handlebars.

Grunt and Magento 2

Magento 2 templates and themes development is impossible without repetitive tasks. To streamline your routine, we recommend you to pay attention to Grunt, a JavaScript task runner. It is designed to automate such processes as compilation, linting, minification, unit testing, etc. All you need is to configure a Gruntfile. In Magento 2, Grunt simplifies the way you customize styles in a server-side compilation mode. For further information on Magento 2 themes and Grunt, follow this link: How to Use Grunt in Magento 2.¹² Additionally, there is a great article divided into two parts on Magleaks: Magento 2 Theming with Grunt / Less Part 1; Part 2.

Knockout in Magento 2 theme development

Being a stand-alone JavaScript implementation of the MVVM pattern, Knockout has a reputation of being a reliable tool which offers a clear separation between view components, domain data, and data to be displayed. Since Knockout relies on a clearly defined code layer, as a developer you get the ability to manage relationships between all available view components. For further information on Magento 2 theme development with Knockout, check the following links: