How To Open External Links In A New Tab - Easy Shopify Tutorial

How To Open External Links In A New Tab - Easy Shopify Tutorial

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.

  1. In the Assets directory, click one of the following:

    • theme.js
    • theme.js.liquid
    • custom.js
  2. 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';
      }
    }
  3. Click Save.

Back to blog