Core Principles for Theming in Magento 2 (On-Demand)

Magento Training Migration: Thank you for your interest in registering for a Magento U course during the Magento Training Migration period (June 26 – July 9). Please complete the Course Registration Inquiry Form to begin the process. Once you submit this form, a member of our Customer Engagement team will reach out to you with additional details. If you have any other questions, feel free to email

Free ON-DEMAND Magento Training: Everyone gets free access to all Magento U on-demand premium courses (including this course) through June 30th, 2020 to ensure teams are fully equipped to take their digital operations to the next level. Click HERE to get started now.


For this course, the following skills are required: CSS & CSS 3, HTML & HTML 5, XML, basics of PHP and comfortable with the use of the command line. To enhance your understanding of this course, the following skills are desirable: Responsive Web Design (RWD), LESS, and JavaScript is strongly recommended but not required. Students should have experience working with the Magento 1 platform.

Course Description

This course will introduce Magento 1 front end developers to the Magento 2 platform. Students will understand the fundamentals of Magento's templating system and learn how Magento themes work and all the components of a theme, especially layouts, page templates and block templates. Students will learn to customize both the look and feel and the functionality of a website at the theme level.

This course is based on Magento Community Edition v2.1.0

Course Outline

Unit 1: Overview of Theming in Magento
  • Introduction
  • Folder Structure
  • Static files classification
  • Deployment Process
  • Fallback Process
Theme Architecture
  • M1 <> M2 Comparison
  • .less files organization
  • Style-m and styles-l files
  • Customization approached for .less files
  • .less files deployment and compilation options
  • Using Grunt for deployment and compilation
  • Extending Grunt configuration
  • Non-less files deployment
Layout XML, Blocks & Templates
  • Layouts overview in M2
  • Layout files location
  • Page layouts
  • Basic CSS and JS inclusion
  • Layout files and directives
  • Intro into blocks
  • Templates