Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
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 -%}
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>
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 -%}
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 -%}
Thank you! That worked perfectly! Have a great weekend!
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.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025