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

Shopify Discussion

Topic summary

A Shopify user sought to make a single header navigation link open in a new tab, finding existing guides unhelpful or outdated. They were using the Refresh theme with minimal coding experience.

Initial Attempts:

  • Adding target="_blank" to <a> tags in header.liquid caused all navigation links to open in new tabs, not just the desired one.
  • The specific link code wasn’t easily identifiable in the theme files.

Working Solution:
The original poster resolved the issue by adding JavaScript code to global.js that automatically opens all external links in new tabs:

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';
  }
}

While not targeting a single specific link as originally intended, this approach achieves the functional goal by detecting external URLs. Multiple users confirmed this solution worked for them through early 2025. A WordPress alternative using PHP filters was also shared for reference.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
8

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'; 
  } 
}
8 Likes