Open Social Media Links in New Tab Dawn Theme

Technical Q&A
1

I’d like to open social media links in a new tab from my site which uses the Dawn 2.0 theme.

I have found 2 replies, but neither of them are relevant/don’t work.

Can anybody help please?

2

Hello @LittleGrey

ind your social media links HTML code available in the footer.liquid and put target=“_blank” inside anchor tag .

for example on line number 151 on the footer.liquid please replace by

Techlyser_0-1648804475612.png
3

I actually haven’t got this done myself and just implemented it, I never even noticed!

So this is specifically for the Dawn theme where the social icons are in the footer.

Go to Theme > Edit Code

Find footer.liquid

Find the blocks of code for each possible social media link that you use, for example, Instagram has settings.social_instagram_link :

{%- if settings.social_instagram_link != blank -%}
              - {%- render 'icon-instagram' -%}
                    {{ 'general.social.links.instagram' | t }}
                
              

            {%- endif -%}

We want to us a target=“_blank” in the link tag. This will open a new tab when clicked.

Insert target=“_blank” in the social media block for the link you want to open in new tab like below, I’ve added it after the call for the URL and the class :

{%- if settings.social_instagram_link != blank -%}
              - {%- render 'icon-instagram' -%}
                    {{ 'general.social.links.instagram' | t }}
                
              

            {%- endif -%}

Hope this helps.

2 Likes
4

Easy! thanks

5

Hi,

I am using Dawn v9.0.0 and my code looks very different so can someone help me how to put this code on? My code currently looks like:

{%- liquid assign has_social_icons = true if settings.social_facebook_link == blank and settings.social_instagram_link == blank and settings.social_youtube_link == blank and settings.social_tiktok_link == blank and settings.social_twitter_link == blank and settings.social_pinterest_link == blank and settings.social_snapchat_link == blank and settings.social_tumblr_link == blank and settings.social_vimeo_link == blank assign has_social_icons = false endif

Kind regards
Imran

6

After making a request for assistance, I realized that the code I was looking for can be found under ‘social-icons.liquid’ as I am currently using a new version of the theme.

Appreciate this page for the help!

2 Likes
7

@CrystalMailing thanks, that helped me

1 Like
8

This helped me so much! Very much a noob - store less than a week live.

Can’t understand why the default would be to take a user away from your Shopify store when they click a social media link

9

I found a way to do this without editing the theme code directly. This worked in the Dawn theme, and with small modifications, it should work on other Shopify themes too.

  1. In your Shopify customizer, go to your Footer section.

  2. Add a new Custom Liquid block.

  3. Remove all padding so the block won’t be visible on the storefront.

  4. Paste this code into the Liquide Code block:

<script>
  document.querySelectorAll('.footer__list-social .list-social__link').forEach(link => {
    link.setAttribute('target', '_blank');
    link.setAttribute('rel', 'noopener noreferrer');
  });
</script>

Now all your social media links in the footer will automatically open in a new tab.
Let me know if that also worked for you.