How to Add Top Links in Magento 2?
Magento 2 offers a header CMS block to display top links by default.
It can include customer information such as My Account, Wishlist, Currency options.
Creating top links encourages customers to buy more. It improves navigation and the user experience.
Get the steps on how to add the top links in Magento 2.
Add Custom Magento 2 Module
We firstly create a module.xml file at app/code/Demo/Toplink/etc. file path.
Add the code mentioned below in the file.
<?xml version="1.0"?>
<config xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Demo_Toplink" setup_version="1.0.1"></module>
</config>
Now create a registration.php in app/code/Demo/Toplink file path. Enter the following code to the file.
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Demo_Toplink',
__DIR__
);
Magento 2 Add Top Links (Header)
Now, create a default.xml file in app/code/Demo/Toplink/view/frontend/layout.
Enter the following code -
<?xml version="1.0"?>
<page xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="header.links">
<block class="Demo\Toplink\Block\Link" name="custom-header-link">
<arguments>
<argument name="label" xsi:type="string" translate="true">Advanced Search</argument>
<argument name="path" xsi:type="string" translate="true">catalogsearch/advanced</argument>
</arguments>
</block>
</referenceBlock>
</body>
</page>
Note: You can see the ‘Advanced Search Page Link’ in the code mentioned above. You can add more links in the top section of your Magento 2 store.
Create a Link.php -
Now we make a Link.php file at location app/code/Demo/Block and add the code mentioned below.
<?php
namespace Demo\Toplink\Block;
class Link extends \Magento\Framework\View\Element\Html\Link
{
/**
* Render block HTML.
*
* @return string
*/
protected function _toHtml()
{
if (false != $this->getTemplate()) {
return parent::_toHtml();
}
return '<li><a ' . $this->getLinkAttributes() . ' >' . $this->escapeHtml($this->getLabel()) . '</a></li>';
}
}
Launch the SSH terminal and connect your store.
Move to the root directory of your Magento 2 store to run the CLI commands below.
Upgrade the setup by running this CLI command:
php bin/magento setup:upgrade
Compile the set up with the CLI command:
php bin/magento setup:di:compile
Flush Cache and Test the Top link Result
You can now clean and flush the cache with the following commands:
php bin/magento cache:clean
php bin/magento cache:flush
Now the Magento 2 store custom top link has been updated. You can launch the store to see the output on the CMS page.
How to Remove a Top Link from Magento 2
You can remove a link such as My Wishlist using the store’s admin panel.
Go to Stores, and under the Settings tap on Configuration.
Expand the Customers tab and click on the Wish List button.
Expand the General Options section from the panel.
Disable the Use system value checkbox and set the Enabled option to No.
Click on the Save Config button.
Clear the Magento cache to see the required output.
You can use the same method to remove other links such as My Account, Contact Us, and Sign In options.
EndNote
Adding essential links at the top of the website lets customers know more about your store.
It lets you increase the engagement and conversion rates of the store.
The tutorial shows how to quickly add top links to the Magento 2 store.
Learn more about the Magento platform on the MGT-Commerce Tutorials.
