Open External Links in New Tabs in Shopify

Shopify is a popular e-commerce platform that allows businesses to create and manage their online stores with ease.

However, one common issue that store owners face is that when they include external links on their websites, these links often open in the same browser tab, potentially diverting visitors away from their online store.

To address this concern, you can implement a simple JavaScript code snippet to open external links in new tabs. In this article, we will guide you through the process of adding this code to your Shopify store.

Why Open External Links in New Tabs?

Opening external links in new tabs has several benefits for your Shopify store:

1. Improved User Experience: When visitors click on external links, their main browsing session remains intact, ensuring a seamless user experience on your site.
2. Retain Visitors: By keeping visitors on your site even when they explore external content, you can reduce the chances of losing potential customers.
3. Reduce Bounce Rate: Users are less likely to leave your site entirely if external links open in new tabs, which can help lower your store’s bounce rate.

How To Open External Links in New Tabs in Shopify

To open external links in new tabs on your Shopify store, you can use a simple JavaScript code snippet. Follow these steps:

1. Access Your Shopify Admin Panel: Log in to your Shopify store and access the admin panel.
2. Go to Themes: In the Shopify admin panel, navigate to the “Online Store” section and click on “Themes.”
3. Edit Code: Find and click on the “Actions” button, and then select “Edit Code” from the dropdown menu. This will open the code editor.
4. Locate your Theme’s JavaScript File: In the code editor, look for your theme’s JavaScript file. Typically, it’s named theme.js or something similar. If your theme doesn’t have a specific JavaScript file, you can create a new one.
5. Insert the Code: Once you’ve located or created your theme’s JavaScript file, insert the following code at the end:

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

6. Save Your Changes: After inserting the code, save your changes in the code editor.
7. Check Your Store: Visit your Shopify store to ensure that external links now open in new tabs.

By adding this code, any external links on your Shopify store will automatically open in new browser tabs, providing a better user experience for your customers. This article is written by Kashif Mahmood who is a Professional Shopify Developer and the founder of Pioneer Strikes.

Final Thoughts

Opening external links in new tabs is a small yet impactful enhancement for your Shopify store. It ensures that your visitors can explore external content while staying connected to your online store. This, in turn, can lead to increased engagement, reduced bounce rates, and a more positive user experience. By following the steps outlined in this article, you can easily implement this functionality and enjoy the benefits it offers.