Open external links in a new tab

Caution

Vintage themes aren't available in the Theme Store. Vintage themes don't have the features included in Shopify's Online Store 2.0 themes, and Shopify free vintage themes don't receive updates except security fixes.

Note

If you use a free theme from Shopify, then you can contact Shopify Support for help with this tutorial. It requires 15 minutes of design time. Learn more about the Shopify Design Policy.

Note

This customization is for vintage Shopify themes, and doesn't apply to Online Store 2.0 themes.

• Find out your theme's architecture version
• Explore Online Store 2.0 theme customizations

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.