Overall, custom Magento 2 theme development is essential to creating an online store on the platform. Also when creating a custom theme in Magento 2, adding unique visual elements can make your store stand out, especially during seasonal events. For example, snowfall effect in Magento store<\/a>.<\/p>\n\n\n\n Ideally, Magento 2 custom theme development requires you to have:<\/p>\n\n\n\n Let\u2019s get started with the Magento custom theme development tutorial.<\/p>\n\n\n\n Magento does not recommend modifying the default theme code. The Magento version upgrade<\/a> may override these changes. Instead, it is recommended to create a new theme.<\/p>\n\n\n\n Follow the steps below to create a custom Magento 2 theme.<\/p>\n\n\n\n You need to create a new directory for the custom Magento 2 theme.<\/p>\n\n\n\n Here\u2019s what the Magento 2 custom theme directory will look like:<\/p>\n\n\n\n app\/design\/frontend\/ Now, you need to declare a new theme so Magento 2 can find it. To do that, create a In the above code, we\u2019ve specified the following:<\/p>\n\n\n\n Please note:<\/strong> In the above example, the preview image, i.e. MitTheme-image.jpg is located in the app\/design\/frontend\/Meetanshi\/MitTheme\/media\/<\/strong> directory. You will need to upload the preview image to the media directory before specifying it in the theme declaration.<\/p>\n\n\n\n Create a composer.json file to declare the libraries that your custom Magento 2 theme depends on. This is important to distribute your theme as a package.<\/p>\n\n\n\n Here\u2019s an example of Next, create a registration.php file for the custom theme. Navigate to the app\/design\/frontend\/Meetanshi\/MitTheme<\/strong> and create a Once you\u2019ve declared the custom Magento 2 theme, you can configure it from the admin panel. Go to Stores > Configuration > Design<\/strong> and select the custom theme you created. For e.g., Click the \u201cSave Config<\/strong>\u201d button to apply changes.<\/p>\n\n\n\n And flush Magento 2 cache from the System > Cache Management<\/strong>.<\/p>\n\n\n\n To configure the image sizes on the frontend pages like product grids, you need to configure the For e.g., you can modify the following snippet to change the dimensions of the category grid images;<\/p>\n\n\n\n To add a logo for your theme, you need to create a layout directory and define it. Navigate to \/app\/design\/frontend\/Meetanshi\/MitTheme\/Magento_Theme\/layout\/<\/strong> and create Magento pages are made up of containers and blocks. The containers contain the elements that appear on the page. For e.g., there are containers for the header, footer, etc.<\/p>\n\n\n\n The Magento 2 pages are rendered according to the layout files defined. Here are the basic conventional locations for different types of layouts:<\/p>\n\n\n\n But it is recommended to create a child Magento theme on top of the default Luma or Blank theme. That\u2019s because it can be overwhelming to define the custom Magento 2 layouts and elements.<\/p>\n\n\n\n You can utilize the child-parent theme relationship in Magento 2 and start customizing the base theme. You can always hire our Magento customization experts to get any help with custom theme development. You can customize your theme by adding sticky add to cart<\/a> button to serve better user experience, without letting users browsing journey getting disturbed.<\/p>\n","protected":false},"excerpt":{"rendered":" Want to get started with a custom Magento 2 theme development? Learn here the step-wise method. Magento 2 is an ideal e-commerce platform for brands…<\/p>\n","protected":false},"author":51,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-3410","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/3410","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/51"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=3410"}],"version-history":[{"count":2,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/3410\/revisions"}],"predecessor-version":[{"id":9291,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/3410\/revisions\/9291"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=3410"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=3410"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=3410"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Custom Magento 2 Theme Development: Prerequisites<\/h2>\n\n\n\n
\n
How to Create a Custom Magento 2 Theme?<\/h2>\n\n\n\n
Step 1: Create a Theme Directory<\/h3>\n\n\n\n
\n
\u251c\u2500\u2500 Meetanshi\/
\u2502 \u2502 \u251c\u2500\u2500MitTheme\/
\u2502 \u2502 \u2502 \u251c\u2500\u2500 …
\u2502 \u2502 \u2502 \u251c\u2500\u2500 …<\/p>\n\n\n\nStep 2: Declare Magento Theme<\/h3>\n\n\n\n
theme.xml<\/code> file in the [root_directory]\/app\/design\/frontend\/Meetanshi\/MitTheme<\/strong> with the following code:<\/p>\n\n\n\n<theme xmlns_xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi_noNamespaceSchemaLocation=\"urn:magento:framework:Config\/etc\/theme.xsd\">\n<title>Meetanshi MitTheme<\/title>\n<parent>Magento\/Luma<\/parent>\n<media>\n<preview_image>media\/MitTheme-image.jpg<\/preview_image>\n<\/media>\n<\/theme><\/pre>\n\n\n\n
\n
Step 3: Add Composer Package<\/h3>\n\n\n\n
composer.json<\/code> file:<\/p>\n\n\n\n{\n \"name\": \"Meetanshi\/MitTheme\",\n \"description\": \"N\/A\",\n \"require\": {\n \"php\": \"~5.5.0|~5.6.0|~7.0.0\",\n \"magento\/theme-frontend-blank\": \"100.0.*\",\n \"magento\/framework\": \"100.0.*\"\n },\n \"type\": \"magento2-theme\",\n \"version\": \"100.0.1\",\n \"license\": [\n \"OSL-3.0\",\n \"AFL-3.0\"\n ],\n \"autoload\": {\n \"files\": [\n \"registration.php\"\n ]\n }\n}<\/pre>\n\n\n\nStep 4: Add Registration.php File<\/h3>\n\n\n\n
registration.php<\/code> file with the following code:<\/p>\n\n\n\n<?php\n\/**\n* Copyright \u00a9 Magento. All rights reserved.\n* See COPYING.txt for license details.\n*\/\n\\Magento\\Framework\\Component\\ComponentRegistrar::register(\n\\Magento\\Framework\\Component\\ComponentRegistrar::THEME,\n'frontend\/Meetanshi\/MitTheme',\n__DIR__\n);<\/pre>\n\n\n\n
Step 5: Configure Custom Theme<\/h3>\n\n\n\n
MitTheme<\/code> in our case.<\/p>\n\n\n![\"Magento](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2024\/02\/Magento-2-custom-theme-set.png\")
<\/figure>\n<\/div>\n\n\nStep 6: Configure Image Properties<\/h3>\n\n\n\n
view.xml<\/code> file. Copy the view.xml file of the parent theme into \/app\/design\/frontend\/Meetanshi\/MitTheme\/etc\/ directory and modify it to change the image sizes.<\/p>\n\n\n\n...\n <image id=\"category_page_grid\" type=\"small_image\">\n <width>550<\/width>\n <height>550<\/height>\n <\/image>\n...><\/pre>\n\n\n\n
Step 7: Declare Logo in Custom Theme<\/h3>\n\n\n\n
default.xml<\/code> with the following code:<\/p>\n\n\n\n<page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n<body>\n<referenceBlock name=\"logo\">\n<arguments>\n<argument name=\"logo_file\" xsi:type=\"string\">images\/logo.png<\/argument>\n<argument name=\"logo_img_width\" xsi:type=\"number\">350<\/argument>\n<argument name=\"logo_img_height\" xsi:type=\"number\">350<\/argument>\n<\/arguments>\n<\/referenceBlock>\n<\/body>\n<\/page><\/pre>\n\n\n\n
Step 8: Add Basic Layout Elements<\/h3>\n\n\n\n
Step 9: Define Layout Files Types & Conventions<\/h3>\n\n\n\n
\n
\n
\n