How do I make some Links (like social media) open in New Tab

New Member
1 0 0

Hello, I want to make some changes in a store using Debut Theme and I want to make some links like social media icons to open in a new window/tab. How do I do that? I tried to use this
https://ecommerce.shopify.com/c/ecommerce-design/t/open-external-link-from-my-footer-menu-in-a-new-t...
but it's outdated and the code provided there is not working. I also used target="_blank" that didn't work as well. The link to the store is https://katrinakelly.com/

0 Likes
Shopify Expert
265 1 13

Hi Maria,

It should be quite simple. On an anchor, you should add target="_blank".  But there might be some extra tweaking needed as you need to add an anchor tag and a link as well.

Here's a suggestion. Just drop us an email at welcome@kaleido.club and we'll sort it out for you free of charge :) Good deed for the day.

Jarvis @ Kaleido
- Slow Shopify Store? Install our PageSpeed Magic app.
- Have more questions? Feel free to email me.
- My reply helped? Click Like to show me some love!

0 Likes
Excursionist
29 1 11

Add this to the bottom of your theme.js file:


  $(document).ready( function() {
  jQuery('a[href^="http"]').not('a[href^="'+$(location).attr('hostname')+'"]').attr('target', '_blank');
  });

It will set any link that is not part of your store or on your domain to open in a new window.

3 Likes
Excursionist
75 0 11

Hi Maria,

If you only want to change the social media links in the Footer, perform the following actions:

  1. Customize your Theme
  2. See Lower Left > Theme Actions > Edit Code
  3. Navigate to the Sections folder
  4. Open the file: footer.liquid ...

Scroll down to ~ line 93 and you'll see the beginning of the social media links.  Within the anchor tags, add target="_blank" ... as shown below.  Do this for each social media link.  Remember to save the file when you're done.

<a target="_blank" class="social-icons__link" href="{{ settings.social_twitter_link }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Twitter' }}">

Cheers,
Rob

2 Likes
Excursionist
26 0 2

Updated theme like minimal have a new section for social media under snippets.

Snippets > social-links.liquid 

 

0 Likes
New Member
11 0 0

Thank you Alia. Your amazing.


@Alia_Makarem wrote:

Updated theme like minimal have a new section for social media under snippets.

Snippets > social-links.liquid 

 


 

0 Likes
Tourist
9 0 0

Is there a way to globally change to _blank for all links, even in the store ( using Debut Theme)

0 Likes
New Member
2 0 0

How do you make it open in new tab as opposed to opening a whole new browser window?  

0 Likes
Tourist
9 0 0

Hi jkenfield,
New window TAB within the theme. So example from the menu  of the website Debut theme, everytime you click, a new TAB Window opens.
Donna

0 Likes
New Member
2 0 0

HI dgilberto!  Im not sure what you mean :)  I didnt know if there was a way to change the code given above 

$(document).ready( function() {
 jQuery('a[href^="http"]').not('a[href^="'+$(location).attr('hostname')+'"]').attr('target', '_blank');
  });

to open only a new tab in your existing browser window as opposed to opening an entire new window.

0 Likes