{"id":13027,"date":"2021-09-21T02:57:06","date_gmt":"2021-09-21T08:27:06","guid":{"rendered":"https:\/\/emizentech.com\/blog\/?p=13027"},"modified":"2024-12-31T11:33:27","modified_gmt":"2024-12-31T11:33:27","slug":"create-a-custom-theme-in-shopware-6","status":"publish","type":"post","link":"https:\/\/emizentech.com\/blog\/create-a-custom-theme-in-shopware-6.html","title":{"rendered":"How To Create A Custom Theme In Shopware 6"},"content":{"rendered":"<p>Shopware 6 themes are essential for maintaining a consistent aesthetic and mood for an online store. By combining custom designs, templates, images, and style development. You can improve your storefront&#8217;s visual appeal.<\/p>\r\n<p>Most artistic Shopware theme designers, on the other hand, find it simple to create a custom Shopware 6 theme. To that end, you&#8217;ll need ssh access and to ensure that file and folder permissions, as well as ownership, are properly set up. After that, you&#8217;re all set.<\/p>\r\n<p>Today, we&#8217;ll show you how to make a custom theme in Shopware 6. <img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter size-full wp-image-12369\" src=\"\/blog\/wp-content\/uploads\/sites\/2\/2021\/09\/Create-A-Custom-Theme-In-Shopware-6.jpg\" alt=\"Create A Custom Theme In Shopware 6\" width=\"1200\" height=\"650\" \/><\/p>\r\n<p>Plugins and themes in Shopware 6 are both displayed in the backend under the plugin section. To inspect all plugins or themes, go to \u2018settings,&#8217; then \u2018system,&#8217; and finally \u2018Plugins.&#8217;<\/p>\r\n<h3>Step 1: Firstly Run \u2018Php Bin\/console Theme:create Emizentechtheme\u2019 In Your Project Root Terminal.<\/h3>\r\n<h3>Step 2: Now check \u2018composer.json\u2019 under \u2018custom\/plugins\/Emizentechtheme\u2019 folder and update name description and label for different language value.<\/h3>\r\n<p><code>\t{<br \/>\r\n\"name\": \"emizentechtheme\/theme\",  \/\/ this name will show as name label when you install\/activate your plugin.<br \/>\r\n\"description\": \"Emizentech Theme development\",  \/\/ this name will show as description when you install\/activate your plugin.<br \/>\r\n\"type\": \"shopware-platform-plugin\",<br \/>\r\n\"license\": \"MIT\",<br \/>\r\n\"autoload\": {<br \/>\r\n\"psr-4\": {<br \/>\r\n\"Emizentechtheme\\\\\": \"src\/\"<br \/>\r\n}<br \/>\r\n},<br \/>\r\n\"extra\": {<br \/>\r\n\"shopware-plugin-class\": \"Emizentechtheme\\\\Emizentechtheme\",<br \/>\r\n\"label\": { \/\/ snippets for your theme<br \/>\r\n\"de-DE\": \"Theme Emizentechtheme plugin\",<br \/>\r\n\"en-GB\": \"Theme Emizentechtheme plugin\"<br \/>\r\n}<br \/>\r\n}<br \/>\r\n}<\/code><\/p>\r\n<p>&nbsp;<\/p>\r\n<h3>Step 3: Update name and author in \u2018theme.json\u2019<\/h3>\r\n<p><code>{<br \/>\r\n\"name\": \"Emizentechtheme\",<br \/>\r\n\"author\": \"Emizentech\",<br \/>\r\n\"views\": [<br \/>\r\n\"@Storefront\", \/\/ these are the settings for template from where your theme will override and use templates.<br \/>\r\n\"@Plugins\",<br \/>\r\n\"@Emizentechtheme\"<br \/>\r\n],<br \/>\r\n\"style\": [<br \/>\r\n\"@Storefront\",<br \/>\r\n\"app\/storefront\/src\/scss\/base.scss\" \/\/ From here it will use the styling<br \/>\r\n],<br \/>\r\n\"script\": [<br \/>\r\n\"@Storefront\",<br \/>\r\n\"app\/storefront\/dist\/storefront\/js\/emizentechtheme .js\" \/\/From here it will generate the js<br \/>\r\n],<br \/>\r\n\"asset\": [<br \/>\r\n\"app\/storefront\/src\/assets\" \/\/If you want add any type of assets you can put it in here and use it<br \/>\r\n]<br \/>\r\n}<\/code><\/p>\r\n<p>&nbsp;<\/p>\r\n<h3>Step 4: Once everything is updated you can check your theme under the \u2018settings\u2019 and plugins section.<\/h3>\r\n<h3>Step 5: Now you can install and activate the theme from the backend. You can not activate a theme without installing it.<\/h3>\r\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-12373\" src=\"\/blog\/wp-content\/uploads\/sites\/2\/2021\/09\/shopware-theme-install.jpg\" alt=\"shopware theme install\" width=\"1479\" height=\"589\" \/><\/p>\r\n<h3>Step 6: Go to the shop section and click on the \u2018change theme&#8217; button to assign the theme to the website.<\/h3>\r\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-12372\" src=\"\/blog\/wp-content\/uploads\/sites\/2\/2021\/09\/change-Shopware-theme.png\" alt=\"change Shopware theme\" width=\"1795\" height=\"641\" \/><br \/>If you are struggling with designing a custom theme on Shopware 6 then hiring a professional <a href=\"https:\/\/emizentech.com\/shopware-development.html\" target=\"_blank\" rel=\"noopener\">Shopware development company<\/a> is a good idea. We at Emizentech have professional Shopware developers who are good at developing feature-rich e-commerce stores for various niches.<\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>Shopware 6 themes are essential for maintaining a consistent aesthetic and mood for an online store. By combining custom designs, templates, images, and style development. You can improve your storefront&#8217;s visual appeal. Most artistic Shopware theme designers, on the other hand, find it simple to create a custom Shopware 6 theme. To that end, you&#8217;ll<\/p>\n","protected":false},"author":36,"featured_media":13029,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_wpcom_ai_launchpad_first_post":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[85],"tags":[84],"class_list":["post-13027","post","type-post","status-publish","format-standard","has-post-thumbnail","category-shopware","tag-shopware"],"featured_image_src":"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2021\/09\/Create-A-Custom-Theme-In-Shopware-6-1.jpg","featured_image_src_square":"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2021\/09\/Create-A-Custom-Theme-In-Shopware-6-1.jpg","author_info":{"display_name":"Vivek Khatri","author_link":"https:\/\/emizentech.com\/blog\/author\/vivek"},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/emizentech.com\/blog\/wp-content\/uploads\/sites\/2\/2021\/09\/Create-A-Custom-Theme-In-Shopware-6-1.jpg","_links":{"self":[{"href":"https:\/\/emizentech.com\/blog\/wp-json\/wp\/v2\/posts\/13027","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/emizentech.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/emizentech.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/emizentech.com\/blog\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/emizentech.com\/blog\/wp-json\/wp\/v2\/comments?post=13027"}],"version-history":[{"count":1,"href":"https:\/\/emizentech.com\/blog\/wp-json\/wp\/v2\/posts\/13027\/revisions"}],"predecessor-version":[{"id":44533,"href":"https:\/\/emizentech.com\/blog\/wp-json\/wp\/v2\/posts\/13027\/revisions\/44533"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/emizentech.com\/blog\/wp-json\/wp\/v2\/media\/13029"}],"wp:attachment":[{"href":"https:\/\/emizentech.com\/blog\/wp-json\/wp\/v2\/media?parent=13027"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/emizentech.com\/blog\/wp-json\/wp\/v2\/categories?post=13027"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/emizentech.com\/blog\/wp-json\/wp\/v2\/tags?post=13027"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}