How to remove the header topbar in Shopware 5?

We are going to remove the texts such as “My Account“ and the price in the shopping cart. To remove the Shopware 5 Topbar in the header follow the below steps:

Our topbar looks like this.

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

Step 2: Create the new sub-directory called footer.less

File Structure:–

themes/Frontend/Custom/frontend/_public/src/less/_modules/

Note: Custom directory is a theme that I created already.

Step 3: Write this code in the topbar-navigation.tpl file.

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

{block name="frontend_index_top_bar_main"}
    <div class="top-bar"></div>
{/block}

Step 4: Create a new file in the same index directory called shop-navigation.tpl

themes/Frontend/Custom/frontend/index/shop-navigation.tpl

And write this code in these files.

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

{block name='frontend_index_checkout_actions'}
{$smarty.block.parent}
    {* Top bar navigation *}
    {block name="frontend_index_shop_navigation_nav"}
        <nav class="top-bar--navigation block" role="menubar">

        {action module=widgets controller=index action=shopMenu}
        {* Article Compare *}
        {block name='frontend_index_shop_navigation_inline'}
            {if {config name="compareShow"}}
                <div class="navigation--entry entry--compare is--hidden" role="menuitem" aria-haspopup="true" data-drop-down-menu="true">
                    {block name='frontend_index_shop_navigation_compare'}
                        {action module=widgets controller=compare}
                    {/block}
                </div>
            {/if}
        {/block}

        {* Service / Support drop down *}
        {block name="frontend_index_shop_navigation_checkout_actions_service_menu"}
            <div class="navigation--entry entry--help has--drop-down" role="menuitem" aria-haspopup="true" data-drop-down-menu="true">
                <i class="icon--service"></i>

                {* Include of the widget *}
                {block name="frontend_index_shop_navigation_checkout_actions_service_menu_include"}
                    {action module=widgets controller=index action=menu group=gLeft}
                {/block}
            </div>
        {/block}
    {/block}
{/block}

Step 5: Create a new file called index.tpl in compare directory.

Step 6: Write this code in this file.

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

{block name='frontend_top_navigation_menu_entry'}
    <i class="icon--compare"></i> <span class="compare--quantity">({$sComparisons|@count})</span>
{/block}

Step 7: Create a header.less file in _modules directory.

Step 8: Write this code in this file.

.top-bar--navigation{
    display: none;
  }
  
  @media screen and (min-width: @tabletViewportWidth) {
    .container.header--navigation .shop--navigation.block-group .navigation--list.block-group{
      .entry--search{
        left:1%;
      }
      .entry--account .account--link {
        padding: 2px 8px 2px 8px;
        .icon--account {
          font-size: 21px;
          display: inline;
          position: relative;
          vertical-align: middle;
          top: 0;
          left: 0;
        }
        .account--display {
          display: none !important;
        }
      }
      .entry--cart{
        margin-right:5px;
        .cart--link {
          padding: 2px 10px 2px 6px;
          width: 42px;
          .cart--amount {
            display: none;
          }
        }
      }
      .top-bar--navigation{
        display: block;
        margin-left:5px;
        .entry--compare {
          display: block;
          padding:0px;
          margin-right: 5px;
          .icon--compare {
            top: 8px;
            position: relative;
            font-size: 25px;
          }
          .compare--quantity {
            font-size: 15px;
            vertical-align: middle;
            margin-left:0px;
          }
          .compare--list {
            top:45px;
            &:after{
              left: 85%;
            }
            .btn--compare.btn--compare-start {
              width: 100%;
            }
          }
        }
        .entry--help{
          padding:0px;
          .icon--service{
            font-size:30px;
            position: relative;
            top:5px;
          }
          .service--list::after{
            right:1%;
          }
          .service--list{
            top:45px;
          }
        }
      }
    }
  }

  @media screen and (min-width: @desktopViewportWidth) {
    .container.header--navigation .shop--navigation.block-group .navigation--list.block-group{
      .entry--search{
        left:3%;
      }
      .top-bar--navigation{
        .entry--compare {
          margin-right:10px;
          .compare--list {
            &:after {
              left: 80%;
            }
          }
        }
        .entry--help {
          .service--list::after {
            right: 8%;
          }
        }
      }
    }
  }

Step 9: Import the less file in all.less file.

Step 10: Write this code in all.less file.

@import "_modules/header";

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.