How to build new theme in Magento 2 (Part 1)

Here the following steps show you to build new theme in Magento:

Step 1: Build a theme directory

Step 2: Assert your theme

Step 3: Insert registration.php

Step 4: Assemble images

Hi friends, everyone know, Theme is one of the major part of Magento 2. Depend on your business you need the theme which is suitable to your website. In this guideline I will show you how to buid new theme in Magento 2. The following steps are:

Step 1: Build a theme directory

  • Navigate to <your Magento install dir>/app/design/frontend
  • Build a new directory named according to your seller name: /app/design/frontend/Webnexs/Simple theme

app/design/frontend/
├── <Vendor>/
│   │   ├──…<theme>/
│   │   │   ├── …
│   │   │   ├── …

Step 2: Assert your theme

Build the theme.xml in app/design/frontend/Webnexs/SimpleTheme

  • Attach or copy from an existing theme.xml to your theme directory app/design/frontend/Webnexs/SimpleTheme
  • Arrange it using the following example:
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">

     <title>Webnexs Simple Theme</title> <!-- your theme's name -->

     <parent>Magento/blank</parent> <!-- the parent theme, in case your theme inherits from an existing theme -->

     <media>

         <preview_image>media/preview.jpg</preview_image> <!-- the path to your theme's preview image -->

     </media>

 </theme>

Step 3: Insert registration.php

To register your theme in the system, in your theme directory insert a registration.php file with the following content:

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

    \Magento\Framework\Component\ComponentRegistrar::THEME,

    'frontend/Magestore/SimpleTheme',

    __DIR__

);

Step 4: Assemble images

Product image sizes and other assets utilize on the storefront are arrange in a view.xml configuration file. It is essential for a theme, but is optional if exists in the parent theme. Follow the below mentioned steps to change the configuration to different the parent theme:

  1. Build the etc directory in your theme folder(app/design/frontend/Webnexs/Simple Theme)
  2. Copy view.xml from the etc directory of an existing theme to your theme’s etc directory.
  3. Assemble all storefront product image sizes in view.xml.

To build New theme in Magento 2, this guidelines will defines the way easily, the above mentioned steps is the smallest process for you to build New Theme in Magento 2. With this information, you can manage the New Theme in Magento 2 easily. All stores have a New Theme in Magento 2 with multiple attributes.

Last Update: April 9, 2018  

February 9, 2018   155   Nandini R    Theme    
Total 2 Votes:
0

Tell us how can we improve this post?

+ = Verify Human or Spambot ?

Leave a Reply

Your email address will not be published. Required fields are marked *

Facebook
Google+
http://www.webnexs.com/blog/kb/build-new-theme-magento-2
Twitter
LinkedIn