How to Open Links in a New Tab on Dawn Theme

In this tuturial, I’ll be showing you how to open external links in a new tab on the free shopify theme, Dawn.

External links are URLs that direct customers to different websites, such as the links included in social media icons.

This is a great fix for those social icons, such as facebook and instagram in your footer on the Dawn theme.

Currently these links are opening in the same tab, which means that they are over-riding your website. Best practice is to have these links open in a new tab so your visitors and customers can easily navigate back to your website.

*They’ll also find your website even easier if you have a favicon setup.

Note

This tutorial involves adding some code to your theme.

1. From inside your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, most likely the live theme and create a backup/copy, click Actions > Duplicate
3. Now that your theme is safely backed up, find the theme you want to edit, and then click Actions > Edit code.
4. Under the Assets directory, click on the global.js file
5. 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’;
   }
   }
6. Click Save

Now test an external link on your website to see if it works correctly!