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

Keeping customers on your store is crucial, especially when they click external links, such as social media profiles or partner sites. Opening these links in a new tab ensures they remain on your store.

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.

Here’s how to set it up:

Step 1: Access Your Theme's JavaScript

• In Shopify Admin, go to Online Store > Themes.
• Choose the theme you want to edit, then select Actions > Edit code.
• In the Assets folder, open your JavaScript file (theme.js, theme.js.liquid, or custom.js).

Step 2: Add the Code

Add the following code at the bottom of the file to ensure external links open in a new tab:

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

This script finds external links and adds the _blank attribute, making them open in a new tab. The rel="noreferrer noopener" also adds security.

Step 3: Save and Verify

Click Save, then test your store to confirm external links open as intended.

Now your customers can explore external resources without leaving your store behind. This simple tweak keeps them engaged, enhancing their shopping experience and helping you retain valuable traffic.

If you have other customization needs, consider exploring our Shopify Tutorials for further optimization tips!