How to open social icon in a new tab in the footer

Technical Q&A
, ,

Topic summary

A user working with the Pipeline theme needed help making footer social media icons open in new tabs. They had attempted to follow existing guidelines but encountered issues.

Solution provided:

  • Add the target="_blank" attribute to the <a> tags in the footer code
  • This attribute must be placed in the opening <a> tag, not the closing tag
  • The attribute specifies that links should open in a new browser tab

Example implementation:

<a href="https://www.google.com/" target="_blank"></a>

Outcome:
The solution was successfully implemented and confirmed working by the original poster.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

Hello!
I’m using Pipeline and I’m not sure how to edit the social icons to be opened in a new window..

I did those changes accordingly to these guidelines, but it’s not working (see screenshot).

kire social icons.png

Please help :disappointed_face:

Our current code is:

{% if section.settings.footer_social_enable %}

    {%- assign social_accounts = 'Facebook, Twitter, Tiktok, Pinterest, Instagram, Snapchat, Tumblr, Linkedin, YouTube, Vimeo, Medium, ' | split: ', ' -%} {%- for social in social_accounts -%} {%- assign social_handle = social | handleize -%} {% capture social_link %}social_{{ social_handle }}_link{% endcapture %}

    {%- if settings[social_link] != blank -%}

  • {% render 'social-icon' handle: social_handle %} {{ social }}
    • {%- endif -%} {%- endfor -%}
2

Hi @Huyen_kire ,

“target” is an attribute of element , that specifies where to open the linked document, in this tab, in new tab, etc, detailed here

If you want to open a new tab when click the link, you just need to set “target=_blank” into like the following example

before:

<a href="https://www.google.com/"></a>

after adding target

<a href="https://www.google.com/" target="_blank"></a>

So, find all elements in your footer and add this property (note that you need to add in the open tag of a HTML element - , not the close tag )

3

Amazing, it’s working now. Thank you!!!