How to make a single link in header open in new tab?

[MasterShake1441]

This doesn't seem like it should be a difficult task, but I can find zero helpful information on how to do this. All the guides I have found don't give relevant information or are no longer correct. I don't need to make all links open externally, I would just like one. I have very little coding background, so please give a detailed explanation on how to accomplish this. 

[PageFly-Oliver]

Hi @MasterShake1441

I apologize for any confusion. If you want to make a specific link open in a new tab or window, you can achieve this by adding the target="_blank" attribute to that particular link in your HTML code. Here's an example:

<a href="https://example.com" target="_blank">Open in new tab</a>

Hope my solution works perfectly for you.

Cheers!

Oliver | PageFly

[Zqdo]

Hey @MasterShake1441 , were you able to solve the problem yet?

[Zqdo]

@MasterShake1441 ,I saw your below comment, did you still need help?

[MasterShake1441]

Yes, I still need help. All I need is for one single link on my navigation bar to open in a new window. Any help would be greatly appreciated. 

[ryan_me]

To make a single link in the header open in a new tab in a Shopify theme, you'll need to modify the theme's code. Here's a step-by-step guide on how to achieve this:

1. From your Shopify admin dashboard, go to "Online Store" and click on "Themes."

2. In the "Themes" section, locate the theme you're using and click on the "Actions" button. From the drop-down menu, select "Edit code." This will take you to the theme editor.

3. In the theme editor, locate the file that controls your header. Typically, it's called header.liquid or header.liquid.html. Click on it to open the file.

4. Look for the code that generates the link you want to open in a new tab. It might look something like this:

5.  

<a href="{{ link.url }}">{{ link.title }}</a>

Modify the code by adding the target="_blank" attribute to the <a> tag. This attribute instructs the browser to open the link in a new tab. Here's how the modified code should look:

<a href="{{ link.url }}" target="_blank">{{ link.title }}</a>

1. Save the changes you made to the header.liquid file.

2. Preview your changes by navigating to your website and testing the link in the header. It should now open in a new tab.

3. If everything looks good, click on the "Publish" button in the top-right corner of the theme editor to make your changes live on your website.

[MasterShake1441]

Thank you for your response. I tried what you said, but in "header.liquid," there are no references to the link I'm wanting to change. I only found 3 instances of "<a href="{{ link.url}}...." and tried adding target="_blank" to each of these individually. Only one of them did anything, and it made it so every link in my navigation bar opens in a new tab, not just the one that leads to an external site. 

This is what I added it to:

<a href="{{ link.url }}" class="header__menu-item list-menu__item link link--text focus-inset"{% if link.current %} aria-current="page"{% endif %} target="_blank" >

I'm using the Refresh theme if that is important. 

I'm used to using Wix, which I feel let's you make these sorts of changes in an intuitive way, so I'm struggling to adapt to Shopify's way of doing things.

[ryan_me]

I have implemented this functionality on my WordPress website, which focuses on the tattoo niche, using the following code. If you have a website on a similar platform, you can give it a try.

add_filter('the_content', 'make_specific_link_external');
function make_specific_link_external($content) {
$target_link = 'http://example.com'; // Replace with the URL of the specific link you want to open externally

// Modify the HTML of the link to add 'target="_blank"' attribute
$content = str_replace('<a href="' . $target_link . '"', '<a href="' . $target_link . '" target="_blank"', $content);

return $content;
}

[MasterShake1441 · Accepted solution]

Found a solution.  I pasted this bit of code at the end of "global.js" to allow external links to open in a new tab. It's not quite what I wanted (to have set a single link to open in a new tab) but it should perform the same functionality. Here is the code:

const links = document.links; 
  for (let i = 0, linksLength = links.length ; i < linksLength ; i++) { 
    if (links[i].hostname !== window.location.hostname) { 
      links[i].target = '_blank'; 
      links[i].rel = 'noreferrer noopener'; 
  } 
}

[Zqdo]

Glad you were able to get it to work! Feel free to reach out if you ever have any more questions.

[Joyal]

I've created a dropdown menu called SHOP OUR BRANDS.

it has 5 submenus, and all those 5 submenus are linked to external websites. Those websites are part of our company.

What I need help with is, when I try to open any of the submenus, they open in the same window/ tab.

I want it to open in a new tab/ new window.

How to implement that.

Please do help.

Thank you in advance.

[JoshuaChadd]

Thanks so much, this was exactly what I was looking for!