Log in
Use cases
Log in

How to set footerlinks

Magento 2 is the new and upgraded version of Magento, a well-known e-commerce platform for managing online businesses. Among thousands of websites, Magento is undoubtedly the number one platform due to its scalability, extensive core functionality, and openness to integrations and extensions.

If you’re a business owner who has recently joined the platform, you want to optimize your store to make the most out of it. One of the many ways to do this is by adding custom footer links. They serve as key elements for any eCommerce store.

Many believe that only the Header is the most important section of your store, but the fact is that the Footer is just as important. Why? Well, simply because it gives you the last chance to grab potential customers’ attention and get them to continue browsing through products. This is why it is essential for you to learn how to utilize it to the fullest.

The footer contains links to the essential sections and pages of the website, and you may want to change default links or add new ones to make your store’s footer even more informative, enticing customers to continue their journey on the website and ultimately make a purchase.

This article aims to provide you with a step-to-step guide on how to add custom footer links in Magento 2 to ensure better navigation, improved user experience, improved conversion rate, and SEO-optimized store.

In this tutorial, we will walk you through the entire process of adding footer links in your Magento 2 store.

Add Custom Header Links in Magento 2 :

Step # – 1 :

To begin with creating custom header links in Magento 2, you would have to create a custom module based on Magento 2 structure in the folder app/code.

Ex: Magento 2 root directory/app/code/Dckap/Newlink/

Step # – 2 :

After that, to define your Magento 2 extension, create a module.xml file in the below path.

Magento 2 root directory/app/code/Dckap/Newlink/etc/module.xml

  1. <?xml version=“1.0”?>
  2. <config xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd”>
  3. <module name=”Dckap_Newlink” setup_version=”2.0.1″></module>
  4. </config>

Step # – 3 :

The next step is to create routes.xml in the below path for your custom link.

Magento 2 root directory/app/Dckap/Newlink/etc/frontend/routes.xml

  1. <?xml version=”1.0″?>
  2. <config xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”../../../../../../lib/internal/Magento/Framework/App/etc/routes.xsd”>
  3. <router id=”standard”>
  4. <route id=”newlink” frontName=”newlink”>
  5. <module name=”Dckap_Newlink” />
  6. </route>
  7. </router>
  8. </config>

Step # – 4 :

Then, create a layout file in the below path for a custom header.

Magento2 root directory/app/Dckap/Newlink/view/frontend/layout/header.xml

  1. <?xml version=”1.0″?>
  2. <page xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” layout=”1column” xsi:noNamespaceSchemaLocation=”../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd”>
  3. <body>
  4. <referenceBlock name=”header.links”>
  5. <move element=”test-last” destination=”header.links”/>
  6. <block class=”Dckap\Newlink\Block\Header” name=”test-link” after=”my-account-link”/>
  7. </referenceBlock>
  8. </body>
  9. </page>

Step # – 5 :

After that, create a block file that is referred to in the layout file in the below path.

Magento2 root directory/app/Dckap/Newlink/Block/Header.php

  1. <?php
  2. namespace Dckap\Newlink\Block;
  3. class Header extends \Magento\Framework\View\Element\Html\Link
  4. {
  5. protected $_template = ‘Dckap_Newlink::link.phtml’;
  6. public function getHref()
  7. {
  8. return__( ‘testuser’);
  9. }
  10. public function getLabel()
  11. {
  12. return __(‘Test Link’);
  13. }
  14. }
  15. ?>

Follow the code shared above for third party URLs.

Step # – 6 :

Create a template file that is referred to as the block file in the below path.

Magento2 root directory/app/Dckap/Newlink/frontend/templates/link.phtml

  1. <li>
  2. <a <?php echo $block->getLinkAttributes() ?>><?php echo $block->escapeHtml($block->getLabel())?>
  3. <?php echo($block->getCounter()) ? ‘<span>’ . $block->escapeHtml($block->getCounter()) . ‘</span>’ : ”; ?>
  4. </a>
  5. </li>

Step # – 7 :

Once you are done with all the steps shared above, run the below Magento 2 upgrade command in the command prompt:

  1. php bin/magento setup:upgrade

After running the above command, clear all the Magento cache and check whether the extension is installed successfully on the Magento 2 admin side.

Add Custom Footer Links in Magento 2:

Step # – 1 :

Now to add a custom footer link, follow the above first three steps and replace the layout file with the below code:

Magento2 root directory/app/Dckap/Newlink/view/frontend/layout/footer.xml

  1. <?xml version=”1.0″?>
  2. <page xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” layout=”1column” xsi:noNamespaceSchemaLocation=”../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd”>
  3. <page>
  4. <referenceBlock name=”footer_links”>
  5. <block class=”Magento\Framework\View\Element\Html\Link\Current” name=”2custom-link”>
  6. <arguments>
  7. <argument name=”label” xsi:type=”string”>Footer Link</argument>
  8. <argument name=”path” xsi:type=”string”>testuser</argument>
  9. </arguments>
  10. </block>
  11. </referenceBlock>
  12. </page>

There are two ways of getting the argument values:

1. By using a block file. (used for header link)

2. By specifying argument values in the layout file. (used for footer link)

Now follow the above step(step 7).

Check the browser to see your custom header and footer links.

We hope this blog helped you to add custom header and footer links in Magento2 and make the most out of your e-commerce store. If you’re interested to learn more about Magento 2, click <link>.

Get help from a human
Submit a request for help with your Braintree sandbox or production account.
Get Help
Select location and language

Contact Our Sales Team

Learn more about our products, features, and pricing options.
By submitting this form, you agree to receive promotional messages from Shopify about its products and services. You can unsubscribe at any time by clicking on the link at the bottom of our emails.
Use cases
Log in
Start a free trial