How to Make a Link Open in a New Tab | Shopify Help

How to Make a Link Open in a New Tab | Shopify Help

Know how to make a link open in a new tab

To make a link open in a new tab you need to add a small code in Shopify liquid file. We will explain all these steps in this blog post.

Why do we need to make a link open in a new tab?

Every Shopify website has some pages with external(links to another website) or internal(links within the website) links that redirect users to a new page to give more detailed information about the product and services before they gonna buy them.

To provide better a user experience and boost cross sells you should need to make a link open in a new tab. So users can open the linked page in a new tab with having the main page opened in another tab.

Benefits of open external links in the new tab –

  • Enhance user experience
  • Lower the website bounce rate
  • Boost on-page SEO
  • Improve website credibility
  • Make website link structure stronger

Also read: How to Add Buy Now Button on Shopify?

Follow these steps to open external links in a new tab in the Shopify store

  • To add tabnabbing to Shopify store pages need to edit the theme’s JavaScript file.
  • Click on the Theme option under Online Store in your Shopify admin panel
open external link in new tab shopify
  • Click on the Actions option, a dropdown menu will open then click on Edit code
open links in new tab in shopify
  • Search “assets” in the search bar and open the directory, find the following files
    • theme.js
    • theme.js.liquid
    • custom.js
  • Now open file and paste the following code 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';
  }
}

Now click on Save

All done!

Final Words

May this tutorial helps you to open an external link in a new tab on your Shopify store. If you find any difficulties you can get the help of Shopify expert designers and developers from EcomHeroes. We have also listed the Shopify small tasks and tweaks to help Shopify businesses you can visit the page and buy any of the tasks with a single click.