A theme is a component of Magento application which provides a consistent look and feel (visual design) for entire Magento application area (for example, storefront or Magento admin). It uses a combination of custom templates, layouts, styles or images.
Themes are designed to override or customize view layer resources, provided initially by modules or libraries.
In this guide we will help you to create a simple Magento 2 theme which can be useful as a base to create your own custom Magento 2 visual experience and easily customize design layout of all pages.
Before you start, Please make sure that your Magento cache is disabled so that you don’t need to clear the cache every time you make changes in the theme. This will save you a lot of time in development process
To disable cache, go to Admin → System → Cache Management → select all cache types and disable them
Ensure that your Magento store is in developer mode so that all changes are reflected in real time and you can view any errors you come across while doing coding.
To enable the developer mode, you would need to run commands from terminal using SSH access. Login to your Magento store SSH account and go to Magento root directory and run below command:
1 | php bin/magento deploy:mode:set developer |
Here are the list of steps you need to follow for theme development:
Let’s understand each step in detail
Go to: /app/design/frontend And create a new directory with the vendor name you want for theme package,
For example i have used name Mageice here : /app/design/frontend/MageIce
Now in your vendor directory, create your theme directory, for example – Icecube: /app/design/frontend/MageIce/Icecube/
1 2 3 4 5 6 | app/design/frontend/ ├── <MageIce>/ │ │ ├──...<Icecube>/ │ │ │ ├── ... |
Once you have created directory structure of your theme, now we have to declare that theme by creating theme.xml file which contains theme name and the parent theme name if it’s inherited from another and if you like you can also specify theme preview image
1 2 3 4 5 6 7 8 9 | <theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd"> <title>MageIce Icecube</title> <!-- your theme's name --> <parent>Magento/blank</parent> <!-- the parent theme, in case your theme inherits from an existing theme --> <media> <div class="marginleft-40"> <preview_image>media/preview.jpg</preview_image> <!-- the path to your theme's preview image --> </div> </media> </theme> |
Magento 2 themes are distributed as Composer packages so it will be registered as a Package on server. Add a file composer.json which is optional
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | { "name": "mageice/icecube", "description": "N/A", "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" ] } } |
Now to register your theme in the system, add a file registration.php in your theme directory with the below content:
1 2 3 4 5 6 7 8 9 10 | <?php /** * Copyright © 2017 Magento. All rights reserved. * See COPYING.txt for license details. */ \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::THEME, 'frontend/mageice/icecube', __DIR__ ); |
Theme package consists of many types of files: styles, fonts, JavaScript and images. Each one have to be stored in its own sub-directory of web in theme directory:
1 2 3 4 5 6 7 8 9 10 11 12 | app/design/frontend/mageice/icecube ├── web/ │ ├── css/ │ │ ├── source/ │ ├── fonts/ │ ├── images/ │ ├── js/ |
Product image sizes and other properties used on theme are configured in a view.xml which is a configuration file. It is required for a theme, but is optional if exists in the parent theme. Create the etc directory as above and copy view.xml from the etc directory of an existing theme.
1 2 3 4 | <image id="category_page_grid" type="small_image"> <width>250</width> <height>250</height> </image> |
In the Magento application, the default format and name of a logo image is logo.svg. You can use a logo file with a different name and format, but you might need to declare it. You have to create a file default.xml in your theme’s layout directory and below code if you theme_logo.png is in size of 300×300:
1 2 3 4 5 6 7 8 9 10 11 | <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceBlock name="logo"> <arguments> <argument name="logo_file" xsi:type="string">images/theme_logo.png</argument> <argument name="logo_img_width" xsi:type="number">300</argument> <argument name="logo_img_height" xsi:type="number">300</argument> </arguments> </referenceBlock> </body> </page> |
Once your basic theme structure is created, now you can customize or override any layout and setup new design layout for your new theme.The layouts for different application components can be distinguished by below:
Instead of using complete page layout file of Magento and modifying its code, you can just create a file which extends layout with changes you want. So if you want to customize layout of Magento_Catalog/view/frontend/layout/catalog_product_view.xml, you can add a layout file with same name in your custom theme:app/design/frontend/mageice/icecube/Magento_Catalog/layout/catalog_product_view.xml
Next step is to apply the custom theme you created from Magento Admin so it’s available on your front site. To apply theme go to Admin->Content->Design->Configuration
Click Edit on your store view and a page with design configuration will open and on Default Theme tab, in the Applied Theme drop-down, select your newly created theme and Click Save Configuration.
Last but not least, we have to run one command to deploy the files we have created for theme so that it’s visible on Magento store front.
Login to your Magento store SSH account and go to Magento root directory and run below command:
1 | php bin/magento setup:upgrade |
And after that you have to run another command to deploy the theme files.
1 | php bin/magento setup:static-content:deploy |
That’s all, If you have any further questions about magento 2 theme development or if need any help from our expert magento 2 developers, contact us now for free consultation
Send us your project notes
Copyrights 2020 Icecube Digital, All Rights Reserved
Hello Team,
Nice blog buddy. Just a small mistake. closing div [ i.e. ] is missing for theme.xml file. Right after the tag and that throw an error.
Thanks!
Snehal Brahmbhatt
Thank you for pointing out the missing tag, its updated to correct now. 🙂