Adobe Commerce_ The Complete Theme Development Guide for 2022

1. www.vihadigitalcommerce.com

2. About VDC Over 8+ years & 1800+ projects, VDC is a full service ECommerce Web Development & Online Marketing Agency that provides value added services at affordable rates to numerous small, medium & large size of businesses across the world. Deliver 24×7 uptime and responsive digital commerce solutions that allow businesses to offer remote access of their professional offerings VDC is an offshore web development & online marketing center with agile approach of development www.vihadigitalcommerce.com

3. Adobe Commerce: The Complete Theme Development Guide for 2022 • A theme is an Adobe Commerce application component that provides a consistent look and feel (visual design) for an entire application area (for example, the storefront or Adobe Commerce admin) by combining custom templates, layouts, styles, or images. • Before you start working on your own Adobe Commerce 2 theme development,make sure the following requirements are met: • You have some coding experience with Adobe Commerce • You have some basic knowledge of Adobe Commerce 2 • Adobe Commerce 2 is installed and operational on your local host, and you have access to the frontend and backend. www.vihadigitalcommerce.com

4. Step 1: Develop a Theme Directory • Go to your Adobe Commerce 2 root • Create a new directory under the frontend directory named after your theme vendor. • Make a directory for your Adobe Commerce 2 theme in your theme vendor directory. Step 2: Create Your Adobe Commerce 2 Theme • Now, create the theme.xml file • This is a preview thumbnail image that appears in the Adobe Commerce 2 admin on our theme page. • If you do not have this file in the correct location, you will receive an error when accessing your theme page via Adobe Commerce 2 admin. www.vihadigitalcommerce.com

5. Step 3: Create a Composer Package for Your Adobe Commerce 2 Theme • To register the package on a packaging server, place a composer.json file in your theme directory • This file is included in the theme dependency list. Step 4: Include Registration.php in Your Custom Adobe Commerce 2 Theme Development. • To register your theme in the Adobe Commerce system, create a registration. • Php file in your theme directory Step 5: Apply and Configure Adobe Commerce 2 Custom Theme in Admin • Once you’ve added your theme to the file system, everything is in place for you to activate your theme and apply it to your store • Ensure that your theme appears on this list. • After you’ve decided on a theme, click the “Save Config” button to clear the cache. www.vihadigitalcommerce.com

6. Step 6: Configure Image Properties in Your Theme • This file is required for the theme if the product image sizes of your custom Adobe Commerce theme development are different from the parent theme sizes. • For example, you make the category grid view product images by specifying the size of 350 x 350 pixels. Copy the view.xml file from the etc directory of your parent theme to your theme’s etc directory. Step 7: Create a Custom Adobe Commerce Theme Logo • Create Adobe Commerce Theme/layout directories and add the following code to a default.xml file to declare a theme logo. • The logo filename was m2-logo.png, and the logo size was 350 x 350 pixels. You are free to use your own logo filename and size. Step 8: Theme Inheritance • You can use an existing theme as the foundation for custom Adobe Commerce theme development customizations or minor store design upgrades such as holiday decorations. www.vihadigitalcommerce.com

7. If a view file is not found in your custom Adobe Commerce theme, the Adobe Commerce system will look through the default theme’s module files or library. • The fallback mechanism for static files such as CSS, fonts, images, and JavaScript, as well as other theme files, is entirely different. • A parent theme is defined in the child theme via a theme.xml file. Step 9: Theme Design • The main focus of this section will be styling, which will primarily involve editing the CSS or LESS in this case. • Before we begin styling the theme, you should be aware of three different methods for styling the website: • Compilation on the Server • Grunt for Server-Side Compilation • Client-Side Collection www.vihadigitalcommerce.com

8. You can add theme-specific styles to this file, save it, and then reload your browser. With client-side compilation on, you’ll notice that there are no styles when the browser first loads. This is due to the fact that Adobe Commerce is compiling the LESS at the time. After a few seconds, you should see the styles appear, hopefully with your custom styles. Step 10: Modify Theme Layout • You must place the layout file with the same name in the following location to override the theme layout • These files take precedence over the following layouts • Always use the directory name page layout instead of the layout when overriding page layout files. • The layout overriding mechanism allows for a great deal of customization. I advise you not to make the following changes: • Change neither the name nor the alias of the block. • Change the page type of the parent handle. www.vihadigitalcommerce.com

9. Final Words: • In this Adobe Commerce 2 theme development series, We have covered the basics of frontend custom Adobe Commerce 2 theme development for beginners. • If you are an experiencedAdobe Commerce developer, you can use this to polish up on fundamental concepts. If you still need any assistance regarding adobe commerce theme development, then you can reach our Adobe Commerce Experts at info@vihadigitalcommerce.com. www.vihadigitalcommerce.com

10. Read the complete story follow the link below:- Adobe Commerce: The Complete Theme Development Guide for 2022 Read Blog: https://www.vihadigitalcommerce.com/blog/ www.vihadigitalcommerce.com

11. LET'S GET TOGETHER Start Discussion About Your eCommerce Development & Online Marketing Hassle-free One Stop Solutions, Hire Us! Website: www.vihadigitalcommerce.com Skype: bdo3.magentoguys Email: info@vihadigitalcommerce.com Call: +91 7096620202