How to Open External Links in a New Tab on Shopify
You always want external links (any links that lead outside of the store's URL) to open into a new tab so that customers don’t completely leave the website and never come back. Most stores have external links going to social media content, press releases, or stockist locations.
To keep website visitors on the store’s website (while still giving them the opportunity to browse elsewhere), make sure to add this piece of code to every store you work on.
This code will make sure external links open in a new tab. The code is originally from the Shopify Help Center here.
- Go to Online Store > Themes > beside the theme you want to edit, click … > Edit Code.
- In the file search bar, search for .js and scroll down to the in the Assets folder. Look for a file that represents the main JS file or custom JS file if it exists. For example, theme.js, global.js or custom.js. Open this file.
- Scroll all the way down to the bottom of the file, and paste the below code. Click Save.
If the code is not working as expected, it could be that you're in the wrong file. Open theme.liquid and check which JS files are being imported. You'll want to add it to the first or second JS file being imported.
You may also have to make some small tweaks unique to the theme you're using. For example, in the Broadcast and Palo Alto themes, after adding code to the custom.js file, you need to do an addition step. Open the theme.liquid file and search for custom.js. You'll see that there's a note that says you need to import the custom.js file by cutting and pasting a line of code to move it outside of the comment.
Now you don't have to worry about customers leaving the site due to outbound links!
Hana Drdla
