
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:
1 2 3 4 5 6 7 8 9 10 |
<div class="menu"> <h4>Menu</h4> <ul> <li><a href="#">link #1</a></li> <li><a href="#">link #2</a></li> <li><a href="#">link #3</a></li> <li><a href="#">link #4</a></li> <li><a href="#">link #5</a></li> </ul> </div> |
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:
1 2 |
mkdir -p app/design/frontend/BelVG/Name of the theme you created/Magento_Theme/web/css/source/ touch app/design/frontend/BelVG/Name of the theme you created/Magento_Theme/web/css/source/_extend.less |
– basic style for our menu:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
@menu__font-color: #666; @menu__transition: all 0.1s ease-out; & when (@media-common = true) { .footer { &.content { .menu { float: left; width: 100%; color: @menu__font-color; padding: 30px; h4 { margin: 0; padding-bottom: 5px; font-size: 22px; font-weight: 300; line-height: 1.2; } ul { margin: 0; padding: 20px 0; } li { font-size: 14px; line-height: 1.5; } a { padding: 3px 0 3px 10px; color: @menu__font-color; .lib-css(transition, @menu__transition); &:hover { padding-left: 20px; color: @color-blue1; text-decoration: none; } } } } } } |
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
1 |
mkdir app/design/frontend/BelVG/Name of the theme you created/Magento_Theme/{layout,templates} |
this is how you create folders for our layout and templates.
1 |
touch app/design/frontend/BelVG/Name of the theme you createdMagento_Theme/layout/default.xml |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?xml version="1.0"?> <!-- /** * Copyright © Magento, Inc. All rights reserved. * See COPYING.txt for license details. */ --> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceBlock name="footer_links"> </referenceBlock> </body> </page> |
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:
1 |
<referenceBlock name="catalog-search-advanced-link" remove="true"/> |
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:
1 2 3 4 5 6 7 8 9 |
<block class="Magento\Framework\View\Element\Html\Link\Current" name="about-us" before="search-term-popular-link"> <arguments> <argument name="label" xsi:type="string" translate="true">About Us</argument> <argument name="path" xsi:type="string">about-us</argument> <argument name="attributes" xsi:type="array"> <item name="target" xsi:type="string">_blank</item> </argument> </arguments> </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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?xml version="1.0"?> <!-- /** * Copyright © Magento, Inc. All rights reserved. * See COPYING.txt for license details. */ --> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceContainer name="footer"> <referenceBlock name="footer_links" remove="true" /> <block class="Magento\Framework\View\Element\Template" name="footer.navigation.menu" before="-" template="Magento_Theme::footer_menu.phtml"/> </referenceContainer> </body> </page> |
where
1 |
<referenceBlock name="footer_links" remove="true" /> |
deletes the previous menu.
1 |
<block class="Magento\Framework\View\Element\Template" name="navigation.sections" before="-" template="Magento_Theme::footer_menu.phtml"/> |
adds our custom block with Magento_Theme::footer_menu.phtml template.
Create the template:
1 |
touch app/design/frontend/BelVG/Name of the theme you created/Magento_Theme/templates/footer_menu.phtml |
Add to footer_menu.phtml the following code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div class="menu"> <div class="menu__column"> <h4><?php echo __('First Tilte')?></h4> <ul> <li><a href="#"><?php echo __('Customer Sevice')?></a></li> <li><a href="#"><?php echo __('Faq')?></a></li> <li><a href="#"><?php echo __('Shipping Information')?></a></li> <li><a href="#"><?php echo __('Site terms & Conditions')?></a></li> </ul> </div> <div class="menu__column"> <h4><?php echo __('Second Tilte')?></h4> <ul> <li><a href="#" title="<?php echo __('About Us')?>"><?php echo __('About Us')?></a></li> <li><a href="#" title="<?php echo __('Privacy Policy')?>"><?php echo __('Privacy Policy')?></a></li> <li><a href="#" id="open-map" title="<?php echo __('Contact Us')?>"><?php echo __('Contact Us')?></a></li> </ul> </div> </div> |
Add to the Contact Us link a map:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<script> require( [ 'jquery', 'Magento_Ui/js/modal/modalToggle' ], function( $, modalToggle ) { var options = { title: 'Contact Us', type: 'popup', responsive: true, contentSelector: '#popup-map', toggleEvent: 'click', innerScroll: true, }; return modalToggle(options, '#open-map'); } ); </script> <div id="popup-map"> <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d1992.5997417996828!2d27.51397443607992!3d53.90672151661629!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sru!2sby!4v1553770504758" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> </div> |
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
1 2 |
mkdir -p app/design/frontend/BelVG/Name of the theme you created/Magento_Theme/web/css/source/ touch app/design/frontend/BelVG/Name of the theme you created/Magento_Theme/web/css/source/_extend.less |
– basic style for our menu
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
@menu__font-color: #666; @menu__transition: all 0.1s ease-out; & when (@media-common = true) { .footer { &.content { .menu { .lib-vendor-prefix-display(flex); .lib-vendor-prefix-flex-wrap(wrap); box-sizing: border-box; float: left; width: 100%; color: @menu__font-color; padding: 30px; &__column { display: block; width: 100%; } h4 { margin: 0; padding-bottom: 5px; font-size: 22px; font-weight: 300; line-height: 1.2; } ul { margin: 0; padding: 20px 0; } li { font-size: 14px; line-height: 1.5; } a { padding: 3px 0 3px 10px; color: @menu__font-color; .lib-css(transition, @menu__transition); &:hover { padding-left: 20px; color: @color-blue1; text-decoration: none; } } } } } } .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { .footer { &.content { .menu { width: 50%; padding: 0; &__column { display: block; width: 50%; } } } } } .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) { .footer { &.content { .menu { ul { &:not(:last-child) { padding-bottom: 30px; } } } } } } |
Clear the cache and deploy the static. You will get the following:
1 2 |
rm -rf pub/static/* ./var/view_preprocessed/* ./var/page_cache/* ./var/cache/* ./var/generation/* bin/magento setup:static-content:deploy |
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.

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.
Hi Say,
you can do it via cms block.
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.