Magento 2 Theme Design: Create stunning and responsive Magento 2 themes for your business, Second Edition

As with other e-commerce systems, Magento allows products to be added, edited, manipulated, and organized within categories. You are able to control your product's names, descriptions, prices, and upload multiple photographs for each product in your store. Magento also lets you create variations of products in your store, so you can have one product that is available in multiple colors (such as blue, red, and black) within Magento. In other e-commerce systems, you may have to add the blue, red, and black products as three separate products.

In addition to these standard e-commerce features, Magento also has the ability to perform the following:

Additional features are available in Magento Enterprise Edition, but this book concentrates on Magento 2 Community Edition; everything in this book can be applied to all editions of Magento 2.

There are some fairly major differences between Magento 1 and Magento 2. Magento 2 provides major updates on its previous version after some hard work to create the best solutions to old issues such as performance and security. The updates can be illustrated by the following list:

Magento 2, compared with Magento 1.9, shows some changes, but more than that, there is an improvement in the system's behavior and processes. The code is more organized; it separates the Magento framework's native extensions, providing a powerful environment for modularization and solution development:

The main changes in the structure of Magento 2 are as follows:

In Magento 1, the theme system works by rendering the layout files (PHTML) from the app/design/frontend/MyTheme directory and by rendering the CSS, JS, and Image files from the skin/frontend/MyTheme directory. However, in Magento 2, all the layout and CSS files are in the same directory, Theme.

The themes of Magento 2 are located in the app/design/frontend/<Vendor>/ directory. This location differs with built-in themes, such as the Luma theme, which is located in vendor/magento/theme-frontend-luma.

The different themes are stored in separate directories:

Each Vendor can have one or more themes attached to it, so you can develop different themes inside the same Vendor.

The theme structure of Magento 2 is illustrated as follows:

How Magento 2's theme structure works is quite simple to understand: each <Vendor>_<Module> corresponds a specific module or functionality of your theme. For example, Magento_Customer has specific CSS and HTML files to handle the customer module of the Magento vendor. Magento handles a significant number of modules. So, I strongly suggest you navigate to the vendor/magento/theme-frontend-luma folder to see the available modules for the default theme.

In the structure of Magento 2, we have three main files that manage the themes' behavior:

All the theme files, inside the structure explained in the previous section, can be divided into Static View Files and Dynamic View Files. The Static View Files are not processed by the server (images, fonts, js) and the Dynamic View Files are processed by the server before delivering the content to the user (template and layout files).

Static files generally are published in the following folders:

In Chapter 2 , Exploring Magento Themes, you will see this structure in action by exploring the default themes of Magento 2. Now, let's take a look at a showcase of running Magento 2 solutions.

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:

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:

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

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

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:

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

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

There are great options in the market to help us create the local development environment to work with Magento 2:

You can feel free to choose your option to use as a solution. In this book, will be suggesting using of XAMPP.

XAMPP is a complete web development environment. In its install package you can find Apache, MySQL, PHP, and Perl: everything that you want to develop your solutions.

You may be able to guess the meaning of XAMPP, but the X before the AMPP means cross or cross-platform. So, we have: Cross-platform, Apache, Maria DB, PHP, and Perl.

The goal of XAMPP is to build an easy-to-install distribution for developers to get into the world of Apache. XAMPP is a project of Apache Friends, a non-profit project to promote Apache Web Server.

But why are we working with this software? Let's find out:

So far so good, but how about doing some action?

First of all, let's access the XAMPP website at its URL, https://www.apachefriends.org :

XAMPP has three distinct versions for different operating systems (OSes): Windows, Linux, and OS X. Choose your preferred version to download and start the installation process.

XAMPP for Windows has three different kinds of installation files:

The Installer (.exe) is the most popular process to install. Please download it and execute to start the installation process:

The following are the installation steps of XAMPP:

XAMPP for Linux has two main versions of the installation file:

Choose the file according to your architecture and follow these steps:

sudo ./xampp-linux-*-installer.run

XAMPP is now installed in the /opt/lampp directory.

To start XAMPP, execute this command in the terminal:

sudo /opt/lampp/lampp start

To test if everything is working, type http://localhost in your favorite web browser and you should see the XAMPP start page:

To install XAMPP for OS X you simply follow these steps:

The XAMPP htdocs directory is the docroot folder of your server. Everything that you save in the htdocs folder, you can access via the browser. For example, if you save index.php inside htdocs, you can access this script by entering this URL: http://localhost/index.php. If you save your file in the packt directory, you can access it by going to http://localhost/packt/index.php. Piece of cake!

First of all, we need to create a user on the Magento website (http://www.magento.com). To download Magento 2 Community Edition, click on My Account, and after clicking the button labeled Register, fill in the form and confirm your registration.

Once registered, you will be able to download Magento 2. Access the Products menu, Open Source/CE, and finally View Available Downloads (https://www.magentocommerce.com/download):

On this page, we have three important options:

Please choose Full Release with Sample Data to download. Extract the compressed files in the XAMPP htdocs directory and rename the new directory packt.

Before we start our Magento installation, we'll need to create a new MySQL database instance to store the Magento data. phpMyAdmin is a MySQL web app to manage your database:

By this point, you can see this installation page on your browser:

Let's start Magento installation by following these steps:

After following these steps, you have Magento 2 running! You can access your new site by going to http://localhost/packt :

And you can access the admin area by going to http://localhost/packt/admin_packt :