As we know Magento is one of the best and buzzing open source e-commerce platform which provides a rich e-commerce platform for online shop owners with great flexibility. With Magento, you have a solid open-source platform to work on supported by a large community and add on providers (Free and Paid). As every shop owner want their shop to look unique, same is the case with online shop and Magento comes with a super flexible theming framework which allows developer have great flexibility over UI design of the online shop.

When it comes to developing theme for Magento you have 2 options.

  • You can purchase ready made theme which you think would be great fit for your online store
  • You can be 100% creative, hire good concept designer and get your own designs developed. It will be bit expensive but good best looking shop will create good reputation for your store and can earn more money for you if nicely done

In both cases, you will have to play with Magento theming structure and we will provide you basic guidance on how you can do that to give you a head start. In case you still require a professional Magento Website Development service provider, KGN Technologies has worked on 100’s of small and large enterprise-level Magento websites. You can get in touch with us by clicking the link above.

So let’s get started

We will be showing you how to create a theme in Magento with best practices. By default, Magento provides you 2 themes that will give you kind of an idea about how Magento theme structure work and files you will need to alter to create a beautiful custom theme.

1. Blank theme

2. Luma theme (This theme uses Blank theme as its parent and override Blank theme files where needed)

The theme is a module in Magento and you can view it in your Magento installation on “vendor\magento\”. Both themes can be found under these folder “theme-frontend-blank” and “theme-frontend-luma”.

You can also check how many themes are installed on your Magento store by going to “Admin\Content\Themes”. This screen will give you a list of all the themes that are installed in your Magento store.

magento-content-page
		
				

If you want to create your unique look and feel for your store then you will have to create your theme as Magento strictly recommends to create a child theme and override it. Magento strongly recommends that you don’t change any of the default theme files. The best thing about the Magento theme is you don’t have to create every file for the theme, you only and only need to change needed files for your store. One of the advantage of creating our child theme is if any changes/upgrade comes in default or readymade theme then it will override all the files or most of the files in that theme where if you have created child theme then all your work will be retained so it’s better to create child theme for safer/recommended development approach. We will go through this process step by step.

In the child theme creation process our child theme will inherit a lot of its behavior from the parent theme. Both themes parent and child will be in their folder and in this process of creating a new child theme for your website we will retain our child theme files in upgrade and keep intact Magento’s default theme files.

Define Child Theme:

To inform Magento that you are creating your theme you have to follow the below steps:

1) Need to create a folder (with your vendor name, it’s generally company name or your project name) under app\design\frontend.

2) Under the above folder, you will create a theme folder (this will be the project name or vendor name).

3) Under the theme folder, you will

4) Now create a file called “theme.xml”. This file will provide details about your theme (Title of your theme, your theme’s parent theme, and preview image).

Tags that are used in theme.xml are given below

a. < title >: This will be the name of your theme which will be displayed in the admin of the site

b. < parent >: This will be the theme that will be used by your theme as fall back. If there is any file that is not defined in your theme will be taken from this theme (generally Magento/luma or Magento/blank) is used in this tag. If you are creating a theme for your production site general recommendation is to go with Magento/blank.< /parent >

c. < media >< preview_image >: This will be used to show a preview of your image, Again it will be used in the admin of Magento < /preview_image > < /media >

Magento 2 Child Theme
**** You can add Package, Category, Copyright, Licence details as well if you want but for your custom theme but this will not be necessary or required

<?xml version="1.0"?>
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
   <title>My First Child Theme</title>
   <parent>Magento/luma</parent>
   <media>
       <preview_image>media/preview.jpg</preview_image>
   </media>
</theme>

The next step is to create a registration file, this file will register your theme in Magento. You need to place this file in your theme folder which will be app\frontend\{{VENDORNAME}}\{{THEME_NAME}}. In the below registration file it’s considered that your vendor name is M2 and your theme name is myfirstchildtheme.

As mentioned before Magento 2 consider theme as a module and this file will register these theme in Magento modules. This is similar to a general module registration file with a difference of component type set to THEME. Once you have this file ported in your theme folder Magento will recognize your theme even if no actual work is there or no files of the theme are even touched or change yet.

Magento 2 Child Theme
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
   \Magento\Framework\Component\ComponentRegistrar::THEME,
   'frontend/M2/ myfirstchildtheme,
   __DIR__
);

The next step would be to copy the view.xml file from the luma theme. You can find view.xml under vendor\magento\theme-frontend-luma\etc. Copy that file to our theme directory under a folder called \etc. This file is responsible for storing properties of product images, we may discuss further this file in future blog posts where needed.

By now we are mostly done with declaration part of Magento 2 theme. Now we will go through steps on how to install that theme in Magento, don’t worry it’s just set of command that you need to fire to get the theme installed on Magento.

Below is a list of commands that you need to run from your Magento directory.

Magento 2 Child Theme
php bin/magento setup:upgrade

This will install your newly created theme under Magento’s module and create a database entry for that. This will same command that you will fire when you install a new module for your store as well

Magento 2 Child Theme
php bin/Magento setup:static-content:deploy –f

This will deploy your theme in the pub directory and –f will only be needed when your store is in development or default mode.

Magento 2 Child Theme
php bin/magneto cache:flush

This will clear Magento’s cache files so that new theme files will be served from magneto to browser requests.

With these 3 steps, you are all done with the installation of a new theme in Magento. Now Magento is aware that it has a new theme and know path and characteristics of the theme and now it’s time to set your theme as your store’s front end.

If you want to confirm that Magento has recognized and installed your theme then you can go into a table called “theme”, you should see your newly created theme there. To check theme is showing in Magento admin as well go to Content -> Design -> Themes, in here you will get a full list of all the themes current Magento installation has. If your theme is showing there then you are 99% there and 1% is to activate that.

magento-content-page-2
		
				

To active theme go to Content ->Design -> Configuration. Here you will see all active stores and what themes are configured for them. Select store you want to apply your theme and you’re done!!!!!!!!!

While there is much more we would like to share with you on the latest technology in eCommerce like woocommerce and Shopify you can visit our blog page to know more about web technologies. To get your own e-commerce website developed please visit our services page

I hope this blog will help you in creating your own exciting themes in Magento, Thank you