Even though, Magento 2 is in development phase it has already made a lot of buzz in the e-commerce industry because of the new and improved front-end approaches, it is expected to offer. While the front-end improvements seems to make the Magento theme process a lot more efficient, many developers (especially beginners) aren’t still aware of the process of creating a custom theme in Magento 2.<\/p>\n

Through this post, I’ll be covering step-by-step process of creating a custom Magento 2 theme. But before that let’s first have an overview of Magento Theme.<\/p>\n

Magento Theme – An Overview<\/strong><\/p>\n

A theme helps to create a visual representation of your Magento store, using a combination of the following:<\/p>\n

\n
• Custom templates<\/li>\n
• Layouts<\/li>\n
• CSS\/LESS files<\/li>\n<\/ul>\n

  Magento application offers two different design themes, namely Luma (also called as a demonstration theme) and Blank (used for custom theme creation). Since we need to create a custom Magento theme, we’ll be using the Magento Blank theme.<\/p>\n

  In order to create a new theme using Blank, you’ll have to customize it. But, making changes to the default theme will make the changes overwritten, every time the new version of your default files is updated. A viable alternative to this problem is to create a new custom theme that inherits the functionality from the default or any existing theme.<\/p>\n

  Put it simply, we’ll create a custom child theme that inherits existing theme’s functionality. Doing so, will help you going through the hassle of creating a new standalone theme from the ground up. So, instead of copying extensive set of files and modifying them, you will only need to override and extend existing files within the parent theme.<\/p>\n

  Let’s now begin discussing the steps involved in creating a new Magento theme (i.e. the one one by one.<\/p>\n

  Understanding Theme Creation Process<\/strong><\/p>\n

  In this section, we will be covering about creating files that would help in theme creation. In addition, we’ll also have a glimpse of the process of adding a logo to the theme or how we can configure images.<\/p>\n

  Step 1 \u2013 Create a Theme Directory<\/strong><\/p>\n

  The very first step, you need to perform when creating a custom theme requires you to create your theme directory structure. For doing so, follow below mentioned key points:<\/p>\n

  \n
  1. Access and open up your Magento install admin backend, and then move to dir>\/app\/design\/frontend.<\/li>\n<\/ol>\n
     \n
     1. Most of the e-stores offers products of different vendors, and so it’s important to have a separate vendor directory, where all products offered by the vendors are listed. So, your next step is to create a new directory with the name similar to your vendor name: \/app\/design\/frontend\/<Vendor>.<\/li>\n<\/ol>\n

        In case, you’re using any built-in Magento theme, then you need to refer to the directory: app\/design\/frontend\/Magento<\/p>\n

        \n
        1. Now that you’ve created the vendor directory, create another directory with the name similar to that of your theme under the vendor directory as shown below.<\/li>\n<\/ol>\n

           app\/design\/frontend\/<\/p>\n

           >> <Vendor>\/<\/p>\n

           >>…<theme>\/<\/p>\n

           >>\u00a0…<\/p>\n

           Step 2 \u2013 Understanding Theme Declaration<\/strong><\/p>\n

           Once you’ve finished creating the directory structure of your theme, you’ll have to create theme.xml to define your theme layout. The xml file must contain at least the child theme name and the parent theme name. All the updates made to your theme layout will be stored in this file.<\/p>\n

           There are two tasks that your theme layout needs to perform.<\/p>\n

           \n
           • First add or copy contents from the current theme.xml to your theme directory app\/design\/frontend\/<Vendor>\/<theme><\/li>\n<\/ul>\n
             \n
             • Secondly, to make your theme visible, you need to configure it. For this purpose, use the following example:<\/li>\n<\/ul>\n

               <theme xmlns:xsi=”http:\/\/www.w3.org\/2001\/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”..\/..\/..\/..\/..\/lib\/internal\/Magento\/Framework\/Config\/etc\/theme.xsd”><\/p>\n

               <title>New theme<\/title> <!– your theme’s name –><\/p>\n

               <parent>Magento\/blank<\/parent> <!– the parent theme, in case your theme inherits from an existing theme –><\/p>\n

               <media><\/p>\n

               <preview_image>media\/preview.jpg<\/preview_image> <!– the path to your theme’s preview image –><\/p>\n

               <\/media><\/p>\n

               <\/theme><\/p>\n

               In order to make sure that your theme is recognized by the Magento application, get logged-in in to the Magento admin panel and check whether you can see the theme in the grid under Content-> Design -> Themes.<\/p>\n

               <\/p>\n

               Step 4 \u2013 Configure Images (Changing Size of the Product Images)<\/strong><\/p>\n

               When uploading the product images, if its size exceeds than the ones of the default theme, you’ll have to add a view.xml file. This file contains configuration details of the product image sizes that are displayed on the storefront. Let’s now see the steps you need to follow for configuring the images:<\/p>\n

               \n
               1. Log-in to your Magento server, however, you’ll need to access the server as a user having a certain set of permissions. You must have permissions to create directories as well as files in the directory of the Magento installation.<\/li>\n<\/ol>\n
                  \n
                  1. In your theme folder, create the etc directory.<\/li>\n<\/ol>\n
                     \n
                     1. Next, copy the view.xml file from your existing theme’s \u201cetc directory\u201d (let’s say, for example, from the Blank theme) to your custom theme\u2019s newly created etc directory.<\/li>\n<\/ol>\n
                        \n
                        1. Lastly, you need to configure all of the product image sizes used on your store front-end in view.xml. For example, you can choose to portray the product images in the product category grid view as square, by assigning it a size of 250 x 250 px. Let’s have a glimpse of how the image configuration would look like:<\/li>\n<\/ol>\n

                           <var name=”category_page_grid:type”>small_image<\/var><\/p>\n

                           <var name=”category_page_grid:width”>250<\/var><\/p>\n

                           <var name=”category_page_grid:ratio”>1<\/var><\/p>\n

                           <var name=”category_page_grid:height”>250<\/var><\/p>\n

                           Step 5 \u2013 Create Directories for Your Theme’s Static Files<\/strong><\/p>\n

                           Just like any standard Magento theme, your theme will also contain multiple static files, including styles, JavaScript, images and other files. Make sure to store each file type in a separate \u201cweb\u201d sub-directory within your theme folder, as follows:<\/p>\n

                           app\/design\/<area>\/<Vendor>\/<theme>\/<\/p>\n

                           >>\u00a0web\/<\/p>\n

                           >>\u00a0css\/<\/p>\n

                           >>\u00a0source\/<\/p>\n

                           >>\u00a0fonts\/<\/p>\n

                           >>\u00a0images\/<\/p>\n

                           >>\u00a0js\/<\/p>\n

                           Note: All the general theme static files should be stored in the …<theme>\/web\/images, for example, the logo of your theme needs to be stored in …<theme>\/web\/images. There’s a greater possibility that your theme will include some module-specific files. These files are stored in the sub-directories like …\/<theme>\/<Namespace_Module>\/web\/css and related sub-directories. However, this is a whole new topic of discussion. So, for now we will skip this topic.<\/p>\n

                           Applying and Configuring Your Theme in Magento<\/strong><\/p>\n

                           This section will let you know how you can apply your theme to the Magento storefront. For doing so, simply follow the below listed steps:<\/p>\n

                           Step 1 \u2013 Open up your Magento install admin panel and navigate to CONTENT-> Design-> Themes. Make certain that you can see your theme in the given theme list.<\/p>\n

                           Step 2 \u2013 From your admin panel visit Stores -> Configuration -> Design.<\/p>\n

                           Step 3 \u2013 From the \u201cScope\u201d drop-down field, choose the store view to which you would like to apply your theme.<\/p>\n

                           Step 4 \u2013 Next, from the \u201cDesign\u201d Theme tab, choose the theme you’ve just created listed in the Design Theme drop-down.<\/p>\n

                           Step 5 \u2013 Lastly, click on the \u201cSave Config\u201d option to apply the changes you have made so far. And once it’s done, make sure to reload the pages of your storefront.<\/p>\n

                           Note: In case, caching is enabled in your Magento back end, it’s important to clear the cache or else you may not be able to see the changes you’ve just applied.<\/p>\n

                           Conclusion<\/strong><\/p>\n

                           Hope that reading this tutorial will serve as a basic guide that will help you understand the process of creating a custom theme in Magento 2.<\/p>\n

                           Author Bio :<\/strong><\/p>\n

                           Isabella Morris is currently employed with a renowned custom Magento development<\/a> company and is also engaged in writing informative articles on best tools and tricks for Magento development. Her write-ups have proved beneficial for a wider group of Magento developers across the globe.<\/p>\n","protected":false},"excerpt":{"rendered":"

                           Even though, Magento 2 is in development phase it has already made a lot of buzz in the e-commerce industry because of the new and improved front-end approaches, … Continue \u2192<\/a><\/p>\n","protected":false},"author":10,"featured_media":30099,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[30],"tags":[],"aioseo_notices":[],"yoast_head":"\n