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!
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024