Sign In Start Free Trial

Book Overview & Buying
Table Of Contents
Feedback & Rating

Magento 2 Theme Design

By : J Miguel, Richard Carter

2.7 (7)

Magento 2 Theme Design

2.7 (7)

By: J Miguel, Richard Carter

Overview of this book

Magento is the e-commerce software and platform trusted by the world’s leading brands. Using Magento’s powerful theming engine, you can control the look, content, and functionality, and easily launch a flexible e-commerce website. However, because of its powerful features, developing Magento themes is easier said than done. This book aims to leverage the enhancements to theme designing in Magento 2 to the fullest. It will show you how to gear up the performance of your e-commerce website. We begin by introducing Magento 2 and its features along with implementing a local development Magento environment. We then move on to discuss the concepts of the Magento theme structure such as templates, inheritance, customization, and override. Further on, we explore the Magento UI Library, which is a new feature available in Magento 2.0. We will create a new Magento 2.0 theme named MyCake Store using Magento Bootstrap from Maven E-commerce and also create print strategies for the Magento 2.0 theme. We will also create and customize a new theme proposal for the Magento admin panel. At the end, we will integrate Magento 2.0 to Twitter and integrate it with social bookmarking and finally deploy our new Magento 2.0 theme.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

1. Introduction to Magento 2

1. Introduction to Magento 2

What is Magento?

Showcase of Magento themes

Challenges of Magento 2 theme design

Why create a custom Magento 2 theme?

Installing Magento 2

Summary

2. Exploring Magento Themes

2. Exploring Magento Themes

Magento terminology

What makes a Magento theme?

Default Magento 2 themes

Blocks and pages in Magento

Magento theme inheritance

Custom Variables

Good practices in Magento theming

Summary

3. Magento 2 Theme Layout

3. Magento 2 Theme Layout

Magento 2 and Model-View-Controller architecture

Magento 2 Command-Line Interface

Magento 2 theme files

Magento 2 cache system

Magento 2 layout system

Creating your first Magento 2 theme

Creating a theme logo

Applying the theme

Magento 2 theme debug

Summary

4. Magento UI Library

4. Magento UI Library

Magento 2 UI

LESS and CSS preprocessing

LESS compilation in Magento 2

The Magento UI library

Testing the Magento UI library

Summary

5. Creating a Responsive Magento 2 Theme

5. Creating a Responsive Magento 2 Theme

The BookStore theme project

Managing dependencies with Composer

Building the BookStore theme

Developing Magento 2 templates

Summary

6. Magento 2 Styles Debugging

6. Magento 2 Styles Debugging

Increasing productivity by creating flow test styles

Debugging styles in Magento

Using the Grunt task runner to debug

Applying changes to Bookstore with Grunt

Summary

7. Magento UI Components

7. Magento UI Components

The Magento UI components

UI listing/grid component

UI listing/grid secondary components

Form component

UI components control definition file

Magento sample module form

Summary

8. Magento Layout Development

8. Magento Layout Development

The Magento page layout

Layout instructions and types

Layout customizations

Customizing templates

Summary

9. Magento 2 JavaScript

9. Magento 2 JavaScript

Magento 2 JavaScript structure

Initializing and locating JavaScript component

Magento jQuery widgets

Creating a jCarousel component for Promo module

Summary

10. Social Media in Magento 2

10. Social Media in Magento 2

Magento components

Development workflow

Developing the Sweet Tweet module

Summary

11. Theme Development Best Practices

11. Theme Development Best Practices

Why I should worry about it?

Best practices in Magento 2 development

Always use the Magento architecture

Strategies for customizing your themes

Seeking external resources to improve

Summary

12. Magento Theme Distribution

12. Magento Theme Distribution

The packaging process

Packaging your theme

Hosting your theme

Magento Marketplace

Summary

Customer Reviews

2.7 (7)

5 star

28.6%

4 star

14.3%

3 star

0

2 star

14.3%

1 star

42.9%

Showcase of Magento themes

There is a plethora of e-commerce websites that make use of Magento, and some of them truly demonstrate how flexible Magento can be when it comes to theming. Here is a selection of live Magento stores that really push the platform beyond the typical Magento themes you've already seen.

Venroy

Venroy is a menswear department store in Australia. Their Magento 2 store (https://www.venroy.com.au) follows the basic Magento 2 design principles and RWD design:

Venroy

The store's homepage was built in a different way compared to the Luma default theme available in Magento 2. The primary navigation of the Venroy website, for example, is displayed in the top-center of the screen and it makes it highly visible to customers.

When interacted with, the store's category view expands to display more specific sub-categories:

Venroy

The product detail view is also heavily customized, with information on the product, delivery, and size guides all provided with their own separate blocks:

Venroy

Alcatel Onetouch

Alcatel Onetouch (http://www.alcatelonetouch.us/) is an international mobile technology brand that adopts Magento 2 to sell its products:

Alcatel Onetouch

As you can see, the homepage is quite heavily customized, with the featured products displayed on the homepage.

The product detail page, which is part of the Magento store, is similarly styled in an appealing way, with plenty of screen space given to information such as the product reviews, details, technical specifications, and manual:

Alcatel Onetouch

Cultcha Kids

Cultcha Kids (https://www.cultchakids.com.au/) is a toy store, and is therefore, focused on a younger audience, with specific and famous brands:

Cultcha Kids

The product detail page is fully customized to the store's purposes and audience, as you can see in the following screenshot:

Cultcha Kids

Search

Your notes and bookmarks