How to Create Magento2 Custom Theme?

  • author-img Nidhi Arora
  • 5 years
  • 185 views
How to Create Magento2 Custom Theme?

Theme is a major component of Magento 2. As, it gives a consistent feel as well as look to your whole website. To add a “WOW Factor” to your site, we have come up with a new amendment that helps you create a custom theme on your Magento 2!

Below we have showcased a complete step-to-step tutorial with ‘How to Create Magento2 Custom Theme’. So now read and invent your brand new Magento 2 theme in a matter of few clicks.

Step 1: To create a custom theme in magento2,
First, you have to go: <your Magento 2 root directory>/app/design/frontend.

  • Under the front-end directory, create a new directory as per your theme vendor name: /app/design/frontend/Envision (For example: I choose Envision for my theme vendor name)
  • Under your theme vendor directory, create a directory for your Magento 2 theme: /app/design/frontend/Envision/e2-theme.

After that, you have to reveal your Magento 2 theme so that Magento e-commerce system knows it exists in Magento. Plus, allow you to set your theme as an active theme in the backend of your Magento 2 stores.

Step 2: Declare your theme in Magento 2 Now you need to declare your theme in Magento2 by creating a theme.xml file under app/design/frontend/Envision/e2-theme/theme.xml and use the code below:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">

<title>e2-theme</title>

<parent>Magento/Luma</parent>

<media>

<preview_image>media/e2-theme-image.jpg</preview_image>

</media>

</theme>

Step 3: Make a Composer package

You need to add a composer.json file in a directory of your Magento 2 theme: app/design/frontend/Envision/e2-theme/composer.json and use the following code to register the package on a packaging server:

{

"name": "Envision/e2-theme",

"description": "N/A",

"require": {

"php": "~5.5.0|~5.6.0|~7.0.0",

"Envision/e2-theme": "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: Add “registration.php” File

To register your Magento 2 theme in the Magento system, you have to build registration.php file in a directory of your Magento 2 theme: app/design/frontend/Envision/e2-theme/registration.php and use the following code in your 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/Envision/e2-theme',

__DIR__

);

After completing theme registration, you need to go to Magento 2 backend, then go to Content > Design > Themes so that you make certain that your Magento 2 theme appears in this list.

If you have any query, please feel free to contact us at [email protected] or if you have any additional method or tip on this, please let us know by leaving your comment in the comment section below.

Download Blog

ENQUIRY

Ready to Get started

Communication is the key for us to understand each other. Allow us to understand
your requirements or queries. Present us with an opportunity to serve you.

Fill out the form and out team will get back to you
within 24 hours

    Head Office

    1250 Pittsford Victor Road Ste 310
    Pittsford, NY 14534

    Development Center

    Plot no. 10, Rajiv Gandhi
    Chandigarh Technology Park