How to Add Header Link to Shopify Code?

How to Add Header Link to Shopify Code?

Shopify Header Link

A header link on a Shopify website is a clickable text or image typically located at the top of the website's homepage or other pages. It is often used to navigate different sections or pages of the website, such as the home page, product page, or contact page. Header links can be customized in the theme settings of a Shopify store.

It's used to create navigation links for your visitors and customers, so they can easily navigate through your website.

How to Add Header Link to Shopify Code? - A Quick Guide

To add a header link to your Shopify website, you can use the Liquid template language to edit the code of your theme. Here are the steps you can follow:

1. Log in to your Shopify admin panel and go to the "Themes" section. For reference see below image.

How to Add Header Link to Shopify Code Step -1

2. Locate the theme you want to edit and click on the "Actions" button, then select "Edit code" as shown on image below.

How to Add Header Link to Shopify Code Step -2

3. In the file explorer, navigate to the "layout" folder and open the "header.liquid" file. or you can directly search in search bar as show in the image below.

How to Add Header Link to Shopify Code Step -2

4. Look for the section of the file where the header menu is defined, it should look something like this:

<nav class="header-nav">

  <ul class="header-nav__list">

    {% for link in linklists.main-menu.links %}

      <li class="header-nav__item">

        <a href="{{ link.url }}" class="header-nav__link">{{ link.title }}</a>

      </li>

    {% endfor %}

  </ul>

</nav>

5. Add the following code to add a new link to the header menu:

<li class="header-nav__item">

    <a href="YOUR-LINK-HERE" class="header-nav__link">YOUR-LINK-TITLE</a>

</li>

6. Replace YOUR-LINK-HERE with the URL you want the link to point to, and YOUR-LINK-TITLE with the text you want to display for the link in the header menu.

7. Save the changes and you should now see the new link in the header menu on your website.

Please note that depending on the theme you're using, the code and the location of the links in the header might vary. You can always reach out to the theme developer for more detailed instructions or for support.

Wrapping up:

After reading the complete guide, you can add a header link to your Shopify store. But if you still have problems adding a header link to your store, then you can contact us for Shopify developer help and support.