Magento2

How to create Custom Magento2 theme?

/home/owner/Downloads/How to create Custom Magento2 theme_.jpg

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:

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

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

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.

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

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.

Download from GitHub

DevDocs

Home

πŸ™‚ Happy Coding. Keep Liking & Sharing πŸ’»

Tagged