The Step-By-Step Manual Guide To The Magento Custom Theme Development
Magento 2 is one of the most useful and usable platforms in the current time, in the name of e-commerce. A good thing about this is its high-quality codebase and the extensive Open Source system. As a result of these factors, Magento 2 eCommerce development is very accessible to achieve.
One of the most important matters to mention in regards to this is the theme that developers can create. Of course, one can use the help of other software too, but doing every step of the Magento custom theme development manually would make it more custom-made. The following is the step-by-step process you can supervise.
Step 1
Firstly, you need to create a theme folder for Magento on your computer. If you are using the XAMPP software, open the installation folder, then the app, and then click on ‘design’. Afterward, open ‘frontend’. There, you have to make a vendor folder and name it as per your preference. Thereafter, make a theme folder in this named folder.
Step 2
Make a theme.xml file type inside of the theme folder. Here, you should add information like the name of the theme, or the parent them, add preview image, and more.
Step 3
You should code inside of the registration that you create inside the theme folder. The term is registration.php. The code that you can utilize for this part of the Magento custom development is:
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
‘frontend/custom/customtheme’,
_DIR_
);
Step 4
Inside the theme folder, open a composer file called composer.json. You can use the following code:
{
“name”: “custom/theme-frontend-customtheme”, <!– Provide your vendor folder name and your theme name here –>
“description”:”N/A”,
“require”: {
“magento/theme-frontend-blank”: “*”
},
“type”: “magento2-theme”,
“version”: “1.0.0”,
“license”: [
“OSL-3.0”,
“AFL-3.0”
],
“autoload”: {
“files”: [
“registration.php”
]
}
}
Step 5
After this, open a media folder inside the theme folder. Thereafter, you should add the preview image of the theme inside of this folder. Name the image preview.jpg.
Step 6
For the next step, open the web folder inside of the theme folder, again. The usual structure for this would include the javascript files, stylesheet files, and images. Also, you can add the logo image inside of the web folder, with the name logo.png.
Step 7
Inside of the theme folder, again, make a new folder with the name Magento_Theme. Here, create the layout, and inside of it, add a file default.xml.
After you complete these steps, open the Magento dashboard. Here, you need to apply the custom theme of your choice. Of course, empty out the Magento cache first, through the dashboard. Open System, and then ‘cache management’. Here, select everything and then select the flush option.
Following this, return to the dashboard, access ‘store’, and then ‘configuration’. Select the ‘design’, open the design theme in it and select the one you want from the drop-down list. Thereafter, save it and refresh the cache again. Check for the changes on the frontend home page.
To note, the process is not too complicated, even for those who are comparatively new to Magento 2 website development. Yet, it is important to do all the steps precisely. That would ensure that you create a highly serviceable Magento Theme.