Shopify themes, liquid, logos, and UX
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
@cbswco 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!!
@cbswco 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
Hi @Prezentech could you suggest where I should add the code for this to work on my website? When I added it it is placed below the menu and I really need it at the top left of the website. Thank you!
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024