Shopify - Open External Links in New Tab

If you have a Shopify store with some links going to other websites, you may want them to open up in a new tab.

I have this problem on my own site, where I want people to visit my Youtube channel but I don't want them to leave my site either.

It would be nice if the Shopify navigation page had a checkbox saying open in new tab, but there isn’t anything like that.

The simplest solution is actually just a few lines of javascript, that will automatically open ANY external link on your entire website, in a new tab.

To do this, first copy the code:

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

Next go to your themes page, click Actions > edit code. You want to find your themes main javascript file which will have a .js in the name. Use search to find it quickly.

- If you’re using Dawn or any of the free Shopify 2.0 themes, it’s called global.js.

- If you’re using Debut it’s called theme.js

- On other themes it could also be called theme.js.liquid or custom.js.

Scroll to the bottom of the file, paste in the code. And you’re done!

Leave a comment if you have any questions and subscribe for more Shopify tips and tutorials like this one.

‍