How to edit custom theme header in shopware 5?

Edit Custom Theme Header

Please go through the below link for creating the theme.

Now, we are going to edit the custom theme header in shopware 5. To edit the custom theme header follow the below steps:

A custom theme is a theme name that I created already.

This image has an empty alt attribute; its file name is Screenshot_6-980x449.png

Step 1: Go to the shopware theme directory of your website.

Step 2: Create a new file in the theme directory called “index. tpl

File Structure:

themes/Frontend/Custom/frontend/index/index.tpl

Step 3: In the index.tpl file writes this code.

{extends file='parent:frontend/index/index.tpl'}

{* Shop header *}
{block name='frontend_index_navigation'}
    {* Maincategories navigation top *}
    {block name='frontend_index_navigation_categories_top'}
        <nav class="navigation-main">
            <div class='emz-header-logo'>
                {* Logo container *}
                {block name='frontend_index_logo_container'}
                  {include file="frontend/index/logocontainer.tpl"}
                {/block}
            </div>
            <div class='emz-header-categories'>
                <div class="container" data-menu-scroller="true" data-listSelector=".navigation--list.container" data-viewPortSelector=".navigation--list-wrapper">
                    {block name="frontend_index_navigation_categories_top_include"}
                        {include file='frontend/index/main-navigation.tpl'}

                    {/block}
                </div>
            </div>
            <div class='emz-header-icons'>
                <ul>
                    {* Search form *}
                    {block name='frontend_index_search'}
                        <li class="navigation--entry entry--search" role="menuitem" data-search="true" aria-haspopup="true" {if $theme.focusSearch && {controllerName|lower}=='index' } data-activeOnStart="true" {/if}>
                          <a class="btn entry--link entry--trigger" href="#show-hide--search" title="{" {s namespace='frontend/index/search' name="IndexTitleSearchToggle" }{/s}"|escape}">
                              <i class="icon--search"></i>
                          </a>
                        </li>
                    {/block}
                    {* Cart entry *}
                    {block name='frontend_index_checkout_actions'}
                        {* Include of the cart *}
                        {block name='frontend_index_checkout_actions_include'}
                            {action module=widgets controller=checkout action=info}
                        {/block}
                    {/block}
                </ul>
            </div>
        </nav>
    {/block}
    {block name='frontend_index_container_ajax_cart'}
        <div class="container--ajax-cart" data-collapse-cart="true"{if $theme.offcanvasCart} data-displayMode="offcanvas"{/if}></div>
    {/block}
{/block}

Step 4: Save the code and go to the front-end, your header looks like this.

Step 5: Create a new file in the theme directory called “main-navigation.less” in the _modules directory.

File Structure:

themes/Frontend/Custom/frontend/_public/src/less/_modules/main-navigation.less

Step 6: In “main-navigation.less” write this code.

.navigation-main{
  background: #111;
  border-bottom: 0;
  line-height: 56px;
  display: flex;
  width: 100%;
  z-index: 1010;
  top: 0;

  .emz-header-logo{
    padding-left: 35px;
    padding-top: 11px;


      .logo--shop{
        height: 60px;
        margin-top: 9px;
      }
  }


  .emz-header-categories{
    margin: 0 auto;
    padding-top: 10px;
    padding-right: 220px;


    .navigation--list{
      background: #111;

      .navigation--entry.is--active{
        .navigation--link{
          background-color: transparent;
          background-image: none;
        }
      }

      .navigation--link{
        color: #fff;
        font-size: 14px;
        text-transform: uppercase;
        font-weight: bold;
        letter-spacing: 1px;
        text-decoration: none;

        span:after{
          content: '';
          display: block;
          .unitize(height, 2);
          width: 0;
          .unitize(top, -15);
          position: relative;
          background: #fff;
          margin: auto;
          transition: width .5s ease, background-color .5s ease;
        }

        &:hover{
          span:after{
            width: 100%;
            background-color: #fff;
          }
        }
      }
    }
  }

  .emz-header-icons{
    padding-right: 35px;
    padding-top: 10px;


    .icon--basket:before{
      position: absolute;
      top: -24px;
    }

    .navigation--entry{
      .btn{
        background-color: #111;
        background-image: none;
        color: white;
        border: 0;

        [class^="icon--"]{
          .unitize(font-size, 15);
          .unitize(line-height, 72);
        }
      }

      .badge{
        background-color: #111;
        color: white;
        background-image: none;
        border: 1px white solid;
        position: absolute;
        top: 15px;
        right: -10px;
      }
    }

    .entry--search{
      position: static;
      width: auto;

      .entry--trigger{
        display: inline-block;
      }
    }
  }
}

Step 8: Create an “all.less” file in less directory.

File Structure:

themes/Frontend/Custom/frontend/_public/src/less/all.less

Step 9: We need to import this new file into our all.less. We write the code in our all.less file:

@import "_modules/main-navigation";

Step 10: Clear the cache and your front-end looks like this.

Step 11: Create info.tpl in the checkout directory. To have only the icons without text.

File Structure:

themes/Frontend/Custom/widgets/checkout/info.tpl

Step 12: Write this code in info.tpl file.

{extends file='parent:widgets/checkout/info.tpl'}

{* My account entry *}
{block name="frontend_index_checkout_actions_my_options"}
    <li class="navigation--entry entry--account" role="menuitem">
        {block name="frontend_index_checkout_actions_account"}
            <a href="{url controller='account'}" title="{"{s namespace='frontend/index/checkout_actions' name='IndexLinkAccount'}{/s}"|escape}" class="btn entry--link">
                <i class="icon--account"></i>
            </a>
        {/block}
    </li>
{/block}

{* Cart entry *}
{block name="frontend_index_checkout_actions_cart"}
    <li class="navigation--entry entry--cart" role="menuitem">
        <a class="btn is--icon-left cart--link" href="{url controller='checkout' action='cart'}" title="{$snippetIndexLinkCart|escape}">
          <span class="badge is--primary is--minimal cart--quantity{if $sBasketQuantity < 1} is--hidden{/if}">{$sBasketQuantity}</span>
            <i class="icon--basket"></i>
        </a>
        <div class="ajax-loader">&nbsp;</div>
    </li>
{/block}

Save the files and clear the cache.

Results:

Please contact us at manish@bay20.com or call us at +91-8800519180 for any support related to shopware 5. You can also visit the Shopware 5 development page to check the services we offer.