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

When an online store is designed, naturally most of the effort is dedicated to homepage and product pages, while such seemingly tiny and inconsiderable element as footer is in most cases neglected and rather poorly, if not entirely overlooked. In reality, footer is a very important element, for it is 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 the menu it has, 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 in to the admin panel of Magento 2 and navigate to Content -> Blocks. Press the Add new block button.

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

 

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 at Design Theme field. When finished, press Continue.

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

 

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

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

3. Elaborate your menu by creating:

– folders and files for the styles:

– basic style for our menu:

You will get the following style:

Method #2: Edit footer menu with layout

I would advise relying on this method in case you do not need to change the whole structure of the menu, but simply add or delete a block.
To edit the footer menu with layout, you need to know whether the theme is installed in app/design directory or in vendor. Go to FTP, proceed to magento folder and then to app/design folder. If the latter is empty, then you have a standard or a third-party theme installed in the vendor folder.

In my case, I use Luma theme as an example (vendor/magento/theme-frontend-luma). Before you proceed to editing, 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 through which we will add and delete menu sections.

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:

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:

Method #3: Create a menu template from scratch

If you want to completely alter the footer menu structure, the best way would be to create a separate menu template.

Before we proceed, create the theme as described in method #1 and complete the 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:

 

Wrapping it up

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