Magento development plays an undeniably crucial role in creating an E-Commerce website.
To really upgrade your online store, businesses should spend a good investment in Magento theme development
Let TECHVIFY introduce to you a step-by-step guideline for Magento Theme Development. By fully acknowledging these steps, you can better view this whole process.
Learn more: Top 7 Magento Development Best Practices
Step #1: Create a Directory Containing Theme Go to: /app/design/frontend and create a new directory with the vendor name you want for the theme package: /app/design/frontend/. Under the vendor>directory, create a directory named according to your theme. app/design/frontend/
├ ── /
│ │ ├ ── …/
│ │ │ ├ ── …
│ │ │ ├ ── …
After creating this structure, you need to declare your theme so that Magento knows it exists. You can set your theme as the current theme in your Magento backend.
Step #2: Declare your Theme You must create a theme.xml file containing the theme name to declare your theme. If the theme inherits from a parent theme, the .xml file should also include the parent theme name. The theme preview image is also required if necessary.
Add or copy from an existing theme.xml file to your theme directory app/design/frontend//. Configure it using the following example: m2-theme
Magento/
media/m2-theme-image.jpg
In the
tag, insert the name of your theme. In the <parent> tag, you can specify the parent theme for fallback purposes.</p><p>The theme image in the <preview_image> tag is a thumbnail image, which shows the theme page for preview purposes. The thumbnail image is in <em>app/design/frontend/<theme>/m2-theme/media/m2-theme-image.jpg.</em></p><p>If you change the theme title or parent theme information in theme.xml after a theme is already registered, you need to open or reload any Magento Admin to save changes in the database.</p><h2>Step #3: Make a Composer Package</h2><p>Magento 2 themes are distributed as Composer packages so that they will be registered as a Package on the server. Add a file composer.json which is optional.</p><p>The composer.json file provides theme dependency information. Refer to a current theme.xml file for the correct dependencies and their versions.</p><p>Example of a theme composer.json file:</p><pre><code>{
"name": "<vendor>/m2-theme",
"description": "Magento 2 Theme Customization",
"require": {
"php": "~5.6|~7.0|~7.1|~7.2|~7.3|~7.4",
"<vendor>/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"
]
}
}</code></pre><h2>Step #4: Adding registration.php</h2><p>To register your theme in the system, add a file registration.php in your theme directory with the below content:</p><pre><code><?php
/**
Copyright © Magento, Inc. All rights reserved.
See COPYING.txt for license details.
*/
\Magento\Framework\Component\ComponentRegistrar:: register;
\Magento\Framework\Component\ComponentRegistrar::THEME,
'frontend/<Vendor>/<theme>',
__DIR__
);</code></pre><p><Vendor> is your vendor name and <theme> is the theme code.</p><h2>Step #5: Creating Directory Structure for Static Files</h2><p>The theme package consists of many types of files: styles, fonts, JavaScript, and images. Each type should be stored in its own sub-directory of web in your theme directory:</p><p><em>app/design/<area>/<Vendor>/<theme>/</em></p><p><em>├</em><em>──</em><em> web/</em></p><p><em>│ </em><em>├</em><em>──</em><em> css/</em></p><p><em>│ │ </em><em>├</em><em>──</em><em> source/</em><em></em></p><p><em>│ </em><em>├</em><em>──</em><em> fonts/</em></p><p><em>│ </em><em>├</em><em>──</em><em> images/</em></p><p><em>│ </em><em>├</em><em>──</em><em> js/</em></p><p>In the …/<theme>/web/images directory, you store the general theme-related static files.</p><h2>Step #6: Configure Images</h2><p>Product image sizes and other properties used on a theme are configured in a view.xml configuration file. It is required for a theme but is optional if it exists in the parent theme.</p><p>If the product image sizes of your theme differ from those of the parent theme, or if your theme does not inherit from any theme, you will need to add view.xml.</p><p>Copy the view.xml file from the etc. directory of the parent theme or copy it from the Blank theme. Configure all storefront product image sizes in the view.xml file.</p><pre><code><image id="category_page_grid" type="small_image">
<width>250</width>
<height>250</height>
</image></code></pre><h2>Step #7: Declaring Theme Logo</h2><p>In the Magento application, a logo image’s default format and name is logo.svg. You can use a logo file with a different name and format, but you might need to declare it.</p><p>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 <em>/app/design/frontend/<theme>/m2-theme/Magento_Theme/layout/default.xml.</em></p><pre><code><page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="logo">
<arguments>
<argument name="logo_file" xsi:type="string">images/m2-logo.png</argument>
<argument name="logo_img_width" xsi:type="number">350</argument>
<argument name="logo_img_height" xsi:type="number">350</argument>
</arguments>
</referenceBlock>
</body>
</page></code></pre><h2>Step #8: Customize Theme Layout</h2><p>Once your basic theme structure is created, now you can customize or override any layout and set up a new design layout for your new theme.</p><p>To override the theme layout, you need to put the layout file with the same name in the following location: <em>/app/design/frontend/Magento/<theme>/Magento_Theme/layout/default.xml</em></p><p>These files override the following layouts: <em>/<vendor>/m2-theme/Magento_Theme/layout/default.xml</em></p><h2>Step #9: Configure the Theme in Magento Admin Panel</h2><p>The next step is to apply the custom theme you created from Magento Admin to your website: Go to Admin->Content->Design->Configuration</p><p>Click Edit on your store view, you will see a page with a designed configuration. On the Default Theme tab, select your newly created theme in the Applied Theme drop-down and Click Save Configuration to apply the theme.</p><h2>Step #10: Final Deployment</h2><p>To make the theme visible on the Magento storefront, we have to run one command to deploy the files:</p><ol><li>Log in to your Magento store SSH account</li><li>Go to Magento root directory and run the below command:</li></ol><pre><code><em>php bin/magento setup:upgrade</em></code></pre><ol start="3"><li>Run another command to deploy the theme files:</li></ol><pre><code><em>php bin/magento setup:static-content:deploy</em></code></pre><p>Now your theme is ready to be used.</p><p>That’s all you need to know about the <strong>Magento theme development </strong>process. Make sure you know the procedure to every detail to utilize all the best features of Magento development.</p><figure><img decoding="async" class="aligncenter" src="https://static-cdn.techvify.com/strapi-uploads/uploads/0505_magentotheme_2_927bfdbaeb.jpg" alt="Magento Development vietnam" /></figure><p>Or if you find this process too complicated to understand, you should choose a trustworthy web development team. TECHVIFY Software is a <a title="Magento development services" href="https://techvify-software.com/all-you-need-to-know-about-magento-development/" rel="nofollow noopener" target="_blank">Magento development</a> specialist whose ultimate goal is to create the best E-Commerce website that can meet all of the client’s requirements. With TECHVIFY, you can rest assured that your online store is in good hands.</p><div class="tvf-box-cta"><p id="title">TECHVIFY – Global AI & Software Solution Company</p><p>From Startups to Industry Leaders: TECHVIFY prioritizes results, not just deliverables. Accelerate your time to market and see ROI early with high-performing teams, AI (including GenAI) Software Solutions, and ODC (Offshore Development Center) services.</p><ul><li><strong>Email:</strong><a href="mailto:contact@techvify.com.vn">contact@techvify.com.vn</a></li><li><strong>Phone:</strong><a href="tel:+842477762666">(+84)24.77762.666</a></li></ul><div><a href="#tvf-contact"><button class="tvf-cta-btn" type="button">Contact Us</button></a></div></div></div><div class="mb-16 pt-8 border-t border-white/10"><h3 class="text-white font-medium text-lg mb-4">Categories & Tags</h3><div class="flex flex-wrap gap-3"><template id="P:c"></template></div></div></div></article></div></div><div hidden id="S:7"><a class="w-20 h-20 rounded-lg overflow-hidden bg-white/5 hover:opacity-80 transition-opacity relative flex items-center justify-center" href="/authors/TECHVIFY%20Team"><img alt="TECHVIFY Team" loading="lazy" width="80" height="80" decoding="async" data-nimg="1" class="object-contain" style="color:transparent" src="https://static-cdn.techvify.com/strapi-uploads/uploads/techvify_logo_143a94117f.jpeg"/></a></div><script>$RS("S:7","P:7")</script><div hidden id="S:8"><a class="hover:text-white/80 transition-colors" href="/authors/TECHVIFY%20Team"><h4 class="text-white font-semibold text-lg mb-1">TECHVIFY Team</h4></a></div><script>$RS("S:8","P:8")</script><div hidden id="S:9"><a target="_blank" rel="noopener noreferrer" class="w-6 h-6 hover:opacity-80 transition-opacity" href="https://twitter.com/intent/tweet?text=Check%20out%20this%20article%3A%20Magento%20Theme%20Development%20Tutorial%3A%20A%20guide%20for%20beginners&url=https%3A%2F%2Ftechvify.com%2Fmagento-theme-development-tutorial"><div class="w-6 h-6 bg-white/20 rounded flex items-center justify-center"><span class="text-xs">𝕏</span></div></a></div><script>$RS("S:9","P:9")</script><div hidden id="S:a"><a target="_blank" rel="noopener noreferrer" class="w-6 h-6 hover:opacity-80 transition-opacity" href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Ftechvify.com%2Fmagento-theme-development-tutorial"><div class="w-6 h-6 bg-white/20 rounded flex items-center justify-center"><span class="text-xs">in</span></div></a></div><script>$RS("S:a","P:a")</script><div hidden id="S:b"><a target="_blank" rel="noopener noreferrer" class="w-6 h-6 hover:opacity-80 transition-opacity" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Ftechvify.com%2Fmagento-theme-development-tutorial"><div class="w-6 h-6 bg-white/20 rounded flex items-center justify-center"><span class="text-xs">f</span></div></a></div><script>$RS("S:b","P:b")</script><div hidden id="S:c"><a class="px-4 py-1.5 rounded-full text-sm font-semibold text-white hover:opacity-90 transition-opacity" style="background-color:#ebdc0c" href="/archive?category=knowledge">Knowledge</a></div><script>$RS("S:c","P:c")</script><script>$RC("B:6","S:6")</script></body></html></body></html> 
