If you want buttons that open external links without taking your customers away from your store, then this is the post for you. I had a heck of a time figuring this out – even Shopify’s help wasn’t as helpful as I hoped! Here’s the solution I discovered.
Please note that I have not tested this code in any of the premium themes, I’ve used this code only on the free Shopify themes like Dawn, Sense, Refresh, ect.
The Problem: When Buttons Take Customers Away from your Site
Here’s what sparked this tutorial: I have a client who partners with a nonprofit organization. She donates a portion of her t-shirt sales to them, but she also wanted to give customers the option to make direct donations. She needed a bright, prominent button that would open the donation page.
The problem? When customers click that external button, it takes them completely away from her store. Now they have to remember to click the back button to return to shopping. That’s not the user experience we want!
Let me caution you against doing this in general for an ecommerce store. People have really short attention spans and encouraging them to leave your site, even opening a different tab, may lose you sales. So if you need to do this, ensure you have your abandoned cart notifications set-up, and have a system in place to retarget them.
What Shopify Offers (And What It Doesn’t)
When you create a button in Shopify, you’ll notice something frustrating in the button settings. You can:
- Link to pages within your store
- Link to external websites
- No option to “open in new tab”
Now, if you highlight text and create a link, you DO get that “open this link in a new window” option. But for buttons? Nada. Nope. Nothing.
The Shopify Help Rabbit Hole
Like always, I started with Shopify Help (have you tried Shopify Magic yet? It’s actually pretty helpful for asking questions!). I found an article about opening external links in new tabs, but it was for vintage themes – not the 2.0 theme I was working with.
The code looked promising, but the instructions said to paste it in the “theme.js” or “custom.js” files in the Assets folder. Problem? Those files don’t exist past Dawn 10.0!
The Solution: Where to Put the Code
I discovered the secret lol: You need to use the global.js file instead.
Here’s exactly how to do it:
Step 1: Access Your Theme Code
- Go to your Shopify admin
- Navigate to Online Store > Themes
- Click on the (…) on the theme
- Important: Always work on a backup copy first!
- Click “Edit code“
Step 2: Find the Right File
- In the file directory, look for the “Assets” folder
- Find and click on “global.js”
- Scroll all the way to the bottom of the file
Step 3: Add the Code
- Give yourself a couple of spaces at the bottom
- Paste the code below
- Click “Save”
/* CODE FOR EXTERNAL LINKS TO OPEN IN A NEW TAB */
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';
}
}
Step 4: Test It Out
- Go back to your store
- Refresh the page
- Click your external button
- Voilà! It should open in a new tab
Now when customers click that external link button, a new tab opens while keeping your store page right where they left it. No need for the dreaded back-button journey!
Weekly emails for eCommerce shop owners!
Tips, Tricks & Resources to Design, Maintain, and Grow Your eCommerce Store.
A Quick E-commerce Note
Worth mentioning again: Generally speaking, you don’t want to send customers away from your store, you want them focused on making purchases. But sometimes (like with charitable partnerships or essential resources), it makes sense to provide external links that open in new tabs.
Troubleshooting Tips
- Double-check your theme version: This solution works for Dawn theme. If you’re using a different theme, the file location might be different.
- Always test on a backup: Never make changes directly to your live theme without testing first.
- Clear your cache: If it’s not working immediately, try clearing your browser cache and refreshing.
Found this helpful? Need more Shopify design tips? Check out my other tutorials on the blog and consider subscribing for weekly design tips like this post directly into your inbox.
Happy designing!
