Frontend Developer Guide

Introduction

This document provides instructions for creating and installing custom storefront themes for a Magento application. It describes Magento’s content rendering process and explains the view layer of the system to the extent required to build a theme efficiently. The document also walks through everyday frontend developer’s tasks.

Developing the view part of a custom module and customizing the Magento Admin panel design is out of the scope of this guide.

Frontend developers can use this guide to create custom themes to tailor the Magento storefront for a specific customer.

You can apply these levels of customization to your site, where the levels require different development skills:

You can make relatively simple changes to your site using cascading style sheets (CSS) to change colors and the look-and-feel of various interface components, replacing images, and other relatively cosmetic changes. For more advanced styling, familiarity with LESS (Leaner Style Sheets) and XML (Extensible Markup Language) is helpful.

No structural changes are made to pages—you accept the structure of the site provided by default by modules you load on to your site.

This can be a good starting point for a site as it requires the least effort and knowledge.
A small step beyond changing CSS and images on your site is to make changes to the HTML generated by existing modules.

This requires rudimentary PHP skills to adjust PHTML template files.

Although PHP coding is involved, this is typically copying and pasting small fragments of PHP code from existing template files into a new template file with differently structured HTML.

This can be useful if the existing HTML generated does not have sufficient CSS class names or HTML elements to achieve the presentation change you would like to achieve.
The next level of sophistication is to make structural changes to your site by moving functionality between places on a page or to completely different pages.

This is achieved using the Magento layout engine. No PHP coding is required to make layout changes, but the layout engine is moderately sophisticated.
Finally, you can develop new modules to add new custom functionality to your site or to extend the functionality provided by existing Magento or third party modules.

This third level of customization is not addressed in this guide.

See the Developer Guide for details on how to develop new modules.

This requires PHP programming knowledge in addition to knowledge of all of the preceding areas.

There have been some inquiries about the status of the Visual Design Editor (VDE), which is currently part of the Magento development code base. The VDE enables assigning and unassigning themes, editing theme CSS and JS files, changing page layouts, and managing blocks and their positions on pages in a WYSIWYG mode. We’d like to clarify that to meet higher priority objectives, the VDE will not be part of the initial Magento release. Future plans for the VDE will be communicated at a later point in time. You are welcome to continue to provide input on the VDE, but please note that we will not be actively reviewing or actioning these comments in the near term.

Frontend development prerequisites

To implement what is discussed in this guide, you need a working Magento installation and the following browser versions installed on your device:

Storefront and Admin:

Internet Explorer 11 or later, Microsoft Edge, latest–1
Firefox latest, latest–1 (any operating system)
Chrome latest, latest–1 (any operating system)
Safari latest, latest–1 (Mac OS only)
Safari Mobile for iPad 2, iPad Mini, iPad with Retina Display (iOS 12 or later), for desktop storefront
Safari Mobile for iPhone 6 or later; iOS 12 or later, for mobile storefront
Chrome for mobile latest–1 (Android 4 or later) for mobile storefront

Here, latest–1 means one major version earlier than the latest released version.

To use this guide, you must be familiar with:

CSS, CSS 3, and LESS
HTML and HTML 5
XML
JavaScript
PHTML, PHP (Basic)
Responsive Web Design (RWD)