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.

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).

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.

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.

Go to the 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 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.

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:

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 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:

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.