Open external links in a new tab

You can add some code to your theme that causes external links on your online store to open in a new browser tab. This can be beneficial because it helps to prevent customers from navigating away from your online store. External links are URLs that direct customers to different websites, such as the links included in social media icons.

Add some code to your theme's JavaScript file

To have external links open in a new browser tab, you need to edit your theme's JavaScript file.

Steps:

Desktop
  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, click the button to open the actions menu, and then click Edit code.
  3. In the Assets directory, click one of the following:
    • theme.js
    • theme.js.liquid
    • custom.js
  4. Paste the following code at the bottom of the 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';
  }
}
  1. Click Save.
iPhone
  1. From the Shopify app, tap the button.
  2. In the Sales channels section, tap Online Store.
  3. Tap Manage themes.
  4. Find the theme you want to edit, click the button to open the actions menu, and then click Edit code.
  5. In the Assets directory, click one of the following:
    • theme.js
    • theme.js.liquid
    • custom.js
  6. Paste the following code at the bottom of the 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';
  }
}
  1. Click Save.
Android
  1. From the Shopify app, tap the button.
  2. In the Sales channels section, tap Online Store.
  3. Tap Manage themes.
  4. Find the theme you want to edit, click the button to open the actions menu, and then click Edit code.
  5. In the Assets directory, click one of the following:
    • theme.js
    • theme.js.liquid
    • custom.js
  6. Paste the following code at the bottom of the 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';
  }
}
  1. Click Save.
Can’t find the answers you’re looking for? We’re here to help.