{"id":17,"date":"2022-03-04T04:11:09","date_gmt":"2022-03-04T04:11:09","guid":{"rendered":"http:\/\/localhost\/blog\/?p=17"},"modified":"2023-04-24T08:42:53","modified_gmt":"2023-04-24T01:42:53","slug":"create-magento-2-theme-step-by-step","status":"publish","type":"post","link":"https:\/\/magerubik.com\/blog\/create-magento-2-theme-step-by-step\/","title":{"rendered":"Create Magento 2 Theme step by step"},"content":{"rendered":"
\n

To better understand the structure of magento 2 themes, I suggest you start looking at the two themes available from magento.The Blank theme is only custom CSS, it still keeps the layout from modules.The theme Luma inherits from the theme Blank and you can see it has customizing layout from modules. In this article, we will create Magento 2 theme that inherits from the blank theme.<\/p>\n<\/div>\n

\"magento<\/figure>\n

Let go!<\/strong> First we create a magento theme folder structure like below:<\/p>\n\n\n

app\/design\/frontend\/vendor name\/\n\u251c\u2500\u2500 theme name\/\n\u2502   \u251c\u2500\u2500 etc\/\n\u2502   \u2502   \u251c\u2500\u2500 view.xml\n\u2502   \u251c\u2500\u2500 meida\/\n\u2502   \u2502   \u251c\u2500\u2500 preview.jpg\n\u2502   \u251c\u2500\u2500 web\/\n\u2502   \u2502   \u251c\u2500\u2500 images\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 logo.svg\n\u2502   \u251c\u2500\u2500 registration.php\n\u2502   \u251c\u2500\u2500 theme.xml\n\u2502   \u251c\u2500\u2500 composer.json<\/pre>\n\n\n\n
You can copy all its from vendor\/magento\/theme-frontend-blank<\/span> then we will edit each.<\/p>\n
1. Edit theme.xml<\/span> to declare your theme<\/strong><\/h2>\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>MageRubik Online shop<\/title> <!-- what you want see on backend -->\n     <parent>Magento\/blank<\/parent> <!-- the parent theme -->\n     <media>\n         <preview_image>media\/preview.jpg<\/preview_image> <!-- your home page layout -->\n     <\/media>\n <\/theme>\n\n<\/pre>\n\n\n\n
2. Edit composer.json<\/span><\/strong><\/h2>\n
This file is not necessary, but you may create a composer.json file to spread a theme as a composer package.<\/p>\n\n\n\n
{\n    \"name\": \"MageRubik\/rubikshop\",\n    \"description\": \"N\/A\",\n    \"config\": {\n        \"sort-packages\": true\n    },\n    \"require\": {\n        \"php\": \"~7.1.3||~7.2.0||~7.3.0\",\n        \"magento\/framework\": \"102.0.*\"\n    },\n    \"type\": \"magento2-theme\",\n    \"license\": [\n        \"OSL-3.0\",\n        \"AFL-3.0\"\n    ],\n    \"autoload\": {\n        \"files\": [\n            \"registration.php\"\n        ]\n    },\n    \"version\": \"100.3.5\"\n}<\/pre>\n\n\n\n
3. Edit registration.php<\/span> to declare your theme folder<\/strong><\/h2>\n
Add your theme path frontend\/Magerubik\/rubikshop<\/span>, It mean full path folder theme is app\/design\/frontend\/frontend\/Magerubik\/rubikshop<\/span><\/p>\n\n\n\n
<?php\n\/**\n * Copyright \u00a9 Magento, Inc. All rights reserved.\n * See COPYING.txt for license details.\n *\/\nuse \\Magento\\Framework\\Component\\ComponentRegistrar;\nComponentRegistrar::register(ComponentRegistrar::THEME, 'frontend\/Magerubik\/rubikshop', __DIR__);<\/pre>\n\n\n\n
4. Edit view.xml<\/span><\/strong><\/h2>\n
You can change or create new value catalog product images in this file. Example change categories product image:<\/p>\n\n\n\n
<images module=\"Magento_Catalog\">\n\t<image id=\"category_page_grid\" type=\"small_image\">\n\t\t<width>240<\/width><!-- px -->\n\t\t<height>240<\/height>\n\t<\/image>\n\t<image id=\"category_page_list\" type=\"thumbnail\">\n\t\t<width>240<\/width>\n\t\t<height>240<\/height>\n\t<\/image>\n<\/images>\t<\/pre>\n\n\n\n