Open Social Media Links in New Tab Dawn Theme

LittleGrey
New Member
2 0 0

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?

Replies 2 (2)
Niraj_singh
Shopify Partner
137 25 24

Hello @LittleGrey 

ind your social media links HTML code available in the footer.liquid  and put target="_blank" inside anchor tag <a>  .

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

<a target="_blank" href="{{ settings.social_twitter_link }}" class="link list-social__link" >

Techlyser_0-1648804475612.png

 




         

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact regarding any help, below my contact listed :-
Feel Free to Contact| Whatsapp +919753808608
Skype: niraj_1420
MrGrif
Shopify Partner
16 2 1

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 -%}
              <li class="list-social__item">
                <a href="{{ settings.social_instagram_link }}" class="link list-social__link" >
                  {%- render 'icon-instagram' -%}
                  <span class="visually-hidden">{{ 'general.social.links.instagram' | t }}</span>
                </a>
              </li>
            {%- 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 -%}
              <li class="list-social__item">
                <a href="{{ settings.social_instagram_link }}" target="_blank" class="link list-social__link" >
                  {%- render 'icon-instagram' -%}
                  <span class="visually-hidden">{{ 'general.social.links.instagram' | t }}</span>
                </a>
              </li>
            {%- endif -%}

 

 

Hope this helps.