Solved

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

Huyen_kire
Visitor
2 0 0

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 😞

 

Our current code is:

{% if section.settings.footer_social_enable %}
<ul class="footer-social social-icons grid__item inline-list">
{%- 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 -%}
<li>
<a href="{{ settings[social_link] }}" title="{{ social }}">
{% render 'social-icon' handle: social_handle %}
<span class="visually-hidden">{{ social }}</span>
</a>
</li>
{%- endif -%}
{%- endfor -%}

 

Accepted Solution (1)

BSS-Commerce
Shopify Expert
3477 461 515

This is an accepted solution.

Hi @Huyen_kire ,

"target" is an attribute of element <a>, 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 <a> 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 <a> elements in your footer and add this property (note that you need to add in the open tag of a HTML element - <a>, not the close tag </a>)

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

Replies 2 (2)

BSS-Commerce
Shopify Expert
3477 461 515

This is an accepted solution.

Hi @Huyen_kire ,

"target" is an attribute of element <a>, 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 <a> 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 <a> elements in your footer and add this property (note that you need to add in the open tag of a HTML element - <a>, not the close tag </a>)

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

Huyen_kire
Visitor
2 0 0

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