How to Add Top Link in Magento 2
Vinh Jacker | 12-18-2024
Adding top link in Magento 2 means showing some helpful links on the top of your pages. We will discover how to do through in this tutorial. Here is the CMS block, including some personal information of the customers as My Account, My Wishlist, Login or anything you need. Click on the top link and redirect the users to a CMS page where contains more particular information. Creating the top link may also push their wishes to encourage the clients to buy more and more.
For example, on the top menu, “My Wishlist” link will save and lead them directly to the list of the product they are interested in before without checkout.
If you are searching how to add the top link on your Magento 2 store, this topic will help you complete all with many top links depending on your demands.
Overview of adding top link in Magento 2
- Step 1: Add/ modify
default.xmlfile - Step 2: Add
Link.phpfile - Step 3: Flush cache and test your Top link result
Step 1: Add/ modify default.xml file
Find the path app/code/Mageplaza/HelloWorld/view/frontend/layout, then add/ modify default.xml file by:
<?xml version="1.0"?>
<!--
/**
* Copyright © 2015 Magento. 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="header.links">
<block class="Mageplaza\HelloWorld\Block\Link" name="add-new-header-link">
<arguments>
<argument name="label" xsi:type="string" translate="true">New Link</argument>
<argument name="path" xsi:type="string" translate="true">new-link</argument>
</arguments>
</block>
</referenceBlock>
</body>
Step 2: Add Link.php file
Continue with the path app/code/Mageplaza/HelloWorld/Block and you will add the link.php file:
<?php
namespace Mageplaza\HelloWorld\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>';
}
}
Step 3: Flush cache and test your Top link result
Clear cache as the above and feel comfortable when you need to add the top link as the top menu for the customer’s experience on your Magento 2 store. Follow and enjoy it!
Related Post
- Magento 2 Add a custom checkout step
- Customize a checkout step in Magento 2
- Add a new input form checkout page
- How to get store information in Magento 2
Conclusion
You can put important links at the top of the website to make customers stay longer and learn more about your website. It is a great way to increase engagement and conversion for your store. I hope that this tutorial successfully tell you how to add top links in a Magento 2 store. If you have any questions, please comment below. I will get back to you as soon as possible.
With over a decade of experience crafting innovative tech solutions for ecommerce businesses built on Magento, Jacker is the mastermind behind our secure and well-functioned extensions. With his expertise in building user-friendly interfaces and robust back-end systems, Mageplaza was able to deliver exceptional Magento solutions and services for over 122K+ customers around the world.
Related Post
Import and Export Orders in Magento 2
Simplify data handling for your Magento 2 online store! Learn how to import and export orders in Magento 2 quickly and efficiently with this comprehensive guide.
What are Webhooks in Magento 2
Discover webhooks in Magento 2: a powerful tool to reduce manual workload for business owners. Learn how they work, their key features, and easy configuration tips.
Top 10+ Shopify Store Name Generators: Ultimate Review Guide
By exploring the top 10+ Shopify store name generators, we aim to help you create unique and meaningful store names.
Should I Hire A Shopify Expert? Reasons, How-tos
This article will focus on the question “Should I hire a Shopify expert?”, unlock major reasons & practical tips to find the perfect fit for your business.
How to Make FAQ Page Shopify For SEO: A Comprehensive Guide
Confused by customer questions? This article aims to guide you how to make faq page Shopify that saves your time and boosts sales.
Import and Export Orders in Magento 2
Simplify data handling for your Magento 2 online store! Learn how to import and export orders in Magento 2 quickly and efficiently with this comprehensive guide.
What are Webhooks in Magento 2
Discover webhooks in Magento 2: a powerful tool to reduce manual workload for business owners. Learn how they work, their key features, and easy configuration tips.
Top 10+ Shopify Store Name Generators: Ultimate Review Guide
By exploring the top 10+ Shopify store name generators, we aim to help you create unique and meaningful store names.
Should I Hire A Shopify Expert? Reasons, How-tos
This article will focus on the question “Should I hire a Shopify expert?”, unlock major reasons & practical tips to find the perfect fit for your business.
How to Make FAQ Page Shopify For SEO: A Comprehensive Guide
Confused by customer questions? This article aims to guide you how to make faq page Shopify that saves your time and boosts sales.
& Maintenance Services
Make sure your store is not only in good shape but also thriving with a professional team yet at an affordable price.
Get Started