Magento is an eBay Inc. company. © 2013 Magento, Inc. All rights reserved.

Magento 2 Fronted Architecture

© 2013 Magento, Inc. Page | 2

Magento 2 Platform Goals

Improve PerformanceEasier Upgrades High Quality Code

Update TechnologyEngage with Community Streamline Customization

© 2013 Magento, Inc. Page | 3

Consumers take a multi-device path to purchase

Source — Google Inc.

65%Start on a Smartphone

61%Continue on a PC/Laptop

4%Continue on a Tablet

25%Start on a PC/Laptop

11%Start on a Tablet

19%Continue on a Smartphone

5%Continue on a Tablet

10%Continue on a PC/Laptop

© 2013 Magento, Inc. Page | 4

Get Started

github.com/magento/magento2

© 2013 Magento, Inc. Page | 5© 2013 Magento, Inc. Page | 5

2 How to Create a Theme

© 2013 Magento, Inc. Page | 6

Single Place Frontend Development

This is where all the magic happens

© 2013 Magento, Inc. Page | 7

What Defines a Theme?

Vendor name (brand name)

Theme name

Theme preview for admin panel

Theme configuration file

© 2013 Magento, Inc. Page | 8

Theme Configuration File

theme.xmlTheme name

Path to preview

Path to parent theme

© 2013 Magento, Inc. Page | 9

Themes Relationships

© 2013 Magento, Inc. Page | 10

Multilevel Theme Inheritance

VendorName/Imagine

Module/view/frontend Magento/blank

VendorName/NewYear VendorName/SeasonSales

© 2013 Magento, Inc. Page | 11

Apply Theme

© 2013 Magento, Inc. Page | 12© 2013 Magento, Inc. Page | 12

3 How to Work with CSS

© 2013 Magento, Inc. Page | 13

Blank Theme Features

Modern Technologies Mobile First Responsive Design

Built with Magento UI library Compiled with Built-in PHP LESS Compiler

WCAG 2.0 AA Compliant

© 2013 Magento, Inc. Page | 14

Magento UI Library Documentation

lib/web/css/docs

© 2013 Magento, Inc. Page | 15

Blank Theme Structure

Modularized CSS:

• Upgradability

Magento 2 compiles CSS itself

• Performance

• Maintenance

• No tools required

• Anyone can edit styles quickly

• LESS Source and CSS is always synchronized

© 2013 Magento, Inc. Page | 16

CSS Extension

css/source/extend.less

© 2013 Magento, Inc. Page | 17

Blank Theme Structure

© 2013 Magento, Inc. Page | 18

NewYear Theme

NewYear

© 2013 Magento, Inc. Page | 19

Blank Theme Structure

Modularized CSS:

• Upgradability

Magento 2 compiles CSS itself

• Performance

• Maintenance

• No tools required

• Anyone can edit styles quickly

• LESS Source and CSS is always synchronized

© 2013 Magento, Inc. Page | 20

NewYear Theme: Image fallback

© 2013 Magento, Inc. Page | 21© 2013 Magento, Inc. Page | 21

4 How to Work with XML Layout

© 2013 Magento, Inc. Page | 22

What is Layout?

• Behavior of containers is predictable

• A wireframe of a page can be represented by bare containers

• With containers, there is no point to having nested elements in blocks

© 2013 Magento, Inc. Page | 23

Layout Extend

Theme/view/frontend/layout

© 2013 Magento, Inc. Page | 24

Layout Extend

© 2013 Magento, Inc. Page | 25

Layout Override

© 2013 Magento, Inc. Page | 26

Layout Override

© 2013 Magento, Inc. Page | 27© 2013 Magento, Inc. Page | 27

5 How to Work with Templates

© 2013 Magento, Inc. Page | 28

Template Override

© 2013 Magento, Inc. Page | 29

Template Override

© 2013 Magento, Inc. Page | 30

Layout Extend

Theme/view/frontend/layout

© 2013 Magento, Inc. Page | 31© 2013 Magento, Inc. Page | 31

6 Q&A

© 2013 Magento, Inc. Page | 32© 2013 Magento, Inc. Page | 32

7 Thank you!