In this blog We will discuss how to create custom theme in Magento2 ?
Step 01 : Create Directory Structure in Magento 2 Theme Development
Magento 2 themes are located in the /app/design/frontend folder. First, It’s necessary to create a Vendor folder and then create a theme folder inside of it.
For example: /app/design/frontend/V4U/sampletheme.
V4U is a vendor, sampletheme is a theme folder.
Step 2: Declare Your Magento 2 Theme
Now you need to create the theme.xml file under app/design/frontend/V4U/sampletheme/theme.xml and use the code below:
|
1 2 3 4 5 6 7 |
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd"> <title>V4U Sample Theme</title> <parent>Magento/luma</parent> <media> <preview_image>media/preview.jpeg</preview_image> </media> </theme> |
In the <title> tag insert theme name, in the tag you have to define the parent theme name here I have added Magento/luma as a parent theme. <preview_image> tag is the tumbnail image to show the theme page for preview purpose.
The thumbnail image is located in app/design/frontend/V4U/sampletheme/media/preview.jpeg
Step 3 : Magento theme registration
To register your theme in the Magento system, you need to create a registration.php file in your theme directory: app/design/frontend/V4U/sampletheme/registration.php
|
1 2 3 4 5 6 7 |
<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::THEME, 'frontend/V4U/sampletheme', __DIR__ ); ?> |
Step 4 : Add Magento 2 Theme a Composer Package
To add composer package, you need to create a composer.json file in your theme directory: app/design/frontend/V4U/sampletheme/composer.json
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
{ "name": "magento/sample-module-theme", "description": "N/A", "require": { "php": "~5.6|~7.0|~7.1|~7.2|~7.3|~7.4", "magento/theme-frontend-luma": "~100.0", "magento/framework": "~100.0" }, "type": "magento2-theme", "version": "1.0.0", "license": [ "OSL-3.0", "AFL-3.0" ], "autoload": { "files": [ "registration.php" ] } } |
Step 5 : Declaration of Theme Logo & Add Custom CSS
To declare a theme logo, create Magento_Theme/layout directories and add the following code to a default.xml file. The default.xml file path is /app/design/frontend/V4U/sampletheme/Magento_Theme/layout/default.xml.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <css src="css/custom.css"/> <!-- <link src="js/custom.js"/> --> </head> <body> <referenceBlock name="logo"> <arguments> <argument name="logo_file" xsi:type="string">images/vp.png</argument> </arguments> </referenceBlock> <remove name="report.bugs"/> </body> </page> |
Step 6 : Add CSS file
To add custom css, create web/css directories. The custom.css file path is /app/design/frontend/V4U/sampletheme/web/css/custom.css
|
1 2 3 4 5 6 7 |
@media screen and (min-width: 768px){ .logo img{ width: 100px; height: 100px; object-fit: contain; } } |
Step 7 : Add Logo Image
To upload logo, create web/images directories. The logo image path is /app/design/frontend/V4U/sampletheme/web/images/vp.png
Now run the following commands :
php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento cache:clean
Now You can set New Theme from Admin Panel Content->Design->Configuration->Edit->Default Theme->Applied Theme->Select Your New Theme->Save Configuration.
DevDocs
Home
Happy Coding. Keep Liking & Sharing 
