Pre Black Friday Sale. 20% OFF on all products. Coupon code: fme20off
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
add image preview.jpg in media folderapp/design/frontend/FME/mytheme/media
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
login to admin Content > Design you can see your theme is listed.
This blog was created with FME's SEO-friendly blog