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
3805 713 1127

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 -%}

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!

View solution in original post

Replies 5 (5)

made4Uo
Shopify Partner
3805 713 1127

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>

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
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
3805 713 1127

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 -%}

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
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.