How to add custom top link magento 2 năm 2024

Question

In this post, I will guide you on How To Add Top Link In Magento 2. Use the header of the website to deploy advertising campaigns, gratitude for the store’s customers.

Nội dung chính Show

How to add a custom header link in Magento 2?
How do I add a top link in Magento 2?
How to create custom top menu in Magento 2?
How to create custom URL in Magento 2?

The header of the website is the location that attracts a lot of attention, this is an ideal place to place important events, promotional campaigns, shopping, gratitude for your customers. Adding a link at the top of the page will make it easier for customers to reach it.

The difference between header and top link is:

The header is visible to both guests and logged in.
The top link is only visible to logged in customers.

1. Create default.xml file in the following path:

app\code{your-Vendor}{your-Extension}\view\frontend\layout\default.xml

2. And add the following code:

<?xml version="1.0"?> <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="Magento\Framework\View\Element\Html\Link" name="top-link">
      <arguments>
          <argument name="label" xsi:type="string" translate="true">Top Link Label </argument>
          <argument name="path" xsi:type="string" translate="true">url_path</argument>
      </arguments>
    </block>
  </referenceBlock>

</body> </page>

You substitute the values below according to your need:

Top Link Label: The label of the top link you want to add to your store.
url_path: The URL path for the top link.

3. Then, run deploy static content, flush cache command and see the result:

php bin/magento setup:static-content:deploy -f

php bin/magento cache:flush

Follow us for the more helpful posts!

We hope this is a useful post for you.

You can read more useful posts like How To Change Order Increment ID Length In Magento 2.

Thank you for reading!

4.8 4 votes

Article Rating

Aaron LX

Aaron is a passionate writer, crazy about shopping, eCommerce and trends. Besides his outstanding research skills and a positive mind, Aaron eagerly shares his experience with the readers.

In this blog I will explain how to add header and top link with default.xml file. Header link is displayed for both guest and logged in customers. Top link is displayed only for logged in users.

To show the links create default.xml under Webkul/Menu/view/frontend/layout folder

<?xml version="1.0"?> <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="Magento\Framework\View\Element\Html\Link" name="header-menu">
            <arguments>
                <argument name="label" xsi:type="string" translate="true">Header Menu</argument>
                <argument name="path" xsi:type="string">*/*/*</argument>
            </arguments>
        </block>
    </referenceBlock>
    <referenceBlock name="top.links">
        <block class="Magento\Framework\View\Element\Html\Link" name="top-link">
            <arguments>
                <argument name="label" xsi:type="string" translate="true">Top Link</argument>
                <argument name="path" xsi:type="string">*/*/*</argument>
            </arguments>
        </block>
    </referenceBlock>
</body>

</page>

For guest customer,

For Logged in customer,

Check out the following blogs regarding links,

Searching for an experienced Magento 2 Company ? Find out More

Add Custom Block and Link Header in Magento 2

How to add custom link in navigation menu in Magento2

Magento2 – Add New Link in My Account Navigation Panel

call custom block and links in footer in magento 2

Feel free to comment if any issue occurs.

Sanjay Chouhan

28 Feb, 2024
16 Jul, 2021

How to add a custom header link in Magento 2?

How to Add Custom Header Links in Magento 2?.

Create a custom module based on Magento 2 structure in the folder app/code. ... .

Create module. ... .

Create routes. ... .

Create layout file in the below path for a custom header. ... .

Create block file that is referred to in the layout file in the below path..

How do I add a top link in Magento 2?

Create Custom Magento 2 Module xml file at app/code/Demo/Toplink/etc. file path and add the below code in the file. Then, create registration. php in app/code/Demo/Toplink file path and add the following code to it.

How to Add Custom Admin Menu In Magento 2.

Step 1: Create the file registration.php..

Step 2: Create file module.xml..

Step 3: Create file menu.xml..

Step 4: Create file routes.xml..

Step 5: Create a New Menu Item..

Step 6: Clear Magento Cache..

Final Words!.