Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
I want all external links on my Shopify site to open in a new window. Should be simple. I see recommendations to input this code at the end of Theme.js (I'm using Flow theme, version 39.1.0):
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';
}
}
I did that. It didn't work. I opened the website in an Incognito browser; none of the links open in a new window. I had someone else try, who actually knows what they're doing with coding. It didn't work for him either. Please be kind, I know nothing about coding and this is my first post in the community. 🙂
Hi @CCKris 👋 Always remember other people we cannot see what you see or just know what you know.
You must communicate your specific context.
Provide inspectable urls of your work so far, and reproduction steps.
https://community.shopify.com/c/blog/how-to-get-support-from-the-community/ba-p/1399408
That code works if ran in the devtools console(F12 key) on the dawn demo site and checking the external social media links in the footer.
https://theme-dawn-demo.myshopify.com/
So it may be your specific attempt or issues with the theme, etc etc.
Contact me if you need this customization or theme repair services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.
Contact [email protected] for the solutions you need
Save time & money ,Ask Questions The Smart Way
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org
Hey @CCKris
Try replacing your code with this code and also make sure you're placing the code at the right position in your theme files
document.addEventListener('DOMContentLoaded', 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';
}
}
});
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Thank you, I tried that and still nothing happened. I put the code at the bottom of the Theme.js, as that's where the Shopify Help Bot told me to put it. If there is somewhere else I should put it, how would I know? To be clear, my IN-TEXT links open in a new window as they should. It's the BUTTONs that are not opening in new windows. For example, if you go to the page https://coldcurrentkelp.com/pages/press, and click "Watch Here" it won't open in a new window - because that "Watch Here" link is in a BUTTON. (But, for example, the in-text links under the Azure Rd. graphic open correctly in new windows because they are IN-TEXT hyperlinks.) Not sure what I'm doing wrong!
Hey @CCKris
Thank you for clarifying! Since the issue is specific to links within buttons and not regular text links, the JavaScript code needs to target button elements that contain external links as well. We need to target buttons that contain anchor (<a>) tags and apply the same logic to open them in a new window.
document.addEventListener('DOMContentLoaded', 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';
}
}
var buttons = document.querySelectorAll('a.button, .btn a');
buttons.forEach(function(button) {
if (button.hostname !== window.location.hostname) {
button.target = '_blank';
button.rel = 'noreferrer noopener';
}
});
});
If this code, doesn't works then share your collaborator request code in private messages and I can have a detailed look in it.
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
This did not work, sadly. How do I send a private message? I Have my collaborator request code. Thanks!
@Moeed ,This did not work, sadly. How do I send a private message? I Have my collaborator request code. Thanks!
Hey @CCKris
You can private message me by clicking on my profile.
Best Regards,
Moeed
Solutions !
Works great, code added at the end of the global.js (listener not added in the Shopify code answer )
Doesn't see how to mark it as Solution... but it's the one.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024