Book Image

Magento 2 Theme Design - Second Edition

By : Richard Carter
Book Image

Magento 2 Theme Design - Second Edition

By: 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.
Table of Contents (18 chapters)
Magento 2 Theme Design - Second Edition
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface

Creating a theme logo


By default, in Magento 2 the theme logo is always recognized by the system with the name logo.svg. The Magento 2 also recognizes the logo's default directory as <theme_dir>/web/images/logo.svg. So, if you have a logo.svg file, you simply put the file in the right directory.

But if you want to work with a different logo name with a different format, you have to declare it in Magento by using the layout files declaration. We will make a declaration for this new logo in the Magento_Theme directory, because the new logo overrides the Magento_Theme module.

We will override this module by taking advantage of the fallback system. As you may have noticed, Magento has a specific pattern of declaring elements. It's the way that Magento organize its life cycle.

Let's declare a new theme logo:

  1. Choose one logo for the example and save the file as logo.png in app/design/frontend/Packt/helloworld/Magento_Theme/web/images directory.

  2. Move your new logo.png image to the images directory...