How to Open External Links in a New Tab in Shopify
If you have a Shopify store and have links that direct visitors to other websites, you’ll probably want to make those links open in a new tab. This is a useful solution for keeping visitors on your online store while they explore other content, like your YouTube channel, without leaving your website.
Unfortunately, Shopify doesn’t offer a native option to open links in a new tab directly in the navigation settings. However, there is a simple and effective solution that requires just a few lines of JavaScript code to ensure that all external links on your site open in a new tab automatically.
Step by step:
Access the “ Online Store ” section, click on the three dots and select “ Edit Code ”.
Tip:
Before making any changes to the code, it is recommended that you make a backup of your theme. This ensures that if something goes wrong, you can restore the previous version. To duplicate the theme, click " Duplicate ", and a copy will be created automatically.
On the code page, locate the Theme's main JavaScript file:
- Use the search function to find your theme's main JavaScript file. This file usually has the .js extension .
- If you're using the Dawn theme or any of the other free Shopify 2.0 themes, look for global.js .
- For the Debut theme, look for theme.js .
- In other themes, the file might have names like theme.js.liquid or custom.js .
Scroll to the bottom of the found JavaScript file, copy the following code and then click " Save ":
(function () {
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';
}
}
})();
Conclusion
Done! Now, all links that direct to external websites will open in a new tab, ensuring a smoother browsing experience and keeping your visitors even more engaged with your store. Want to learn more valuable tips like this and master e-commerce and Shopify? Visit the PlayEcom website and explore our specialized courses!
