How to overwrite and adapt the advanced menu plugin in shopware 5?

To overwrite and adapt the advanced menu plugin in shopware 5. Please follow below steps:

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

Step 2: Create the new sub-directory called index.tpl

File Structure:–

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

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

Step 3: Write this code in the index.tpl file.

{extends file="parent:frontend/plugins/advanced_menu/index.tpl"}

{block name="frontend_plugins_advanced_menu_button_category"}{/block}

{block name="frontend_plugins_advanced_menu_button_close"}{/block}

Step 4: Create a new file called advanced-menu.less.

File Structure:–

/themes/Frontend/Custom/frontend/_public/src/less/_plugins/advanced-menu.less

And write this code into it.

.advanced-menu{
    border-top: 1px solid @brand-primary;
    background-color: black;
    color: white;

    .button-container{
      display: none;
    }

    .menu--list-item-link {
      color: white;
    }

    .item--level-1{
      .menu--list-item-link{
        color: white;
      }
    }
}

Step 5: Create all.less file in less directory.

File Structure:–

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

And write this into it.

@import "_plugins/advanced-menu";

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.