{"id":48455,"date":"2021-09-29T05:05:28","date_gmt":"2021-09-29T05:05:28","guid":{"rendered":"https:\/\/www.bridge-global.com\/blog\/?p=48455"},"modified":"2021-09-30T01:04:37","modified_gmt":"2021-09-30T01:04:37","slug":"magento-2-theme-development","status":"publish","type":"post","link":"https:\/\/www.bridge-global.com\/blog\/magento-2-theme-development\/","title":{"rendered":"Magento 2 Theme Development. A Quick and Simple Guide"},"content":{"rendered":"<div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-d027ec4d\" data-vce-do-apply=\"all el-d027ec4d\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-0df46973\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-0df46973\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-0df46973\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-7960aa83\" data-vce-do-apply=\"all el-7960aa83\"><p>Customizing the look and feel of your Magento store is essential to lend a consistent aesthetic temper for the whole store. You can integrate professionally designed, responsive ecommerce website templates and themes if your store is running on Magento2. This blog explains Magento theme development for Magento 2 in a simplified manner.&nbsp;<\/p>\n<h2>What Is a Theme and Why Do You Need It?&nbsp;<\/h2>\n<p>If you are looking for the definition of the word \u2018theme\u2019 in the context of Magento, here it is. A 'theme' is nothing but an ingredient of the Magento application that enables you to have a&nbsp; consistent look and feel to your online store. This is done by using a chosen combo of custom templates, designs, styles, layouts, or images. They are sure to add a magical touch to your storefront.<\/p>\n<p>In other words, technically, the theme is a set of files like CSS, HTML, PHP, XML, JavaScript and Images that work together to offer good visual appeal to your stores.<\/p>\n<p>Does my business need a Magento2 theme? This is a very common question in the minds of ecommerce business owners. As you all know, your ecommerce website is the digital face of your business. Therefore, transforming your storefront into a customer-friendly and appealing web store is crucial to get more customers and sales. Here\u2019s where custom Magneto 2 theme development comes to your rescue.&nbsp;<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-cdbb1360\" data-vce-do-apply=\"all el-cdbb1360\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-7d20c9b9\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-7d20c9b9\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-7d20c9b9\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-c78c8432\" data-vce-do-apply=\"all el-c78c8432\"><p><em><strong>If you intend to develop a Magento Theme, please keep these preconditions in mind.<\/strong><\/em><\/p><ul><li>Either you should have some coding experience with Magento or hire expert hands to get it done. If you don\u2019t have Magento 2 running, GetMySites can help you do that and all your Magento theme requirements and customizations.<\/li><li>Steer clear of modifying the out-of-the-box Magento themes. This will ensure compatibility, upgradability, and easy maintenance. It\u2019s advisable to create a new custom theme to customize your Magento store design.<\/li><li>Fix your Magento application to the developer mode.<\/li><li>Ensure that Magento 2 is installed on your localhost and running slickly. Also ensure access to the frontend &amp; backend.<\/li><\/ul><p>Now, without much ado, let me lead you all through the steps involved in developing a custom Magento 2 Theme. <\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-daed899f\" data-vce-do-apply=\"all el-daed899f\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-e60c995c\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-e60c995c\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-e60c995c\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-4deff9de\" data-vce-do-apply=\"all el-4deff9de\"><h4><em>Before plunging into the steps to do Magento 2 theme development, how about visiting our Magento Store that has some ready-to-use plugins to make your ecommerce store more functional and feature-rich?<\/em><\/h4><\/div><\/div><div class=\"vce-button--style-basic-container vce-button--style-basic-container--align-center\"><span class=\"vce-button--style-basic-wrapper vce\" id=\"el-aaa04540\" data-vce-do-apply=\"margin el-aaa04540\"><a class=\"vce-button--style-basic vce-button--style-basic--border-round vce-button--style-basic--size-medium vce-button--style-basic--color-b-248-135-73--fff\" href=\"https:\/\/www.bridge-global.com\/store\/\" title=\"Magento Store\" target=\"_blank\" data-vce-do-apply=\"padding border background  el-aaa04540\" data-vce-animate=\"vce-o-animate--bounceIn\" rel=\"noopener\">Magento Store<\/a><\/span><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-d006e6f1\" data-vce-do-apply=\"all el-d006e6f1\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-af22096c\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-af22096c\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-af22096c\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-88234234\" data-vce-do-apply=\"all el-88234234\"><h2>Magento 2 Theme Development. A Step-by-Step Guide.<\/h2><p>Magento, by default, has two themes: Blank theme and Luma theme. These themes are located in <strong>vendor\/magento\/theme-frontend-blank<\/strong> and <strong>vendor\/magento\/theme-frontend-luma<\/strong> respectively.<\/p><p>If we need a new look and feel for our pages, we can create our own theme other than editing the default Magento themes.<\/p><p>Our Custom themes should be placed in <strong>app\/design\/frontend\/VENDERNAME\/THEMENAME<\/strong>.<\/p><p><strong>Steps to create a Magento 2 theme.<\/strong><\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-d79285a3\" data-vce-do-apply=\"all el-d79285a3\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-969550e5\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-969550e5\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-969550e5\"><div class=\"vce-single-image-container vce-single-image--align-center\"><div class=\"vce vce-single-image-wrapper\" id=\"el-2630b28a\" data-vce-do-apply=\"all el-2630b28a\"><figure><div class=\"vce-single-image-inner vce-single-image--absolute vce-single-image--border-rounded\" style=\"padding-bottom: 59.6817%; width: 377px;\"><img loading=\"lazy\" decoding=\"async\" class=\"vce-single-image vcv-lozad\" data-src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2021\/09\/image_1-how-to-develop-Magento-2-Theme.png\" width=\"377\" height=\"225\" src=\"\" data-img-src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2021\/09\/image_1-how-to-develop-Magento-2-Theme.png\" alt=\"(image_1) - how to develop Magento 2 Theme\" title=\"(image_1) - how to develop Magento 2 Theme\" \/><noscript>\n        <img loading=\"lazy\" decoding=\"async\" class=\"vce-single-image\" src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2021\/09\/image_1-how-to-develop-Magento-2-Theme.png\" width=\"377\" height=\"225\" alt=\"(image_1) - how to develop Magento 2 Theme\" title=\"(image_1) - how to develop Magento 2 Theme\" \/>\n      <\/noscript><\/div><figcaption hidden=\"\"><\/figcaption><\/figure><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-632941e3\" data-vce-do-apply=\"all el-632941e3\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-15bbba40\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-15bbba40\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-15bbba40\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-43b929cf\" data-vce-do-apply=\"all el-43b929cf\"><div><noscript><style>.vce-row-container .vcv-lozad {display: none}<\/style><\/noscript><\/div>\n<div>\n<div><noscript><style>.vce-row-container .vcv-lozad {display: none}<\/style><\/noscript><\/div>\n<div>\n<p>This is the folder structure. Here <strong>Green<\/strong> is our theme name and <strong>Bridge<\/strong> is the Vendor name.<\/p>\n<p>Next we have to create theme.xml in our theme folder.<\/p>\n<p style=\"text-align: left;\"><strong>&nbsp;&lt;theme xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"&nbsp; xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Config\/etc\/theme.xsd\"&gt;<\/strong><br><strong>&nbsp; &nbsp;&lt;title&gt;Green&lt;\/title&gt; &lt;!-- Theme name --&gt;<\/strong><br><strong>&nbsp; &lt;parent&gt;Magento\/blank&lt;\/parent&gt; &lt;!-- Parent theme name --&gt;<\/strong><br><strong>&lt;\/theme&gt;<\/strong><\/p>\n<p style=\"text-align: left;\">&nbsp;<\/p>\n<p style=\"text-align: left;\">Next, we have to register our theme in the Magento 2 system. So we have to create a registration.php file in the theme root directory.<\/p>\n<p style=\"text-align: left;\"><strong>&nbsp;&lt;?php<\/strong><br><strong>\/**<\/strong><br><strong>&nbsp; * Copyright \u00a9 Magento, Inc. All rights reserved.<\/strong><br><strong>&nbsp; * See COPYING.txt for license details.<\/strong><br><strong>&nbsp; *\/<\/strong><\/p>\n<p style=\"text-align: left;\"><strong>&nbsp; use \\Magento\\Framework\\Component\\ComponentRegistrar;<\/strong><\/p>\n<p><strong>&nbsp; ComponentRegistrar::register(ComponentRegistrar::THEME, 'frontend\/Bridge\/Green', __DIR__);<\/strong><\/p>\n<p>Then Clear cache and reload<\/p>\n<p><strong>To see the created theme, Go to<\/strong><\/p>\n<p>Content -&gt; Design -&gt; Themes<\/p>\n<p>There we can see the list of themes there..<\/p>\n<\/div>\n<div><!--Start of Tawk.to Script (0.5.4)--> <!--End of Tawk.to Script (0.5.4)--><\/div>\n<p>&nbsp;<\/p>\n<\/div>\n<div><!--Start of Tawk.to Script (0.5.4)--> <!--End of Tawk.to Script (0.5.4)--><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-41b2cba8\" data-vce-do-apply=\"all el-41b2cba8\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-d7963b63\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-d7963b63\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-d7963b63\"><div class=\"vce-single-image-container vce-single-image--align-center\"><div class=\"vce vce-single-image-wrapper\" id=\"el-5b707c3b\" data-vce-do-apply=\"all el-5b707c3b\"><figure><div class=\"vce-single-image-inner vce-single-image--absolute\" style=\"padding-bottom: 34.4726%; width: 1024px;\"><img loading=\"lazy\" decoding=\"async\" class=\"vce-single-image vcv-lozad\" data-src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2021\/09\/theme_list.png-how-to-develop-Magento-2-theme.png\" width=\"1024\" height=\"353\" src=\"\" data-img-src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2021\/09\/theme_list.png-how-to-develop-Magento-2-theme.png\" alt=\"how to develop Magento 2 theme\" title=\"theme_list.png - how to develop Magento 2 theme\" \/><noscript>\n        <img loading=\"lazy\" decoding=\"async\" class=\"vce-single-image\" src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2021\/09\/theme_list.png-how-to-develop-Magento-2-theme.png\" width=\"1024\" height=\"353\" alt=\"how to develop Magento 2 theme\" title=\"theme_list.png - how to develop Magento 2 theme\" \/>\n      <\/noscript><\/div><figcaption hidden=\"\"><\/figcaption><\/figure><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-a7eff55c\" data-vce-do-apply=\"all el-a7eff55c\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-1d4d3725\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-1d4d3725\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-1d4d3725\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-ccdb1b1a\" data-vce-do-apply=\"all el-ccdb1b1a\"><p><br>After Creating the theme, We have to apply it to our stores.<\/p>\n<p><strong>To apply the theme, Go to<\/strong><\/p>\n<p>Content-&gt; Design -&gt;Configuration<\/p><\/div><\/div><div class=\"vce-single-image-container vce-single-image--align-center\"><div class=\"vce vce-single-image-wrapper\" id=\"el-ffb4edde\" data-vce-do-apply=\"all el-ffb4edde\"><figure><div class=\"vce-single-image-inner vce-single-image--absolute\" style=\"padding-bottom: 49.2188%; width: 1024px;\"><img loading=\"lazy\" decoding=\"async\" class=\"vce-single-image vcv-lozad\" data-src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2021\/09\/Apply_theme-steps-to-create-Magento-2-theme.png\" width=\"1024\" height=\"504\" src=\"\" data-img-src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2021\/09\/Apply_theme-steps-to-create-Magento-2-theme.png\" alt=\"steps to create Magento 2 theme\" title=\"Apply_theme- steps to create Magento 2 theme\" \/><noscript>\n        <img loading=\"lazy\" decoding=\"async\" class=\"vce-single-image\" src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2021\/09\/Apply_theme-steps-to-create-Magento-2-theme.png\" width=\"1024\" height=\"504\" alt=\"steps to create Magento 2 theme\" title=\"Apply_theme- steps to create Magento 2 theme\" \/>\n      <\/noscript><\/div><figcaption hidden=\"\"><\/figcaption><\/figure><\/div><\/div><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-bb3cd4a5\" data-vce-do-apply=\"all el-bb3cd4a5\"><p><strong>Adding CSS, JS, Images, Fonts etc..<\/strong><\/p>\n<p>Create a folder <strong>web&nbsp;<\/strong>inside our theme folder. Then create folders <strong>css, fonts, images, js <\/strong>inside folder <strong>web<\/strong>&nbsp; as follows<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-aec74180\" data-vce-do-apply=\"all el-aec74180\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-1f45bd9c\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-1f45bd9c\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-1f45bd9c\"><div class=\"vce-single-image-container vce-single-image--align-center\"><div class=\"vce vce-single-image-wrapper\" id=\"el-c25e00bd\" data-vce-do-apply=\"all el-c25e00bd\"><figure><div class=\"vce-single-image-inner vce-single-image--absolute\" style=\"padding-bottom: 103.448%; width: 290px;\"><img loading=\"lazy\" decoding=\"async\" class=\"vce-single-image vcv-lozad\" data-src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2021\/09\/Image_2.png-how-to-develop-Magento-2-theme-.png\" width=\"290\" height=\"300\" src=\"\" data-img-src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2021\/09\/Image_2.png-how-to-develop-Magento-2-theme-.png\" alt=\"how to develop Magento 2 theme \" title=\"Image_2.png - how to develop Magento 2 theme\" \/><noscript>\n        <img loading=\"lazy\" decoding=\"async\" class=\"vce-single-image\" src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2021\/09\/Image_2.png-how-to-develop-Magento-2-theme-.png\" width=\"290\" height=\"300\" alt=\"how to develop Magento 2 theme \" title=\"Image_2.png - how to develop Magento 2 theme\" \/>\n      <\/noscript><\/div><figcaption hidden=\"\"><\/figcaption><\/figure><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-794253c3\" data-vce-do-apply=\"all el-794253c3\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-eba3d5d3\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-eba3d5d3\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-eba3d5d3\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-ceabb908\" data-vce-do-apply=\"all el-ceabb908\"><p><span style=\"font-weight: 400;\">Here we can add theme CSS, Javascript, fonts, and images.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To load CSS we have to create a <strong>Magento_Theme<\/strong> folder and create <strong>default_head_blocks.xml<\/strong>&nbsp; inside the layout folder&nbsp;<\/span><\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-66df9712\" data-vce-do-apply=\"all el-66df9712\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-5cb2deb2\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-5cb2deb2\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-5cb2deb2\"><div class=\"vce-single-image-container vce-single-image--align-center\"><div class=\"vce vce-single-image-wrapper\" id=\"el-c3cf41d6\" data-vce-do-apply=\"all el-c3cf41d6\"><figure><div class=\"vce-single-image-inner vce-single-image--absolute\" style=\"padding-bottom: 95.3333%; width: 300px;\"><img loading=\"lazy\" decoding=\"async\" class=\"vce-single-image vcv-lozad\" data-src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2021\/09\/Image_5.png-Magento-2-Theme-Development-easy-steps-.png\" width=\"300\" height=\"286\" src=\"\" data-img-src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2021\/09\/Image_5.png-Magento-2-Theme-Development-easy-steps-.png\" alt=\"Magento 2 Theme Development easy steps \" title=\"Image_5.png - Magento 2 Theme Development easy steps\" \/><noscript>\n        <img loading=\"lazy\" decoding=\"async\" class=\"vce-single-image\" src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2021\/09\/Image_5.png-Magento-2-Theme-Development-easy-steps-.png\" width=\"300\" height=\"286\" alt=\"Magento 2 Theme Development easy steps \" title=\"Image_5.png - Magento 2 Theme Development easy steps\" \/>\n      <\/noscript><\/div><figcaption hidden=\"\"><\/figcaption><\/figure><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-3c1e86cc\" data-vce-do-apply=\"all el-3c1e86cc\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-4f29265c\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-4f29265c\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-4f29265c\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-068867cf\" data-vce-do-apply=\"all el-068867cf\"><div><noscript><style>.vce-row-container .vcv-lozad {display: none}<\/style><\/noscript><\/div>\n<div>\n<p>Add<\/p>\n<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<strong>&lt;page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\"&gt;<\/strong><br><strong>&nbsp; &lt;head&gt;<\/strong><br><strong>&nbsp; &nbsp; &nbsp;&lt;css src=\"css\/green-style.css\" media=\"all and (min-width: 1px)\" rel=\"stylesheet\" type=\"text\/css\" \/&gt;<\/strong><br><strong>&nbsp; &lt;\/head&gt;<\/strong><br><strong>&lt;\/page&gt;<\/strong><\/p>\n<p><strong>inside default_head_blocks.xml.<\/strong><\/p>\n<p>Here <strong>green-style.css<\/strong> is our custom css file created for our theme.<\/p>\n<\/div>\n<div><!--Start of Tawk.to Script (0.5.4)--> <!--End of Tawk.to Script (0.5.4)--><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-8c368194\" data-vce-do-apply=\"all el-8c368194\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-fda1f5c2\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-fda1f5c2\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-fda1f5c2\"><div class=\"vce-single-image-container vce-single-image--align-center\"><div class=\"vce vce-single-image-wrapper\" id=\"el-fe212ef3\" data-vce-do-apply=\"all el-fe212ef3\"><figure><div class=\"vce-single-image-inner vce-single-image--absolute\" style=\"padding-bottom: 120.161%; width: 372px;\"><img loading=\"lazy\" decoding=\"async\" class=\"vce-single-image vcv-lozad\" data-src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2021\/09\/Image_3.png-Magento-2-theme-development-.png\" width=\"372\" height=\"447\" src=\"\" data-img-src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2021\/09\/Image_3.png-Magento-2-theme-development-.png\" alt=\"Magento 2 theme development \" title=\"Image_3.png- Magento 2 theme development\" \/><noscript>\n        <img loading=\"lazy\" decoding=\"async\" class=\"vce-single-image\" src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2021\/09\/Image_3.png-Magento-2-theme-development-.png\" width=\"372\" height=\"447\" alt=\"Magento 2 theme development \" title=\"Image_3.png- Magento 2 theme development\" \/>\n      <\/noscript><\/div><figcaption hidden=\"\"><\/figcaption><\/figure><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-2fde8a37\" data-vce-do-apply=\"all el-2fde8a37\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-a81e9ce5\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-a81e9ce5\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-a81e9ce5\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-03768347\" data-vce-do-apply=\"all el-03768347\"><p>Added some sample CSS to give a border to the logo.&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><strong>&nbsp; &nbsp; &nbsp; &nbsp; body{<\/strong><\/p>\n<p><strong>&nbsp; &nbsp; &nbsp; &nbsp; }<\/strong><\/p>\n<p><strong>&nbsp; &nbsp; &nbsp; &nbsp;.logo {<\/strong><br><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;margin: -8px auto 25px 0;<\/strong><br><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;border: 1px solid #000;<\/strong><br><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;height: 100px;<\/strong><br><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;padding: 10px;<\/strong><br><strong>&nbsp; &nbsp; &nbsp; }<\/strong><\/p>\n<p><br>Then clear change and reload<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-81ccc409\" data-vce-do-apply=\"all el-81ccc409\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-8f49d6ec\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-8f49d6ec\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-8f49d6ec\"><div class=\"vce-single-image-container vce-single-image--align-center\"><div class=\"vce vce-single-image-wrapper\" id=\"el-95a8c5c6\" data-vce-do-apply=\"all el-95a8c5c6\"><figure><div class=\"vce-single-image-inner vce-single-image--absolute\" style=\"padding-bottom: 49.4141%; width: 1024px;\"><img loading=\"lazy\" decoding=\"async\" class=\"vce-single-image vcv-lozad\" data-src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2021\/09\/border_style_applied_for_logo.png-how-to-develop-Magento-2-Theme.png\" width=\"1024\" height=\"506\" src=\"\" data-img-src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2021\/09\/border_style_applied_for_logo.png-how-to-develop-Magento-2-Theme.png\" alt=\"how to develop Magento 2 Theme - Bridge-global blog\" title=\"border_style_applied_for_logo.png - how to develop Magento 2 Theme\" \/><noscript>\n        <img loading=\"lazy\" decoding=\"async\" class=\"vce-single-image\" src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2021\/09\/border_style_applied_for_logo.png-how-to-develop-Magento-2-Theme.png\" width=\"1024\" height=\"506\" alt=\"how to develop Magento 2 Theme - Bridge-global blog\" title=\"border_style_applied_for_logo.png - how to develop Magento 2 Theme\" \/>\n      <\/noscript><\/div><figcaption hidden=\"\"><\/figcaption><\/figure><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-19a83fc6\" data-vce-do-apply=\"all el-19a83fc6\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-e6536e5b\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-e6536e5b\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-e6536e5b\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-00f1ef99\" data-vce-do-apply=\"all el-00f1ef99\"><p><span style=\"font-weight: 400;\">Loading JS files.&nbsp;<\/span><\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-7a3eeb9f\" data-vce-do-apply=\"all el-7a3eeb9f\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-6cc05215\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-6cc05215\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-6cc05215\"><div class=\"vce-single-image-container vce-single-image--align-center\"><div class=\"vce vce-single-image-wrapper\" id=\"el-1a9f5704\" data-vce-do-apply=\"all el-1a9f5704\"><figure><div class=\"vce-single-image-inner vce-single-image--absolute\" style=\"padding-bottom: 128.302%; width: 371px;\"><img loading=\"lazy\" decoding=\"async\" class=\"vce-single-image vcv-lozad\" data-src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2021\/09\/Image_4.png-How-to-develop-Magento-2-Theme-in-easy-steps.png\" width=\"371\" height=\"476\" src=\"\" data-img-src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2021\/09\/Image_4.png-How-to-develop-Magento-2-Theme-in-easy-steps.png\" alt=\"How to develop Magento 2 Theme in easy steps\" title=\"Image_4.png - How to develop Magento 2 Theme in easy steps\" \/><noscript>\n        <img loading=\"lazy\" decoding=\"async\" class=\"vce-single-image\" src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2021\/09\/Image_4.png-How-to-develop-Magento-2-Theme-in-easy-steps.png\" width=\"371\" height=\"476\" alt=\"How to develop Magento 2 Theme in easy steps\" title=\"Image_4.png - How to develop Magento 2 Theme in easy steps\" \/>\n      <\/noscript><\/div><figcaption hidden=\"\"><\/figcaption><\/figure><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-65fb6777\" data-vce-do-apply=\"all el-65fb6777\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-0dc70ad3\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-0dc70ad3\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-0dc70ad3\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-dd1753ed\" data-vce-do-apply=\"all el-dd1753ed\"><p>Create a js file <strong>green-js.js<\/strong> file inside js folder.<\/p>\n<p>I have added <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <strong>define([<\/strong><br><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;\"jquery\",<\/strong><br><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ], function($, config){<\/strong><br><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;console.log(\"JS Loaded\");<\/strong><br><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;});<\/strong><\/p>\n<p>inside the folder<\/p>\n<p><br><strong>Loading JS file<\/strong><\/p>\n<p>To load JS create a <strong>requirejs-config.js<\/strong> as in image<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-6500b296\" data-vce-do-apply=\"all el-6500b296\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-e98586eb\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-e98586eb\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-e98586eb\"><div class=\"vce-single-image-container vce-single-image--align-center\"><div class=\"vce vce-single-image-wrapper\" id=\"el-61b2e02d\" data-vce-do-apply=\"all el-61b2e02d\"><figure><div class=\"vce-single-image-inner vce-single-image--absolute\" style=\"padding-bottom: 77.8626%; width: 393px;\"><img loading=\"lazy\" decoding=\"async\" class=\"vce-single-image vcv-lozad\" data-src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2021\/09\/require_js.png-Magento-2-theme-development.png\" width=\"393\" height=\"306\" src=\"\" data-img-src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2021\/09\/require_js.png-Magento-2-theme-development.png\" alt=\"Magento 2 theme development\" title=\"require_js.png - Magento 2 theme development\" \/><noscript>\n        <img loading=\"lazy\" decoding=\"async\" class=\"vce-single-image\" src=\"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2021\/09\/require_js.png-Magento-2-theme-development.png\" width=\"393\" height=\"306\" alt=\"Magento 2 theme development\" title=\"require_js.png - Magento 2 theme development\" \/>\n      <\/noscript><\/div><figcaption hidden=\"\"><\/figcaption><\/figure><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-f134c788\" data-vce-do-apply=\"all el-f134c788\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-0119ff2a\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-0119ff2a\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-0119ff2a\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-e3898b7a\" data-vce-do-apply=\"all el-e3898b7a\"><p>and add<\/p>\n<p><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var config = {<\/strong><\/p>\n<p><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; deps: [<\/strong><br><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; \"js\/green-js\",<\/strong><br><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]<\/strong><br><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };<\/strong><\/p>\n<p>It will load js from the web\/js folder.<\/p>\n<p>Clear cache and reload.<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-e8cc0016\" data-vce-do-apply=\"all el-e8cc0016\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-9186c43e\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-9186c43e\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-9186c43e\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-2aefb7aa\" data-vce-do-apply=\"all el-2aefb7aa\"><p>The message will be loaded in the console.<\/p>\n<p>By default, Magento loads all components from the parent theme. If we need any changes in any of the components we have to override it in the child theme and give a custom layout and designs.<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-801ea568\" data-vce-do-apply=\"all el-801ea568\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-20c07903\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-20c07903\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-20c07903\"><div class=\"vce-text-block\"><div class=\"vce-text-block-wrapper vce\" id=\"el-7df979a4\" data-vce-do-apply=\"all el-7df979a4\"><h2>How Can Bridge Global Help?<\/h2><p>Custom Magento theme development service providers like Bridge Global can help you give your customers a smooth shopping journey. Our dedicated team of <a href=\"https:\/\/www.bridge-global.com\/services\/custom-software-development\/open-source-software-development\/open-source-ecommerce-development-services\" target=\"_blank\" rel=\"noopener\">open source ecommerce development services<\/a> experts can customize or implement the Magento theme in your mind. We also optimize theme performance and speed up your Magento store.<\/p><p>Moreover, merchants with budget constraints can make use of ready-made Magento themes or plugins from the <a href=\"https:\/\/marketplace.magento.com\/partner\/Bridge+Global\" target=\"_blank\" rel=\"noopener\">Magento marketplace<\/a>. You can also visit our <a href=\"..\/store\/\">Magento Store<\/a> to access some highly functional Magento Themes.<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>Magento 2 theme development is explained here in simple steps helping you to implement beautiful themes for your Magento 2 websites. <!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":166,"featured_media":48483,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[128],"tags":[],"class_list":["post-48455","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-magento"],"featured_image_src":"https:\/\/www.bridge-global.com\/blog\/wp-content\/uploads\/2021\/09\/Theme-Development-in-Magento-2.-Easy-Steps-to-Do-It-Bridge-Global-blog.jpg","author_info":{"display_name":"Mohamed Mansoor","author_link":"https:\/\/www.bridge-global.com\/blog\/author\/mansoor\/"},"_links":{"self":[{"href":"https:\/\/www.bridge-global.com\/blog\/wp-json\/wp\/v2\/posts\/48455","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bridge-global.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bridge-global.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bridge-global.com\/blog\/wp-json\/wp\/v2\/users\/166"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bridge-global.com\/blog\/wp-json\/wp\/v2\/comments?post=48455"}],"version-history":[{"count":43,"href":"https:\/\/www.bridge-global.com\/blog\/wp-json\/wp\/v2\/posts\/48455\/revisions"}],"predecessor-version":[{"id":48517,"href":"https:\/\/www.bridge-global.com\/blog\/wp-json\/wp\/v2\/posts\/48455\/revisions\/48517"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bridge-global.com\/blog\/wp-json\/wp\/v2\/media\/48483"}],"wp:attachment":[{"href":"https:\/\/www.bridge-global.com\/blog\/wp-json\/wp\/v2\/media?parent=48455"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bridge-global.com\/blog\/wp-json\/wp\/v2\/categories?post=48455"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bridge-global.com\/blog\/wp-json\/wp\/v2\/tags?post=48455"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}