Shopify themes, liquid, logos, and UX
To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more
This is an accepted solution.
You can add the social media in the header by adding below code:
{%- 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 -%}
{%- assign socials = "Facebook Twitter Pinterest Instagram Tumblr Snapchat YouTube Vimeo" | split: ' ' -%}
{%- if social_icons -%}
<ul class="list--inline site-header__social-icons social-icons site-header__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 }}" target="_blank" aria-describedby="a11y-external-message">
{%- include icon_link -%}
<span class="icon__fallback-text">{{ social }}</span>
</a>
</li>
{%- endif -%}
{%- endfor -%}
</ul>
{%- endif -%}
It would need customization to implement this feature, Unfortunately, there is no simple solution otherwise I will be happy to help you.
I would suggest hiring a Shopify expert to assist you OR feel free to contact me.
Thanks!
Hi @tomeastman123 ,
Please share your store url and password if it is protected so i can check and add it for you.
This is an accepted solution.
You can add the social media in the header by adding below code:
{%- 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 -%}
{%- assign socials = "Facebook Twitter Pinterest Instagram Tumblr Snapchat YouTube Vimeo" | split: ' ' -%}
{%- if social_icons -%}
<ul class="list--inline site-header__social-icons social-icons site-header__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 }}" target="_blank" aria-describedby="a11y-external-message">
{%- include icon_link -%}
<span class="icon__fallback-text">{{ social }}</span>
</a>
</li>
{%- endif -%}
{%- endfor -%}
</ul>
{%- endif -%}
Brilliant work by prezentech! The solution is perfect. Highly recommended.
Thanks,
Tom
@Horaciocb In the header.liquid
Thank you for your fast response @Prezentech ! Once i paste the code, i go to customize theme and have to do something more? I already went there but didn´t find the option. Thank you very much for your help!!
@Horaciocb I can help you to setup as per your requirement. If yes, then please send direct message.
Hi, where do we add the code ?
Can you help me add?
Thanks!
Can you please share your store URL and the screenshot where you want to show it?
Thanks!
Hi @Prezentech,
Your code is perfect, but I have problem when I add it to my header.
When I got social buttons in the same line with the logo and search, account & basket buttons, logo is not centered (move to the right) and three buttons on the right goes off the page.
I enclosed print screen:
Could you help to solve this issue?
Hi @Mariusz ,
Can you please share the store url?
Thanks,
Changes mentioned in the screenshots
I am trying to get the instagram icon beside the search icon. Please help, I am using your code.
Hi @Prezentech I am trying to use the solution.
I am using debut theme but the entire Add to Cart sections disappears?
Hi,
I used your code and it worked. However, it does not align to the search icon where I wanted it to be. Here's how it looks. Can you help me place it next to the search icon. Thank you
User | RANK |
---|---|
125 | |
95 | |
77 | |
58 | |
46 |
Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022Shipping can be one of the most vital parts to set up and manage your business. Understand...
By Ollie Dec 16, 2022