Opening social media icons in new window debut theme

Solved

Opening social media icons in new window debut theme

theregimenco
Excursionist
16 0 3

Hello. I have searched for a solution to open my social media icons in a new window with the debut theme, and have found solutions but it's not clear to me where I'm supposed to add target="_blank" in my code. I am in the footer.liquid tab and this is what I see:

 

{%- if
settings.social_twitter_link != blank
or settings.social_facebook_link != blank
or settings.social_pinterest_link != blank
or settings.social_instagram_link != blank
or settings.social_tumblr_link != blank
or settings.social_snapchat_link != blank
or settings.social_youtube_link != blank
or settings.social_vimeo_link != blank
or request.page_type == 'article'
or request.page_type == 'blog'
-%}
{%- assign social_icons = true -%}
{%- endif -%}

 

Am I looking in the correct spot? My website is theregimenco.com and the social media icons are in the footer.

Accepted Solution (1)
made4Uo
Shopify Partner
3873 718 1214

This is an accepted solution.

Hi @theregimenco,

 

Thank you for providing the code. I made changes to the code you provided and added the target="_blank"

<div class="grid__item {% if show_selectors or show_payment_icons %}one-half{% endif %} small--one-whole site-footer-item-tall">
{%- if social_icons -%}
<ul class="list--inline site-footer__social-icons social-icons site-footer__icon-list">
{%- for social in socials -%}
{%- assign social_link = social | prepend: 'social_' | append: '_link' | downcase -%}
{%- assign icon_link = social | prepend: 'icon-' | downcase -%}
{%- if settings[social_link] != blank -%}
<li class="social-icons__item">
<a class="social-icons__link" href="{{ settings[social_link] | escape }}" aria-describedby="a11y-external-message" target="_blank">
{%- include icon_link -%}
<span class="icon__fallback-text">{{ social }}</span>
</a>
</li>
{%- endif -%}
{%- endfor -%}

{%- if request.page_type == 'blog' or request.page_type == 'article' -%}
<li>
<a class="social-icons__link" href="{{ shop.url }}{{ blog.url }}.atom" target="_blank">
{% include 'icon-rss' %}
<span class="icon__fallback-text">RSS</span>
</a>
</li>
{%- endif -%}

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

View solution in original post

Replies 5 (5)

made4Uo
Shopify Partner
3873 718 1214

Hi @theregimenco,

 

Find the class="social-icons__link" next to the it add the target="_blank". Code should look like below. Make sure you have spaces and do this for each social-icons__link

 

<a class="social-icons__link" target="_blank" href="facebook.com/TheRegimenCo" aria-describedby="a11y-external-message">
....................
                  </a>

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
theregimenco
Excursionist
16 0 3

Thank you for your response. Is this what you're talking about? If so, I added the code where you said (it appears twice below) and that didn't open the social media in a new window.

 

<div class="grid__item {% if show_selectors or show_payment_icons %}one-half{% endif %} small--one-whole site-footer-item-tall">
{%- if social_icons -%}
<ul class="list--inline site-footer__social-icons social-icons site-footer__icon-list">
{%- for social in socials -%}
{%- assign social_link = social | prepend: 'social_' | append: '_link' | downcase -%}
{%- assign icon_link = social | prepend: 'icon-' | downcase -%}
{%- if settings[social_link] != blank -%}
<li class="social-icons__item">
<a class="social-icons__link" href="{{ settings[social_link] | escape }}" aria-describedby="a11y-external-message">
{%- include icon_link -%}
<span class="icon__fallback-text">{{ social }}</span>
</a>
</li>
{%- endif -%}
{%- endfor -%}

{%- if request.page_type == 'blog' or request.page_type == 'article' -%}
<li>
<a class="social-icons__link" href="{{ shop.url }}{{ blog.url }}.atom">
{% include 'icon-rss' %}
<span class="icon__fallback-text">RSS</span>
</a>
</li>
{%- endif -%}

made4Uo
Shopify Partner
3873 718 1214

This is an accepted solution.

Hi @theregimenco,

 

Thank you for providing the code. I made changes to the code you provided and added the target="_blank"

<div class="grid__item {% if show_selectors or show_payment_icons %}one-half{% endif %} small--one-whole site-footer-item-tall">
{%- if social_icons -%}
<ul class="list--inline site-footer__social-icons social-icons site-footer__icon-list">
{%- for social in socials -%}
{%- assign social_link = social | prepend: 'social_' | append: '_link' | downcase -%}
{%- assign icon_link = social | prepend: 'icon-' | downcase -%}
{%- if settings[social_link] != blank -%}
<li class="social-icons__item">
<a class="social-icons__link" href="{{ settings[social_link] | escape }}" aria-describedby="a11y-external-message" target="_blank">
{%- include icon_link -%}
<span class="icon__fallback-text">{{ social }}</span>
</a>
</li>
{%- endif -%}
{%- endfor -%}

{%- if request.page_type == 'blog' or request.page_type == 'article' -%}
<li>
<a class="social-icons__link" href="{{ shop.url }}{{ blog.url }}.atom" target="_blank">
{% include 'icon-rss' %}
<span class="icon__fallback-text">RSS</span>
</a>
</li>
{%- endif -%}

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
theregimenco
Excursionist
16 0 3

Thank you! That worked perfectly! Have a great weekend!

Lucky13Golf
Tourist
3 0 3

I am unclear where to insert this code. Does it overwrite what the person asked or does it go at the bottom or what? I'm getting errors all the time.