{"id":9011,"date":"2021-10-22T07:22:05","date_gmt":"2021-10-22T07:22:05","guid":{"rendered":"https:\/\/www.bay20.com\/?p=9011"},"modified":"2025-05-21T16:00:29","modified_gmt":"2025-05-21T10:15:29","slug":"anleitung-zur-bearbeitung-der-benutzerdefinierten-themenuberschrift-in-shopware-5","status":"publish","type":"post","link":"https:\/\/www.bay20.com\/de\/anleitung-zur-bearbeitung-der-benutzerdefinierten-themenuberschrift-in-shopware-5\/","title":{"rendered":"Wie bearbeite ich die benutzerdefinierte Themen\u00fcberschrift in Shopware 5?"},"content":{"rendered":"\n

Bitte klicken Sie auf den unten stehenden Link, um das Thema zu erstellen.<\/p>\n\n\n\n

\nhttps:\/\/www.bay20.com\/different-ways-of-creating-shopware-5-theme\/\n<\/div><\/figure>\n\n\n\n

Jetzt werden wir die benutzerdefinierte Themenkopfzeile in Shopware 5 bearbeiten. Um die benutzerdefinierte Themenkopfzeile zu bearbeiten, f\u00fchren Sie die folgenden Schritte aus:<\/p>\n\n\n\n

Ein benutzerdefiniertes<\/strong> Thema ist ein Themenname, den ich bereits erstellt habe.<\/p>\n\n\n\n

\"This<\/figure>\n\n\n\n

Schritt 1: <\/strong>Gehen Sie in das Shopware-Themenverzeichnis Ihrer Website.<\/p>\n\n\n\n

Schritt 2:<\/strong> Erstellen Sie eine neue Datei im Themenverzeichnis mit dem Namen „index. tpl“<\/strong>.<\/p>\n\n\n\n

Dateistruktur:-<\/strong><\/p>\n\n\n\n

themes\/Frontend\/Custom\/frontend\/index\/index.tpl<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Schritt 3: <\/strong>In der Datei index.tpl <\/strong>wird dieser Code geschrieben.<\/p>\n\n\n\n

{extends file='parent:frontend\/index\/index.tpl'}\n\n{* Shop header *}\n{block name='frontend_index_navigation'}\n    {* Maincategories navigation top *}\n    {block name='frontend_index_navigation_categories_top'}\n        <nav class=\"navigation-main\">\n            <div class='emz-header-logo'>\n                {* Logo container *}\n                {block name='frontend_index_logo_container'}\n                  {include file=\"frontend\/index\/logocontainer.tpl\"}\n                {\/block}\n            <\/div>\n            <div class='emz-header-categories'>\n                <div class=\"container\" data-menu-scroller=\"true\" data-listSelector=\".navigation--list.container\" data-viewPortSelector=\".navigation--list-wrapper\">\n                    {block name=\"frontend_index_navigation_categories_top_include\"}\n                        {include file='frontend\/index\/main-navigation.tpl'}\n\n                    {\/block}\n                <\/div>\n            <\/div>\n            <div class='emz-header-icons'>\n                <ul>\n                    {* Search form *}\n                    {block name='frontend_index_search'}\n                        <li class=\"navigation--entry entry--search\" role=\"menuitem\" data-search=\"true\" aria-haspopup=\"true\" {if $theme.focusSearch && {controllerName|lower}=='index' } data-activeOnStart=\"true\" {\/if}>\n                          <a class=\"btn entry--link entry--trigger\" href=\"#show-hide--search\" title=\"{\" {s namespace='frontend\/index\/search' name=\"IndexTitleSearchToggle\" }{\/s}\"|escape}\">\n                              <i class=\"icon--search\"><\/i>\n                          <\/a>\n                        <\/li>\n                    {\/block}\n                    {* Cart entry *}\n                    {block name='frontend_index_checkout_actions'}\n                        {* Include of the cart *}\n                        {block name='frontend_index_checkout_actions_include'}\n                            {action module=widgets controller=checkout action=info}\n                        {\/block}\n                    {\/block}\n                <\/ul>\n            <\/div>\n        <\/nav>\n    {\/block}\n    {block name='frontend_index_container_ajax_cart'}\n        <div class=\"container--ajax-cart\" data-collapse-cart=\"true\"{if $theme.offcanvasCart} data-displayMode=\"offcanvas\"{\/if}><\/div>\n    {\/block}\n{\/block}<\/code><\/pre>\n\n\n\n
Schritt 4: <\/strong>Speichern Sie den Code und gehen Sie zum Frontend, Ihre Kopfzeile sieht so aus.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Schritt 5: <\/strong>Erstellen Sie im Theme-Verzeichnis eine neue Datei namens „main-navigation.less“ im Verzeichnis _modules.<\/strong><\/p>\n\n\n\n
Dateistruktur:-<\/strong><\/p>\n\n\n\n
themes\/Frontend\/Custom\/frontend\/_public\/src\/less\/_modules<\/strong>\/main-navigation.less<\/strong><\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Schritt 6: <\/strong>In „main-navigation.less“ <\/strong>schreiben Sie diesen Code.<\/p>\n\n\n\n
.navigation-main{\n  background: #111;\n  border-bottom: 0;\n  line-height: 56px;\n  display: flex;\n  width: 100%;\n  z-index: 1010;\n  top: 0;\n\n  .emz-header-logo{\n    padding-left: 35px;\n    padding-top: 11px;\n\n\n      .logo--shop{\n        height: 60px;\n        margin-top: 9px;\n      }\n  }\n\n\n  .emz-header-categories{\n    margin: 0 auto;\n    padding-top: 10px;\n    padding-right: 220px;\n\n\n    .navigation--list{\n      background: #111;\n\n      .navigation--entry.is--active{\n        .navigation--link{\n          background-color: transparent;\n          background-image: none;\n        }\n      }\n\n      .navigation--link{\n        color: #fff;\n        font-size: 14px;\n        text-transform: uppercase;\n        font-weight: bold;\n        letter-spacing: 1px;\n        text-decoration: none;\n\n        span:after{\n          content: '';\n          display: block;\n          .unitize(height, 2);\n          width: 0;\n          .unitize(top, -15);\n          position: relative;\n          background: #fff;\n          margin: auto;\n          transition: width .5s ease, background-color .5s ease;\n        }\n\n        &:hover{\n          span:after{\n            width: 100%;\n            background-color: #fff;\n          }\n        }\n      }\n    }\n  }\n\n  .emz-header-icons{\n    padding-right: 35px;\n    padding-top: 10px;\n\n\n    .icon--basket:before{\n      position: absolute;\n      top: -24px;\n    }\n\n    .navigation--entry{\n      .btn{\n        background-color: #111;\n        background-image: none;\n        color: white;\n        border: 0;\n\n        [class^=\"icon--\"]{\n          .unitize(font-size, 15);\n          .unitize(line-height, 72);\n        }\n      }\n\n      .badge{\n        background-color: #111;\n        color: white;\n        background-image: none;\n        border: 1px white solid;\n        position: absolute;\n        top: 15px;\n        right: -10px;\n      }\n    }\n\n    .entry--search{\n      position: static;\n      width: auto;\n\n      .entry--trigger{\n        display: inline-block;\n      }\n    }\n  }\n}<\/code><\/pre>\n\n\n\n
Schritt 8: <\/strong>Erstellen Sie eine Datei „all.less“<\/strong> im Verzeichnis less.<\/strong><\/p>\n\n\n\n
Dateistruktur:-<\/strong><\/p>\n\n\n\n
themes\/Frontend\/Custom\/frontend\/_public\/src\/less\/all.less<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Schritt 9: <\/strong>Wir m\u00fcssen diese neue Datei in unsere all.less <\/strong>importieren. Wir schreiben den Code in unsere all.less<\/strong>-Datei:<\/p>\n\n\n\n
@import \"_modules\/main-navigation\";<\/code><\/pre>\n\n\n\n
Schritt 10: <\/strong>L\u00f6schen Sie den Cache und Ihr Frontend sieht wie folgt aus.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Schritt 11: <\/strong>Erstellen Sie info.tpl<\/strong> im Verzeichnis checkout<\/strong>. Um nur die Icons ohne Text zu haben.<\/p>\n\n\n\n
Dateistruktur:-<\/strong><\/p>\n\n\n\n
themes\/Frontend\/Custom\/widgets\/checkout<\/strong>\/info.tpl<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Schritt 12: <\/strong>Schreiben Sie diesen Code in die Datei info.tpl.<\/strong><\/p>\n\n\n\n
{extends file='parent:widgets\/checkout\/info.tpl'}\n\n{* My account entry *}\n{block name=\"frontend_index_checkout_actions_my_options\"}\n    <li class=\"navigation--entry entry--account\" role=\"menuitem\">\n        {block name=\"frontend_index_checkout_actions_account\"}\n            <a href=\"{url controller='account'}\" title=\"{\"{s namespace='frontend\/index\/checkout_actions' name='IndexLinkAccount'}{\/s}\"|escape}\" class=\"btn entry--link\">\n                <i class=\"icon--account\"><\/i>\n            <\/a>\n        {\/block}\n    <\/li>\n{\/block}\n\n{* Cart entry *}\n{block name=\"frontend_index_checkout_actions_cart\"}\n    <li class=\"navigation--entry entry--cart\" role=\"menuitem\">\n        <a class=\"btn is--icon-left cart--link\" href=\"{url controller='checkout' action='cart'}\" title=\"{$snippetIndexLinkCart|escape}\">\n          <span class=\"badge is--primary is--minimal cart--quantity{if $sBasketQuantity < 1} is--hidden{\/if}\">{$sBasketQuantity}<\/span>\n            <i class=\"icon--basket\"><\/i>\n        <\/a>\n        <div class=\"ajax-loader\">&nbsp;<\/div>\n    <\/li>\n{\/block}\n\n<\/code><\/pre>\n\n\n\n
Speichern Sie die Dateien und l\u00f6schen Sie den Cache.<\/strong><\/p>\n\n\n\n
Ergebnisse:<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Bitte kontaktieren Sie uns unter manish@bay20.com<\/a><\/strong> oder rufen Sie uns unter +91-8800519180<\/a><\/strong> an, wenn Sie Unterst\u00fctzung f\u00fcr Shopware 5 ben\u00f6tigen. Sie k\u00f6nnen auch die Shopware 5 Entwicklungsseit<\/strong><\/a>t<\/a><\/strong> besuchen, um die von uns angebotenen Dienstleistungen zu \u00fcberpr\u00fcfen.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
Bitte klicken Sie auf den unten stehenden Link, um das Thema zu erstellen. Jetzt werden wir die benutzerdefinierte Themenkopfzeile in Shopware 5 bearbeiten. Um die benutzerdefinierte Themenkopfzeile zu bearbeiten, f\u00fchren Sie die folgenden Schritte aus: Ein benutzerdefiniertes Thema ist ein Themenname, den ich bereits erstellt habe. Schritt 1: Gehen Sie in das Shopware-Themenverzeichnis Ihrer Website. […]<\/p>\n","protected":false},"author":74,"featured_media":9036,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[78,116],"tags":[],"class_list":["post-9011","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-shopware","category-shopware-5"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/9011","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/users\/74"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/comments?post=9011"}],"version-history":[{"count":12,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/9011\/revisions"}],"predecessor-version":[{"id":17264,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/9011\/revisions\/17264"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media\/9036"}],"wp:attachment":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media?parent=9011"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/categories?post=9011"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/tags?post=9011"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}