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
- Click on the Actions option, a dropdown menu will open then click on Edit code
- 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.