Recommended code did not work - trying to open external links in new window

Technical Q&A
1

I want all external links on my Shopify site to open in a new window. Should be simple. I see recommendations to input this code at the end of Theme.js (I’m using Flow theme, version 39.1.0):

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

I did that. It didn’t work. I opened the website in an Incognito browser; none of the links open in a new window. I had someone else try, who actually knows what they’re doing with coding. It didn’t work for him either. Please be kind, I know nothing about coding and this is my first post in the community. :slightly_smiling_face:

2

Hi @CCKris :waving_hand: Always remember other people we cannot see what you see or just know what you know.

You must communicate your specific context.

Provide inspectable urls of your work so far, and reproduction steps.

https://community.shopify.com/c/blog/how-to-get-support-from-the-community/ba-p/1399408

That code works if ran in the devtools console(F12 key) on the dawn demo site and checking the external social media links in the footer.

https://theme-dawn-demo.myshopify.com/

So it may be your specific attempt or issues with the theme, etc etc.

Contact me if you need this customization or theme repair services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

3

Hey @CCKris

Try replacing your code with this code and also make sure you’re placing the code at the right position in your theme files

document.addEventListener('DOMContentLoaded', function() {
  var 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';
    }
  }
});

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

4

Thank you, I tried that and still nothing happened. I put the code at the bottom of the Theme.js, as that’s where the Shopify Help Bot told me to put it. If there is somewhere else I should put it, how would I know? To be clear, my IN-TEXT links open in a new window as they should. It’s the BUTTONs that are not opening in new windows. For example, if you go to the page https://coldcurrentkelp.com/pages/press, and click “Watch Here” it won’t open in a new window - because that “Watch Here” link is in a BUTTON. (But, for example, the in-text links under the Azure Rd. graphic open correctly in new windows because they are IN-TEXT hyperlinks.) Not sure what I’m doing wrong!

5

Hey @CCKris

Thank you for clarifying! Since the issue is specific to links within buttons and not regular text links, the JavaScript code needs to target button elements that contain external links as well. We need to target buttons that contain anchor () tags and apply the same logic to open them in a new window.

document.addEventListener('DOMContentLoaded', function() {
  var 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';
    }
  }

  var buttons = document.querySelectorAll('a.button, .btn a');
  buttons.forEach(function(button) {
    if (button.hostname !== window.location.hostname) {
      button.target = '_blank';
      button.rel = 'noreferrer noopener';
    }
  });
});

If this code, doesn’t works then share your collaborator request code in private messages and I can have a detailed look in it.

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed
6

This did not work, sadly. How do I send a private message? I Have my collaborator request code. Thanks!

7

@Moeed ,This did not work, sadly. How do I send a private message? I Have my collaborator request code. Thanks!

8

Hey @CCKris

You can private message me by clicking on my profile.

Best Regards,

Moeed

9

Solutions !

Works great, code added at the end of the global.js (listener not added in the Shopify code answer )

Doesn’t see how to mark it as Solution… but it’s the one.