Dawn Theme- How to open External Links in new window

[SamW111]

Hey Shopify Community! 

I am looking for the code change necessary for external links to open in a new window for the Dawn Theme. Shopify currently has released documentation for their "vintage themes" not on Online Store 2.0 and it does not apply to Dawn. 

Any help is greatly appreciated. 

Thanks!

[LitExtension · Accepted solution]

You can add target="_blank" for links, refer https://www.w3schools.com/tags/att_a_target.asp .

It will help you to customize whether or not to add an open new window for the links.

Or go to assets/global.js file and paste this at the bottom of the file:

https://i.imgur.com/dArdGFW.png const 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'; } }

[Elias]

Hey, @SamW111.

Thank you for reaching out and posting this question!

I understand you're looking to modify the Dawn theme, so that external links can open in a new window. While there isn't a documentation or tutorial for this with Online store 2.0, this may be something that our Theme Support team can help you with. If your store is subscribed to a plan, then you're eligible to use the complimentary design time included with your subscription for modifying your theme. While we’re not able to provide account-specific support via the Shopify Community at this time, we’d be happy to continue assisting you through live chat, email, or callback. Please visit the Shopify Help Center and log in to your account to create a support request.

I'd love to know if our Theme Support team can help you with this. Keep me posted!

[LitExtension · Accepted solution]

You can add target="_blank" for links, refer https://www.w3schools.com/tags/att_a_target.asp .

It will help you to customize whether or not to add an open new window for the links.

Or go to assets/global.js file and paste this at the bottom of the file:

https://i.imgur.com/dArdGFW.png const 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'; } }

[SamW111 · Accepted solution]

Awesome thanks! 

I actually realized that if I followed Shopify's help doc here: https://help.shopify.com/en/manual/online-store/themes/os/customize/open-external-links-in-new-tab

And paste the code they provide in that guide into the asset > global.js file it works! 

[janehaill]

It works. Thank you.

[bpln]

This works ! Thanks

[armandorangel]

Worked! Thanks!

[cristoferztc]

Thanks a lot!!!

[itswessmithyo]

2024, absolute legend...better part of a day searching for this off and on during breaks between setting up a new shop;). Even Shopify support was throwing in the cards 😉 alas the internet provides...cheers friend.  FYI, still works on the 2.0 version.  Peace.