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

Overwrite and Adapt the Advanced Menu Plugin

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.