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.
10

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