Themes play a vital role & are a core component when it comes to run a successful Magento E-commerce store. By the proper combination of custom templates, designs, styles, or images, it is easy to improve the visual appearance of an E-commerce website. By default, Luma and Blank are the two Magento themes that are offered after installing Magento 2. Luma is a display theme, while Blank acts as a foundation of Magento Theme Development for business enterprises. Magento 2 has no restrictions regarding the usage of the Luma theme for your E-commerce store. But if you want to customize the default design, or look to create themes from scratch, it is advised not to change or edit the default Luma and Blank theme files. The reason for the same is default files can be overwritten by the latest version of the Magento 2 upgrades. Steps Involved Creating Custom Magento 2 Theme 1: Create a Theme Directory To create a directory, navigate to: <your Magento 2 root directory>/app/design/frontend. Open frontend directory, create a new directory as per the vendor name: /app/design/frontend/MDG. Inside the theme vendor directory, create a directory for your Magento 2 theme: /app/design/frontend/MDG/m2-theme. Once the structure is created, simply declare your Magento 2 theme. You can take assistance from Magento Developer to set your theme as the current theme in your store backend. 2: Declare Your Magento 2 Theme Next is to create the theme.xml file under app/design/frontend/MDG/m2-theme/theme.xml Use the following code: <themexmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd"><title>m2-theme</title> <parent>Magento/Luma</parent> <media> <preview_image>media/m2-theme-image.jpg</preview_image> </media> </theme> In the <title> tag, enter the name of your theme. In the <parent> tag, mention the parent theme for backup purposes. Check you have this thumbnail in the correct location. If this file is not present in the correct location, you will face error when you accessing your theme page via Magento 2 admin. 3. Build a Composer Package Add a composer.json file into theme directory: app/design/frontend/MDG/m2-theme/composer.json for registering the package on a packaging server. This file is shown in the theme dependency information. The Magento default public packaging server is https://packagist.org/. Use the following code: { "name": "MDG/m2-theme", "description": "Magento 2 Theme Customization", "require": { "php": "~5.6|~7.0|~7.1|~7.2|~7.3|~7.4", "MDG/m2-theme": "100.0.*", "magento/framework": "100.0.*" }, "type": "magento2-theme", "version": "100.0.1", "license": [ "OSL-3.0", "AFL-3.0" ], "autoload": { "files": [ "Registration.php" ] } } 4. Add Registration.php to Register Custom Magento 2 Theme For registering your theme in the Magento system, it is important to create a registration.php file in your theme directory: app/design/frontend/MDG/m2-theme/registration.php and use the following code in your registration.php: <?php /** * Copyright © Magento. All rights reserved. * See COPYING.txt for license details. */ \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::THEME, 'frontend/MDG/m2-theme', __DIR__ ); 5: Apply and Configure Magento 2 Custom Theme in Admin Once theme is added to the file system, everything is properly managed and it is the time to activate your theme and apply it to your E-commerce store. Go to the Magento 2 backend, then go to Content > Design > Themes. Make sure the theme appears on this list. When it is easy to see the theme in this list, go to Stores > Configuration > Design, choose your newly created theme. Once you select your theme, click on the “Save Config” button and clear the cache easily. Wrapping Up In this blog, all the steps are mentioned to create a basic Magento custom theme. I hope this guide has helped you understand how build your Magento 2 theme. Now that you’ve learned how to customize your theme as per your requirements, it is advised to consult Magento 2 Development Company or desired results. Reach to an optimized Magento hosting platform to improve your site loading time. Don’t forget to drop your queries and suggestions in the comment section.
0 Comments
Leave a Reply. |
The author is a writing professional and render services to a well-renowned Magento development company in India serving clients across the globe.
|