Manage Magento 2 header and footer links to improve your store’s UX
The header and footer are the most important website elements, and ecommerce stores are no exception. The header is the very first thing that site visitors see when they access the website and it plays a big role in making a favorable first impression. Footer is vital too, since it’s the last website’s chance to grab customers attention and encourage them to complete the necessary action (e.g. send a request) when they are about to leave.
The header and footer contain links to the essential sections and pages of the website. Magento sites have such links too. You may want to change default links or to add new ones to make your store’s footer and header even more informative, enticing customers to continue their journey on the website and ultimately make a purchase.
In this article, we’ll show you how to edit Magento 2 header and footer links.
Managing Header Links
To remove header links, you need to edit an xml file of your Magento installation. This file is stored in the folder of the currently used theme.
To avoid unwanted changes, we recommend getting the assistance of Magento developers. Otherwise, open the file and use this code to remove links:
<referenceBlock name="[link name]" remove="true" />, where [link name] is the name of the link you wish to delete.
Here is how you remove the My Account link:
<referenceBlock name="my-account-link" remove="true" />
New links are added in several steps:
- Open an .xml file.
- Go to Default Layout section.
- Find a <reference name=”top.links”> text in it.
- Add a code:
<action method="addLink" translate="label title"><label>[link name]</label><url>new<br>
</url><title>[link name]</title><prepare/><urlParams/><position>70</position></action>
Make sure to add label, title and url values.
- Save the file and go to the store’s Homepage to see the result
Removing and Adding Footer Links
To remove the Contact Us link in the footer, go to Stores - Configuration - General - General - Contact. In the 'Contact Us' section, set the 'Enable Contact Us' field to 'No' and hit the 'Save Config' button.
To remove Privacy and Cookie Policy, Search Terms, Orders and Returns, and Advanced Search links, you need to introduce changes to an xml file of the current theme.
Open the file and add the following code in the body tag:
<referenceBlock name="[link name]" remove="true"/>
Here is how you remove the Privacy and Cookie Policy link:
<referenceBlock name="privacy-policy-link" remove="true"/>
Other footer links may differ from template to template. You can find them in the Magento admin panel at Content - Elements - Blocks. All the Magento stores include static blocks that are called Footer Links. Find the block and open it in the edit mode.
The code of such a static block may look as follows:
<ul class="footer links">
<li class="nav item"><a href="https://www.aitoc.com/about-us/">About us</a></li>
<li class="nav item"><a href="https://www.aitoc.com/customer-service/">Customer Service</a></li>
</ul>
You may modify these links (e.g., assign a new title), remove them, or add new ones using the Editor. Make sure to create pages where these links will lead.
When you have finished, tap the 'Save Block' button and then refresh the cache to activate the changes.
Summing Up
Header and footer are essential elements of any website. Their customization may help you make your site more user-friendly and win new customers. Changing default Magento 2 links in footer and header, you improve website navigation and help your store stand out in the crowd, making it irresistible to customers.
