{"id":1048,"date":"2020-01-02T03:01:58","date_gmt":"2020-01-02T03:01:58","guid":{"rendered":"https:\/\/www.magetop.com\/blog\/?p=1048"},"modified":"2021-07-22T03:00:30","modified_gmt":"2021-07-22T03:00:30","slug":"how-to-create-new-theme-in-magento-2","status":"publish","type":"post","link":"https:\/\/www.magetop.com\/blog\/how-to-create-new-theme-in-magento-2\/","title":{"rendered":"How To Create New Theme In Magento 2"},"content":{"rendered":"\n\n\n

There are a number of differences and improvements to theme structure and the fallback system in Magento 2. The fallback system in Magento 2.x works in a similar way to Magento 1.x, but now has the added advantage of being able to create unlimited parent themes. In this tutorial, we will learn about: How to create new theme in Magento 2<\/strong>. This is an important basic knowledge that you should not ignore.<\/p>\n\n\n\n

We’ll build theme file structure looks as follows:<\/p>\n\n\n\n

app\/design\/frontend\/Magetop\/\n \u251c\u2500\u2500 default\/\n \u2502   \u251c\u2500\u2500 etc\/\n \u2502   \u2502   \u251c\u2500\u2500 view.xml\n \u2502   \u251c\u2500\u2500 media\/\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   \u2502   \u251c\u2500\u2500 css\/\n \u2502   \u2502   \u2502   \u251c\u2500\u2500 source\/\n \u2502   \u2502   \u2502   \u2502   \u251c\u2500\u2500 _theme.less\n \u2502   \u2502   \u251c\u2500\u2500 fonts\/\n \u2502   \u2502   \u251c\u2500\u2500 js\/\n \u2502   \u251c\u2500\u2500 registration.php\n \u2502   \u251c\u2500\u2500 theme.xml\n \u2502   \u251c\u2500\u2500 composer.json<\/code><\/pre>\n\n\n\n
Before going to the article you should look at:<\/p>\n\n\n\n
<Vendor> is theme vendor. ex: Magetop.<\/p>\n\n\n\n
<theme> is theme name. ex: default<\/p>\n\n\n\n
Creation of Magento 2 theme folder<\/h2>\n\n\n\n
app\/design\/frontend\/<Vendor>\/<theme> <\/code><\/p>\n\n\n\n
And, Copy files theme.xml, registration.php, composer.json from vendor\/magento\/theme-frontend-blank<\/code>.<\/p>\n\n\n\n
Declaration of theme<\/h2>\n\n\n\n
Edit file theme.xml<\/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>Magetop Default<\/title><!-- your theme's name, what you see in backend  -->\n    <parent>Magento\/blank<\/parent><!-- the parent theme, in case your theme inherits from an existing theme -->\n    <media>\n        <preview_image>media\/preview.jpg<\/preview_image><!-- the path to your theme's preview image, what you see on home page -->\n    <\/media>\n<\/theme>\n<\/pre><\/div>\n\n\n
Developing composer package to distribute it<\/h2>\n\n\n\n
Edit file composer.json<\/code> like this:<\/p>\n\n\n\n
{\n     \"name\": \"magento\/theme-frontend-default\",\n     \"description\": \"N\/A\",\n     \"config\": {\n         \"sort-packages\": true\n     },\n     \"require\": {\n         \"php\": \"~7.1.3||~7.2.0\",\n         \"magento\/framework\": \"102.0.\",\n         \"magento\/theme-frontend-blank\": \"100.3.\"\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.0\"\n }<\/code><\/pre>\n\n\n\n
Register the theme<\/h2>\n\n\n\n
Edit file registration.php<\/code>:<\/p>\n\n\n
\n<?php\n \nuse \\Magento\\Framework\\Component\\ComponentRegistrar;\n \nComponentRegistrar::register(ComponentRegistrar::THEME, 'frontend\/Magetop\/default', __DIR__);\n<\/pre><\/div>\n\n\n
We\u2019ll be running Magento in developer mode. In developer mode, Magento\u2019s much more strict about PHP errors, will display raw exceptions, and make it easier to develop modules.<\/p>\n\n\n\n
Open command prompt and change directory to your Magento install directory. Run the following command in the command prompt:<\/p>\n\n\n\n
php bin\/magento deploy:mode:set developer<\/code><\/p>\n\n\n\n
Now, we go to backend check our theme was complete register.<\/p>\n\n\n\n
\"Select<\/figure>\n\n\n\n
\"Magetop<\/figure>\n\n\n\n
Creating statistic files and folders:<\/h2>\n\n\n\n
Create directories to store the static files: styles, fonts, JavaScript and images. Each type should be stored in a separate sub-directory web in your theme folder.<\/p>\n\n\n\n
app\/design\/frontend\/Magetop\/default\/\n \u251c\u2500\u2500 web\/\n \u2502 \u251c\u2500\u2500 css\/\n \u2502 \u2502 \u251c\u2500\u2500 source\/ \n \u2502 \u251c\u2500\u2500 fonts\/\n \u2502 \u251c\u2500\u2500 images\/\n \u2502 \u251c\u2500\u2500 js\/<\/code><\/pre>\n\n\n\n
Configuring catalog product images<\/h2>\n\n\n\n
Copy files view.xml from vendor\/magento\/theme-frontend-blank\/etc\/<\/code> then edit it if you want. The properties of product images used on the storefront are stored in this file.<\/p>\n\n\n\n
Declaring theme logo<\/h2>\n\n\n\n
If you have logo.svg<\/code> file you can update to your theme folder it will auto override logo default of Magento.<\/p>\n\n\n\n
Or you can change different file formats such as png, jpg but you have to declare it.<\/p>\n\n\n\n
To declare a theme logo, add an extending default.xml to \/Magento_Theme\/layout\/default.xml<\/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">300<\/argument> \n                <argument name="logo_img_height" xsi:type="number">300<\/argument>\n            <\/arguments>\n        <\/referenceBlock>\n    <\/body>\n<\/page>\n<\/pre><\/div>\n\n\n
Then you update file logo.png to <theme_dir>\/web\/images\/<\/code><\/p>\n\n\n\n
Apply we theme then see it on the frontend<\/h2>\n\n\n\n
Go to Backend > Content > Configuration<\/code> then click edit<\/code> to choose our theme<\/p>\n\n\n\n
\"Design<\/figure>\n\n\n\n
\"Main<\/figure>\n\n\n\n
Now you can refresh cache then go to frontend to see your changes applied. Good luck!<\/p>\n\n\n\n
This is How to create new theme in Magento 2<\/strong>.<\/p>\n\n\n\n
You can see the next post: Customize cover, illustration layout in Magento 2<\/a>.<\/p>\n\n\n\n
Follow us for more helpful tutorial!<\/p>\n\n\n\n
We hope this is useful blog for you.<\/p>\n\n\n\n
Thank you for reading!<\/p>\n","protected":false},"excerpt":{"rendered":"
There are a number of differences and improvements to theme structure and the fallback system in Magento 2. The fallback system in Magento 2.x works in a similar way to Magento 1.x, but now has the added advantage of being able to create unlimited parent themes.<\/p>\n","protected":false},"author":1,"featured_media":1060,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[2],"tags":[190,188,189,187,107,191],"class_list":["post-1048","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-magento-2-tutorials","tag-create-new-theme-in-magento","tag-create-new-theme-in-magento-2","tag-how-to-create-new-theme-in-magento","tag-how-to-create-new-theme-in-magento-2","tag-magento-2-tutorials","tag-magento-2-3-create-new-theme"],"yoast_head":"\nHow To Create New Theme In Magento 2 - Magetop Blog<\/title>\n<meta name=\"description\" content=\"In this tutorial, we will learn about: How to create new theme in Magento 2. This is an important basic knowledge that you should not ignore.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.magetop.com\/blog\/how-to-create-new-theme-in-magento-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Create New Theme In Magento 2 - Magetop Blog\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, we will learn about: How to create new theme in Magento 2. This is an important basic knowledge that you should not ignore.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.magetop.com\/blog\/how-to-create-new-theme-in-magento-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Magetop Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/MagetopStore\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/MagetopStore\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-02T03:01:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-07-22T03:00:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Create-New-Theme-In-Magento-2.png?fit=750%2C450&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"450\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Adam Roger\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/MagetopStore\" \/>\n<meta name=\"twitter:site\" content=\"@MagetopStore\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Adam Roger\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-create-new-theme-in-magento-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-create-new-theme-in-magento-2\/\"},\"author\":{\"name\":\"Adam Roger\",\"@id\":\"https:\/\/www.magetop.com\/blog\/#\/schema\/person\/1bf4d5d0c4f280303345970448feb411\"},\"headline\":\"How To Create New Theme In Magento 2\",\"datePublished\":\"2020-01-02T03:01:58+00:00\",\"dateModified\":\"2021-07-22T03:00:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-create-new-theme-in-magento-2\/\"},\"wordCount\":394,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-create-new-theme-in-magento-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Create-New-Theme-In-Magento-2.png?fit=750%2C450&ssl=1\",\"keywords\":[\"Create New Theme In Magento\",\"Create New Theme In Magento 2\",\"How To Create New Theme In Magento\",\"How To Create New Theme In Magento 2\",\"magento 2 tutorials\",\"Magento 2.3 create New Theme\"],\"articleSection\":[\"Magento 2 Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.magetop.com\/blog\/how-to-create-new-theme-in-magento-2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-create-new-theme-in-magento-2\/\",\"url\":\"https:\/\/www.magetop.com\/blog\/how-to-create-new-theme-in-magento-2\/\",\"name\":\"How To Create New Theme In Magento 2 - Magetop Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-create-new-theme-in-magento-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-create-new-theme-in-magento-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Create-New-Theme-In-Magento-2.png?fit=750%2C450&ssl=1\",\"datePublished\":\"2020-01-02T03:01:58+00:00\",\"dateModified\":\"2021-07-22T03:00:30+00:00\",\"description\":\"In this tutorial, we will learn about: How to create new theme in Magento 2. This is an important basic knowledge that you should not ignore.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-create-new-theme-in-magento-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.magetop.com\/blog\/how-to-create-new-theme-in-magento-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-create-new-theme-in-magento-2\/#primaryimage\",\"url\":\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Create-New-Theme-In-Magento-2.png?fit=750%2C450&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Create-New-Theme-In-Magento-2.png?fit=750%2C450&ssl=1\",\"width\":750,\"height\":450,\"caption\":\"How To Create New Theme In Magento 2\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-create-new-theme-in-magento-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.magetop.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How To Create New Theme In Magento 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.magetop.com\/blog\/#website\",\"url\":\"https:\/\/www.magetop.com\/blog\/\",\"name\":\"Magetop Blog\",\"description\":\"Exploring Magento Tips, Tricks, and Trends\",\"publisher\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.magetop.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.magetop.com\/blog\/#organization\",\"name\":\"Magetop.com\",\"url\":\"https:\/\/www.magetop.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.magetop.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/11\/logo.png?fit=475%2C475&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/11\/logo.png?fit=475%2C475&ssl=1\",\"width\":475,\"height\":475,\"caption\":\"Magetop.com\"},\"image\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/MagetopStore\",\"https:\/\/x.com\/MagetopStore\",\"https:\/\/www.linkedin.com\/company\/magetop\",\"https:\/\/www.pinterest.com\/magetop\",\"https:\/\/www.youtube.com\/channel\/UCXoiJsz88OfPmwa8QpUkwOA\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.magetop.com\/blog\/#\/schema\/person\/1bf4d5d0c4f280303345970448feb411\",\"name\":\"Adam Roger\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.magetop.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2ea543086258299e700cc48d893c02653c4a87b5466f23de66240a677d192811?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2ea543086258299e700cc48d893c02653c4a87b5466f23de66240a677d192811?s=96&d=mm&r=g\",\"caption\":\"Adam Roger\"},\"description\":\"CEO and Founder of Magetop. A friend, a husband and a dad of two children. Adam loves to travel to experience new cultures and discover what is happening with ecommerce all around the world.\",\"sameAs\":[\"https:\/\/www.magetop.com\",\"https:\/\/www.facebook.com\/MagetopStore\",\"https:\/\/www.instagram.com\/magetopstore\",\"https:\/\/www.linkedin.com\/company\/magetop\",\"https:\/\/www.pinterest.com\/magetop\",\"https:\/\/x.com\/https:\/\/twitter.com\/MagetopStore\",\"https:\/\/www.youtube.com\/channel\/UCXoiJsz88OfPmwa8QpUkwOA\",\"https:\/\/magetop.tumblr.com\"],\"url\":\"https:\/\/www.magetop.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To Create New Theme In Magento 2 - Magetop Blog","description":"In this tutorial, we will learn about: How to create new theme in Magento 2. This is an important basic knowledge that you should not ignore.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.magetop.com\/blog\/how-to-create-new-theme-in-magento-2\/","og_locale":"en_US","og_type":"article","og_title":"How To Create New Theme In Magento 2 - Magetop Blog","og_description":"In this tutorial, we will learn about: How to create new theme in Magento 2. This is an important basic knowledge that you should not ignore.","og_url":"https:\/\/www.magetop.com\/blog\/how-to-create-new-theme-in-magento-2\/","og_site_name":"Magetop Blog","article_publisher":"https:\/\/www.facebook.com\/MagetopStore","article_author":"https:\/\/www.facebook.com\/MagetopStore","article_published_time":"2020-01-02T03:01:58+00:00","article_modified_time":"2021-07-22T03:00:30+00:00","og_image":[{"width":750,"height":450,"url":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Create-New-Theme-In-Magento-2.png?fit=750%2C450&ssl=1","type":"image\/png"}],"author":"Adam Roger","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/MagetopStore","twitter_site":"@MagetopStore","twitter_misc":{"Written by":"Adam Roger","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.magetop.com\/blog\/how-to-create-new-theme-in-magento-2\/#article","isPartOf":{"@id":"https:\/\/www.magetop.com\/blog\/how-to-create-new-theme-in-magento-2\/"},"author":{"name":"Adam Roger","@id":"https:\/\/www.magetop.com\/blog\/#\/schema\/person\/1bf4d5d0c4f280303345970448feb411"},"headline":"How To Create New Theme In Magento 2","datePublished":"2020-01-02T03:01:58+00:00","dateModified":"2021-07-22T03:00:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.magetop.com\/blog\/how-to-create-new-theme-in-magento-2\/"},"wordCount":394,"commentCount":0,"publisher":{"@id":"https:\/\/www.magetop.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.magetop.com\/blog\/how-to-create-new-theme-in-magento-2\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Create-New-Theme-In-Magento-2.png?fit=750%2C450&ssl=1","keywords":["Create New Theme In Magento","Create New Theme In Magento 2","How To Create New Theme In Magento","How To Create New Theme In Magento 2","magento 2 tutorials","Magento 2.3 create New Theme"],"articleSection":["Magento 2 Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.magetop.com\/blog\/how-to-create-new-theme-in-magento-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.magetop.com\/blog\/how-to-create-new-theme-in-magento-2\/","url":"https:\/\/www.magetop.com\/blog\/how-to-create-new-theme-in-magento-2\/","name":"How To Create New Theme In Magento 2 - Magetop Blog","isPartOf":{"@id":"https:\/\/www.magetop.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.magetop.com\/blog\/how-to-create-new-theme-in-magento-2\/#primaryimage"},"image":{"@id":"https:\/\/www.magetop.com\/blog\/how-to-create-new-theme-in-magento-2\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Create-New-Theme-In-Magento-2.png?fit=750%2C450&ssl=1","datePublished":"2020-01-02T03:01:58+00:00","dateModified":"2021-07-22T03:00:30+00:00","description":"In this tutorial, we will learn about: How to create new theme in Magento 2. This is an important basic knowledge that you should not ignore.","breadcrumb":{"@id":"https:\/\/www.magetop.com\/blog\/how-to-create-new-theme-in-magento-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.magetop.com\/blog\/how-to-create-new-theme-in-magento-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.magetop.com\/blog\/how-to-create-new-theme-in-magento-2\/#primaryimage","url":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Create-New-Theme-In-Magento-2.png?fit=750%2C450&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Create-New-Theme-In-Magento-2.png?fit=750%2C450&ssl=1","width":750,"height":450,"caption":"How To Create New Theme In Magento 2"},{"@type":"BreadcrumbList","@id":"https:\/\/www.magetop.com\/blog\/how-to-create-new-theme-in-magento-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.magetop.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How To Create New Theme In Magento 2"}]},{"@type":"WebSite","@id":"https:\/\/www.magetop.com\/blog\/#website","url":"https:\/\/www.magetop.com\/blog\/","name":"Magetop Blog","description":"Exploring Magento Tips, Tricks, and Trends","publisher":{"@id":"https:\/\/www.magetop.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.magetop.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.magetop.com\/blog\/#organization","name":"Magetop.com","url":"https:\/\/www.magetop.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.magetop.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/11\/logo.png?fit=475%2C475&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/11\/logo.png?fit=475%2C475&ssl=1","width":475,"height":475,"caption":"Magetop.com"},"image":{"@id":"https:\/\/www.magetop.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/MagetopStore","https:\/\/x.com\/MagetopStore","https:\/\/www.linkedin.com\/company\/magetop","https:\/\/www.pinterest.com\/magetop","https:\/\/www.youtube.com\/channel\/UCXoiJsz88OfPmwa8QpUkwOA"]},{"@type":"Person","@id":"https:\/\/www.magetop.com\/blog\/#\/schema\/person\/1bf4d5d0c4f280303345970448feb411","name":"Adam Roger","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.magetop.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2ea543086258299e700cc48d893c02653c4a87b5466f23de66240a677d192811?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2ea543086258299e700cc48d893c02653c4a87b5466f23de66240a677d192811?s=96&d=mm&r=g","caption":"Adam Roger"},"description":"CEO and Founder of Magetop. A friend, a husband and a dad of two children. Adam loves to travel to experience new cultures and discover what is happening with ecommerce all around the world.","sameAs":["https:\/\/www.magetop.com","https:\/\/www.facebook.com\/MagetopStore","https:\/\/www.instagram.com\/magetopstore","https:\/\/www.linkedin.com\/company\/magetop","https:\/\/www.pinterest.com\/magetop","https:\/\/x.com\/https:\/\/twitter.com\/MagetopStore","https:\/\/www.youtube.com\/channel\/UCXoiJsz88OfPmwa8QpUkwOA","https:\/\/magetop.tumblr.com"],"url":"https:\/\/www.magetop.com\/blog\/author\/admin\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Create-New-Theme-In-Magento-2.png?fit=750%2C450&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/paOdw5-gU","jetpack-related-posts":[{"id":1402,"url":"https:\/\/www.magetop.com\/blog\/magento-2-extension-tutorial\/","url_meta":{"origin":1048,"position":0},"title":"Magento 2 Extension Tutorial","author":"Aaron LX","date":"February 15, 2020","format":false,"excerpt":"Magento 2 is an open-source platform that allows you can create a module for yourself. And those modules can extend functions for the Magento store. And in this article, I will introduce to Magento 2 Extension Tutorial.","rel":"","context":"In "Magento 2 Tutorials"","block_context":{"text":"Magento 2 Tutorials","link":"https:\/\/www.magetop.com\/blog\/magento-2-tutorials\/"},"img":{"alt_text":"Magetop Extension Tutorial","src":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/02\/Extension-Tutorial.jpg?fit=750%2C455&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/02\/Extension-Tutorial.jpg?fit=750%2C455&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/02\/Extension-Tutorial.jpg?fit=750%2C455&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/02\/Extension-Tutorial.jpg?fit=750%2C455&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":1091,"url":"https:\/\/www.magetop.com\/blog\/how-to-create-simple-module-to-configure-options-for-theme-in-magento-2\/","url_meta":{"origin":1048,"position":1},"title":"How To Create Simple Module To Configure Options For Theme In Magento 2","author":"Adam Roger","date":"January 4, 2020","format":false,"excerpt":"In this article, we will introduce you to How to create simple module to configure options for theme in Magento 2.","rel":"","context":"In "Magento 2 Tutorials"","block_context":{"text":"Magento 2 Tutorials","link":"https:\/\/www.magetop.com\/blog\/magento-2-tutorials\/"},"img":{"alt_text":"How To Create Simple Module To Configure Options For Theme","src":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Create-Simple-Module-To-Configure-Options-For-Theme.png?fit=750%2C445&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Create-Simple-Module-To-Configure-Options-For-Theme.png?fit=750%2C445&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Create-Simple-Module-To-Configure-Options-For-Theme.png?fit=750%2C445&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Create-Simple-Module-To-Configure-Options-For-Theme.png?fit=750%2C445&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":1067,"url":"https:\/\/www.magetop.com\/blog\/customize-cover-illustration-layout-in-magento-2\/","url_meta":{"origin":1048,"position":2},"title":"Customize Cover, Illustration Layout In Magento 2","author":"Adam Roger","date":"January 2, 2020","format":false,"excerpt":"Our previous post is How to create new theme in Magento 2. I think you guys should read it. To continue the previous post, we will introduce you to Customize cover, illustration layout in Magento 2.","rel":"","context":"In "Magento 2 Tutorials"","block_context":{"text":"Magento 2 Tutorials","link":"https:\/\/www.magetop.com\/blog\/magento-2-tutorials\/"},"img":{"alt_text":"Customize Cover, Illustration Layout Magento 2","src":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/Customize-Cover-Illustration-Layout.png?fit=750%2C445&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/Customize-Cover-Illustration-Layout.png?fit=750%2C445&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/Customize-Cover-Illustration-Layout.png?fit=750%2C445&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/Customize-Cover-Illustration-Layout.png?fit=750%2C445&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":11622,"url":"https:\/\/www.magetop.com\/blog\/install-hyva-theme-magento-2\/","url_meta":{"origin":1048,"position":3},"title":"How to Install Hyv\u00e4 Theme in Magento 2","author":"Aaron LX","date":"March 30, 2026","format":false,"excerpt":"Performance and speed are the lifeblood of any modern eCommerce store. Over the past few years, the Hyv\u00e4 Theme has completely revolutionized the Magento 2 ecosystem by replacing the heavy, outdated Luma stack (RequireJS, Knockout, jQuery) with a lightweight, blazing-fast combination of Alpine.js and Tailwind CSS.If you are new to\u2026","rel":"","context":"In "Magento 2 Knowledge Base"","block_context":{"text":"Magento 2 Knowledge Base","link":"https:\/\/www.magetop.com\/blog\/magento-2-knowledge-base\/"},"img":{"alt_text":"How to Install Hyv\u00e4 Theme in Magento 2","src":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2026\/03\/How-to-Install-Hyva-Theme-in-Magento-2-scaled.png?fit=1200%2C662&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2026\/03\/How-to-Install-Hyva-Theme-in-Magento-2-scaled.png?fit=1200%2C662&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2026\/03\/How-to-Install-Hyva-Theme-in-Magento-2-scaled.png?fit=1200%2C662&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2026\/03\/How-to-Install-Hyva-Theme-in-Magento-2-scaled.png?fit=1200%2C662&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2026\/03\/How-to-Install-Hyva-Theme-in-Magento-2-scaled.png?fit=1200%2C662&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":1098,"url":"https:\/\/www.magetop.com\/blog\/how-to-get-store-config-value-in-magento-2\/","url_meta":{"origin":1048,"position":4},"title":"How To Get Store Config Value In Magento 2","author":"Adam Roger","date":"January 6, 2020","format":false,"excerpt":"In the previous article, we learned about How To Create Simple Module To Configure Options For Theme In Magento 2. Today, we will introduce you about How To Get Store Config Value In Magento 2.","rel":"","context":"In "Magento 2 Tutorials"","block_context":{"text":"Magento 2 Tutorials","link":"https:\/\/www.magetop.com\/blog\/magento-2-tutorials\/"},"img":{"alt_text":"How To Get Store Config Value M2","src":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Get-Store-Config-Value.png?fit=750%2C445&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Get-Store-Config-Value.png?fit=750%2C445&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Get-Store-Config-Value.png?fit=750%2C445&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/How-To-Get-Store-Config-Value.png?fit=750%2C445&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":1144,"url":"https:\/\/www.magetop.com\/blog\/make-default-system-config-value-in-magento-2\/","url_meta":{"origin":1048,"position":5},"title":"Make Default System Config Value In Magento 2","author":"Adam Roger","date":"January 12, 2020","format":false,"excerpt":"In the previous article, we learned about Add Custom Category Attributes In Magento 2. Today, we will introduce you about Make default system config value in Magento 2. I think you should read How To Create New Theme In Magento 2 first.","rel":"","context":"In "Magento 2 Tutorials"","block_context":{"text":"Magento 2 Tutorials","link":"https:\/\/www.magetop.com\/blog\/magento-2-tutorials\/"},"img":{"alt_text":"Make Default System Config Value In Magento 2","src":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/Make-Default-System-Config-Value.png?fit=750%2C445&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/Make-Default-System-Config-Value.png?fit=750%2C445&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/Make-Default-System-Config-Value.png?fit=750%2C445&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/01\/Make-Default-System-Config-Value.png?fit=750%2C445&ssl=1&resize=700%2C400 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/posts\/1048","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/comments?post=1048"}],"version-history":[{"count":8,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/posts\/1048\/revisions"}],"predecessor-version":[{"id":5909,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/posts\/1048\/revisions\/5909"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/media\/1060"}],"wp:attachment":[{"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/media?parent=1048"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/categories?post=1048"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/tags?post=1048"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}