Get Free Audit

Magento 2.x. How to edit footer menu in Magento 2

Mar 29, 2019

32729 Andrey Litvin

Magento 2.x. How to edit footer menu in Magento 2

When designing an online store, most of the effort is dedicated to the homepage and product pages. And such a seemingly tiny and inconsiderable element as the footer is, in most cases, neglected and poorly, if not entirely overlooked.

In reality, the footer is a very important element, as it’s the final thing your customers see as they scroll down a page, and what comes last always leaves an impression. Therefore, the footer design must be approached with a proper amount of attention and reasoning.

Yet, if your Magento 2 webstore already has a footer and you are dissatisfied with its menu, we offer you three ways of editing the footer menu.

Table of contents:

Method #1: Add the menu to the cms block
Method #2: Edit a footer menu with layout
Method #3: Create a menu template from scratch

Method #1: Add the menu to the cms block

1. Log into the admin panel of Magento 2 and navigate to Content -> Blocks. Press the Add new block button.

add new block magento menu

The following menu will appear, where you need to fill in the block title and identifier you specified in the previous step (it is a footer-menu in my case).

enable block magento menu

To prevent any breakdowns, press the Show/Hide Editor and add the following code:


Save the block.

2. Next, go to Content -> Widgets to add a new widget. Press Add Widget, set the Type field at CMS Static Block and select your theme name in the Design Theme field. When finished, press Continue.widgets magento menu

The following fields will appear; fill them in the way it is in the screenshot below. You can learn more about widgets in Magento 2 here.

widgets edit magento menu

Go to the Widget Options tab and select the CMS block we have created.

widget options

Press the Save button in the upper right corner. If the following menu appears, it means you have done everything correctly.

edit magento menu

3. Elaborate your menu by creating:

– folders and files for the styles:


– basic style for our menu:


You will get the following style:

final style of the menu

Method #2: Edit footer menu with layout

I would advise relying on this method in case you do not need to change the whole menu structure  but simply add or delete a block.

To edit the footer menu with layout, you need to know whether the theme is installed in the app/design directory or vendor. Go to FTP, proceed to the Magento folder, and then to the app/design folder. If the latter is empty, you have a standard or a third-party theme installed in the vendor folder.

In my case, I use the Luma theme as an example (vendor/magento/theme-frontend-luma). Before you edit, create a custom theme and perform theme inheriting.

1. Create the folders and files you will need


This is how you create folders for our layout and templates.


This is how to create a layout file to add and delete menu sections.

Andrey_Dubina

Partner With Us

Let's discuss how to grow your business. Get a Free Quote.
Talk to Andrey

2. Add the initial layout for default.xml


3.  Delete all the unnecessary links from the footer (I will delete Advanced Search as an example). Add the following line into the footer_links block:


where name is the name of the block we delete.

Clear the cache memory and see the menu block was deleted:

menu block deleted

This is the list of the standard menu block names:

  • Search Terms — search-term-popular-link,
  • Privacy and Cookie Policy — privacy-policy-link,
  • Advanced Search — catalog-search-advanced-link,
  • Orders and Returns — sales-guest-form-link,
  • Contact Us — contact-us-link.

4. Add a custom link to the About us page. Add the following code to the footer_links block:


where:

  • label — the name of the link,
  • path — path to our page (either absolute or relative),
  • attributes — block responsible for tag attributes.

This is the list of the most common tag attributes:

  • name — sets up the anchor name in the document;
  • rel — the relationship between the current documents and the one we link to;
  • target —by default, when you click a link, the document opens in the current window or frame. If necessary, this condition can be changed by this attribute;
  • title — adds a tooltip to the link text.

To establish the order, we use the block attributes after and before.

Clear the cache and see the changes:edit magento menu

Method #3: Create a menu template from scratch

If you want to alter the footer menu structure completely, creating a separate menu template is the best way.

Before we proceed, create the theme as described in method #1 and complete steps 1 and 2.

1. Navigate to app/design/frontend/BelVG/Name of the theme you created/Magento_Theme/layout/default.xml and add the following layout:


where


deletes the previous menu.


adds our custom block with Magento_Theme::footer_menu.phtml template.

Create the template:


Add to footer_menu.phtml the following code:


Add to the Contact Us link a map:


where:

options — configuration of our popup for the map,
modalToggle(options, ‘#open-map’) — calls our popup,
<iframe> — tag to embed the map.

2.  Elaborate your menu by creating:

– folders and files for the styles


– basic style for our menu


Clear the cache and deploy the static. You will get the following:


Clear the cache and deploy the static

Wrapping it up

This is how you edit a footer menu in Magento 2 in three ways. I believe that every store admin will be able to find the most suitable method for them. If you have any questions or comments, please leave them below.

Andrey Dubina
Partner With Us Looking for a partner to grow your business? We are the right company to bring your webstore to success. Talk to Andrey

3 Comments

  1. Thanks so much!
    I slowly start getting my head around all the possibilities of Magento, but I wish documentation was always written the way you do, showing the different ways of editing / adding elements to the page.

  2. Hi,

    I am a beginner in Magento. In my application admin needs the possibility to add or remove footer links. So which method is more suitable ?

    Thank you.

Post a new comment

BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *