A theme defines how the elements and overall website are displayed to users. It integrates custom templates, layouts, styles, and graphics to provide a cohesive experience for a Magento store. There are several ways to create custom themes in Magento 2. You can use Magento Theme Builder Software, such as TemplateToaster, or opt for manual coding. This process utilizes the theme.xml file, introduced in Magento 1.9, and employs a new folder structure in Magento 2. This structure allows for the selection of unlimited parent themes to inherit from, as well as the ability to configure the theme.xml file in your theme.

For instance, if you wish to create a new theme based on the Magento “Blank” theme, you would start by creating a new folder in app/design/frontend for example, Mavenbird/simple. Then, you would create a theme.xml file in this directory, specifically at app/design/frontend/Mavenbird/simple. It is advisable to copy this file from app/design/frontend/Magento/blank/theme.xml, as you will be basing your new theme on Magento 2 Blank theme.

Magento2

9 Simple Steps To Create Magento 2 Theme:


  1. Creating a Magento theme folder
  2. Declare your theme
  3. Composer package
  4. registration.php file
  5. Creating static files, folders
  6. Configure catalog product images
  7. Declare Theme Logo
  8. Basic layout elements
  9. Layout files types and conventions

So your app/design/frontend/mavenbird/theme.xml file should look something like this:


  Mavenbird Simple
  Magento/blank

Theme structure

Theme Folder structure

app/design/frontend/Mavenbird/
    ├── simple/
    │   ├── etc/
    │   │   ├── view.xml
    │   ├── web/
    │   │   ├── images
    │   │   │   ├── logo.svg
    │   ├── registration.php
    │   ├── theme.xml
    │   ├── composer.json

is the theme vendor. e.g: Mavenbird

is the theme name. e.g: simple

1. Creating a Magento theme folder

  • Go to app/design/frontend
  • Create a vendor folder: app/design/frontend/vendor, e.g: app/design/frontend/Mavenbird
  • Create a theme folder: app/design/frontend/vendor/theme, e.g: app/design/frontend/Mavenbird/simple 
app/design/frontend/
    ├── Mavenbird/
    │   │   ├──simple/
    │   │   │   ├── ...
    │   │   │   ├── ...

2. Declare your theme

  • Now that you have the folder app/design/frontend/Mavenbird/simple, create a file named theme.xml.
  • This file defines basic information about your theme, including:
    • Name: The name of your theme.
    • Parent theme: Specify if your theme inherits from an existing theme.
    • Preview image: An image to represent your theme visually.

     Mavenbird Simple 
     Magento/blank 
     
         media/preview.jpg

3. Composer package

Composer is a tool used for managing dependencies in PHP. It enables you to specify the libraries that your project requires, and it takes care of installing or updating them accordingly.

If you want to distribute your theme as a package, you need to add a composer.json file to your theme's directory and register the package on a packaging server.

Here’s an example of a composer.json file:

{
    "name": "mavenbird/simple",
    "description": "N/A",
    "require": {
        "php": "~5.5.0|~5.6.0|~7.0.0",
        "magento/theme-frontend-blank": "100.0.*",
        "magento/framework": "100.0.*"
    },
    "type": "magento2-theme",
    "version": "100.0.1",
    "license": [
        "OSL-3.0",
        "AFL-3.0"
    ],
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}

4. registration.php file

You can add the following content to register the theme to Magento 2

/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/Mavenbird/simple',
    __DIR__
);

You should change Mavenbird, simple to your vendor, theme name.

5. Creating static files, folders

A design typically includes various static files like JavaScript, CSS, images, and fonts. These files are organized into different folders within the web directory of the theme package.

Below is the folder structure:

app/design//Mavenbird/simple/
├── web/
│ ├── css/
│ │ ├── source/ 
│ ├── fonts/
│ ├── images/
│ ├── js/

Tips

In Magento 2, when developing a theme or extension, if you modify any files within the app/design/<area>/Mavenbird/simple/web folder, you need to clear the static files located in pub/static and var/view_preprocessed. Otherwise, the changes will not be reflected on the frontend.

