Force All External Links On Shopify To Open A New Tab

The Problem With External Links On Shopify

I manage and build a fair number of Shopify sites, and recently I was stumped by a client request which seemed so simple.

They wanted all external URL links on their Shopify site to open up a new tab/window so the session remained open on the user’s device. Fair point. This is quite a standard practice and in the likes of WordPress you can just specify it in the link builder by ticking “Open link in a new tab”. However, on Shopify, it’s not that easy.

Shopify’s official help guide states to paste the following code at the bottom of your theme.js, theme.js.liquid or custom.js file by going to Online Store > Themes > Actions > Edit code > Find the correct file > Paste the below code at the bottom of that file.

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

However, that didn’t work for me!

I was using the Turbo theme by Out Of The Sandbox which does not have a theme.js, theme.js.liquid or custom.js file.

Instead, to get all external links on Shopify to open a new tab I had to follow these steps:

1. Open the Shopify admin panel click Online Store > Themes > Actions > Edit Code
2. Find the app.js.liquid file
3. Use CTRL + F (on Windows) or COMMAND + F (on Mac) to search and find the $(function() { statement in the file
4. Directly after the statement make some space by entering a few returns, then paste the code below:

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

Save the file and that should do the trick! All external URL links on Shopify should now open up a new tab or window when clicked, keeping the users session open.