Magento terminology

Before you look at Magento themes, it's beneficial to know the difference between what Magento calls vendors and what Magento calls themes and the distinguishing factors of websites and stores.

Magento vendors and themes

According to the official documentation, a Magento theme is a component that provides a visual design for an entire application area using a combination of custom templates, layouts, styles, or images. Themes are implemented by different vendors and are intended to be distributed as additional packages for Magento, similar to other components.

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

Each theme can have specific rules and custom layout files providing better flexibility both for administrators and developers. The Magento 2 theme structure can be described as follows:

The way that Magento's theme structure works is quite simple. 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.

I strongly suggest you navigate to the vendor/magento/theme-frontend-luma directory to see the available modules for the default theme. In the Magento 2 structure, we have three main files that manage the behavior of themes:

  • composer.json: Describes the dependencies and meta information
  • registration.php: Registers your theme on the system
  • theme.xml: Declares the theme on the system and is used by the Magento system to recognize the theme

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

Static view files generally are published in the following directories:

  • /pub/static/frontend/<Vendor>/<theme>/<language>
  • <theme_dir>/media/
  • <theme_dir>/web

Note

For further information, please access the official Magento theme structure documentation at http://goo.gl/ov3IUJ .

Magento websites and Magento stores

The terms websites and stores have a slightly different meaning in Magento than in general and in other systems. For example, if your business is called PacktPub, you might have three Magento stores (managed through the same installation of Magento) with the following names:

  • Book Store
  • Mag Store
  • Media Store

In this case, Magento refers to PacktPub as the Website and the stores are Book Store, Mag Store, and Media Store. Each store then has one or more store views associated with it, too. The simplest Magento website consists of a store and store view (usually of the same name):

A slightly more complex Magento store may just have one store view for each store. This is a useful technique if you want to manage more than one store in the same Magento installation, with each store selling different products (for example, the Blue Store sells blue products and the Yellow Store sells yellow products):

If a store were to make use of more than one Magento store view, it might be to present customers with a bilingual website. For example, our Book Store may have an English, Spanish, and Japanese store view associated with it:

Let's now create this website and stores setup in our Magento admin area by following this recipe:

  1. Open your favorite browser and log in to the admin area (http://localhost/packt/admin_packt).
  2. Navigate to Stores | All Stores.
  3. Click on the Create Website button, set as default, and save the new website with the name Packtpub and code packtpub.
  4. Click on the Create Stores button to create three stores, one at a time: the Book Store, Mag Store, and Media Store, which belong to the Packtpub website.
  5. Click on the Create Store View button to create three store views, one at a time: English, Japanese, and Spanish, which all belong to Book Store.

Take a look at the following screenshot:

Now Magento has three stores and three different views of Book Store. To test the views, navigate to the homepage (http://localhost/packt) and access the store view menu in the upper-right corner:

Note

For further information, please refer to the Magento 2 CE Edition - User Guide document available at http://goo.gl/Naew9J .