6. Configure catalog product images

As highlighted in the theme structure mentioned earlier, there is a file named etc/view.xml, which serves as a configuration file. This file is mandatory for a Magento 2 theme but can be optional if it already exists in the parent theme.

To add this file, navigate to app/design/area/Mavenbird/simple/ and create an etc folder along with a view.xml file inside it. You can copy the view.xml file from the parent theme, such as the Blank theme, located at app/design/frontend/Magento/blank/etc/view.xml.

Now, let's proceed with updating the image configuration for the catalog product grid page.


    250
    250

In view.xml, image properties are configured in the scope of element:


...

Image properties are set for each image type, which is specified by the id and type attributes of the <image> element:


	
	100  
        100

7. Declare Theme Logo

In Magento 2, the default logo is located at theme_dir/web/images/logo.svg. In your theme, you have the option to change it to different file formats such as PNG or JPG, but you must declare the new format.

The logo size should be set to 300x300 pixels. To do this, open the file theme_dir/Magento_Theme/layout/default.xml. 


    images/custom_logo.png
    300 
    300

8. Basic layout elements

The fundamental components of Magento page design are blocks and containers.

A container serves the primary function of defining the content structure of a page. It does not contain any additional content other than the content of the included elements. Examples of containers include the header, left column, main column, and footer.

Magento2

9. Layout files types and conventions

Module and theme layout files are categorized using the following terms to differentiate the layouts offered by various application components:

Base layouts: These are layout files provided by modules, typically found in the following conventional locations:

  • Page configuration and generic layout files: module_dir/view/frontend/layout
  • Page layout files: module_dir/view/frontend/page_layout

Theme layouts: These are layout files provided by themes, and their conventional locations are as follows:

  • Page configuration and generic layout files: theme_dir/Namespace_Module/layout
  • Page layout files: theme_dir/Namespace_Module/page_layout

Create a theme extending file

Instead of copying extensive page layout or page configuration code and modifying it to suit your needs, Magento allows you to create an extending layout file that contains only the changes you wish to implement.

To add an extending page configuration or generic layout file:

theme_dir
 |__/Namespace_Module
   |__/layout
     |--layout1.xml
     |--layout2.xml

For example, to customize the layout defined in Magento_Catalog_module_dir/view/frontend/layout/catalog_product_view.xml, you need to add a layout file with the same name in your custom theme, as follows:

theme_dir/Magento_Catalog/layout/catalog_product_view.xml

theme_dir
 |__/Namespace_Module
   |__/page_layout
     |--layout1.xml
     |--layout2.xml

Override base layouts

Overriding is not required if a block has a method that negates the effect of the originally invoked method. In such cases, you can customize the layout by adding a layout file that invokes the canceling method.

To add an overriding base layout file (to override a base layout provided by the module), place a layout file with the same name in the following location:

theme_dir
  |__/Namespace_Module
    |__/layout
      |__/override
         |__/base
           |--layout1.xml
           |--layout2.xml

These files override the following layouts:

  • module_dir/view/frontend/layout/layout1.xml
  • module_dir/view/frontend/layout/layout2.xml

Override theme layouts

To add an overriding theme file (to override a parent theme layout):

theme_dir
  |__/Namespace_Module
    |__/layout
      |__/override
         |__/theme
            |__/Parent_Vendor
               |__/parent_theme
                  |--layout1.xml
                  |--layout2.xml

These files override the following layouts:

  • parent_theme_dir/Namespace_Module/layout/layout1.xml
  • parent_theme_dir/Namespace_Module/layout/layout2.xml

Creating a Magento 2 theme involves defining its structure and customizing the appearance of your store. Begin by setting up the necessary directories and configuration files to establish your theme.

Next, implement your design elements, including layouts, styles, and templates, to create a unique shopping experience. Finally, test your theme thoroughly to ensure it works seamlessly across all devices.