Magento 2 Magento Themes Magento 2 TutorialsDecember 26, 2016

How to Create Simple Test Magento 2 theme

With the release of Magento 2 in November 2015, several improvements in the platform’s framework and modular structure have been observed compared to Magento 1. However, the most significant improvement that set a distinction between the older version of Magento and Magento 2 is merchant experience and speed. In this tutorial we will show you how to code and integrate your very own theme for Magento 2. It must be noted that this tutorial is based on our experience while developing Magento 2 extensions and custom development projects from scratch. What Is a Magento Theme? In order to understand how we accomplished this, you must first understand what a Magento theme is. A Magento theme is built as a visual design involving templates, styles, layouts, visual detail, text and other elements to provide a consistent look and feel as an application. There are two design themes incase of Out-of-the-box Magento application. These two designs consist of Luma, as a demonstration theme, while the other is Blank for custom theme creation according to the preferences of the merchant and developer A new theme is created if you wish to customize the stock design and add personalization in it. If not, the Luma theme is just as good for running a live store. Below we have shown a step by step guide to creating a trial Magento 2 theme so you can develop a customized design for your own Magento 2 store.

Step 1: Create theme.xml

Create a folder for your new theme under,

 app/design/frontend/FME/mytheme/theme.xml

Step 2: Add Preview.jpg in media folder

Create Directory media

app/design/frontend/FME/mytheme/media

add image preview.jpg in media folder

Step 3 create composer.json

app/design/frontend/FME/mytheme/composer.json

{
    "name": "magento/theme-frontend-blank",
    "description": "My Custom theme",
    "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"
        ]
    }
}

Step 4: Create registration.php

app/design/frontend/FME/mytheme/registration.php

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

In Shell in your magento 2 root directory execute below command

php bin/magento setup:upgrade