FROM CACHE - en_header

How do I add social icons to the header in Debut theme?

Solved
tomeastman123
Excursionist
16 1 1
Accepted Solution (1)

Accepted Solutions
Prezentech
Shopify Partner
265 50 71

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 -%}
If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire us.
Feel free to Contact me for shopify help on support@prezentech.com
Shopify Design Changes | Shopify Custom Theme Design and Development | Shopify App Development

View solution in original post

Replies 18 (18)
dmwwebartisan
Shopify Partner
10736 2343 3340

@tomeastman123 

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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Prezentech
Shopify Partner
265 50 71

Hi @tomeastman123 ,

Please share your store url and password if it is protected so i can check and add it for you.

 

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire us.
Feel free to Contact me for shopify help on support@prezentech.com
Shopify Design Changes | Shopify Custom Theme Design and Development | Shopify App Development
Prezentech
Shopify Partner
265 50 71

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 -%}
If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire us.
Feel free to Contact me for shopify help on support@prezentech.com
Shopify Design Changes | Shopify Custom Theme Design and Development | Shopify App Development
tomeastman123
Excursionist
16 1 1

Brilliant work by prezentech! The solution is perfect. Highly recommended.

Thanks,

Tom

Horaciocb
Excursionist
13 0 3

Hi @Prezentech ! In wich section do i have to paste the above code?

Prezentech
Shopify Partner
265 50 71

@Horaciocb In the header.liquid

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire us.
Feel free to Contact me for shopify help on support@prezentech.com
Shopify Design Changes | Shopify Custom Theme Design and Development | Shopify App Development
Horaciocb
Excursionist
13 0 3

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!!

Prezentech
Shopify Partner
265 50 71

@Horaciocb I can help you to setup as per your requirement. If yes, then please send direct message.

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire us.
Feel free to Contact me for shopify help on support@prezentech.com
Shopify Design Changes | Shopify Custom Theme Design and Development | Shopify App Development
Shaheed
New Member
1 0 0

Hi, where do we add the code ?

stephanieferro
New Member
1 0 0

Can you help me add?

 

Thanks!

Prezentech
Shopify Partner
265 50 71

Hi @stephanieferro 

Can you please share your store URL and the screenshot where you want to show it?

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire us.
Feel free to Contact me for shopify help on support@prezentech.com
Shopify Design Changes | Shopify Custom Theme Design and Development | Shopify App Development
Mariusz
Tourist
3 0 0

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:

Mariusz_0-1634759201695.png

Could you help to solve this issue?

Prezentech
Shopify Partner
265 50 71

Hi @Mariusz ,

Can you please share the store url?

Thanks,

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire us.
Feel free to Contact me for shopify help on support@prezentech.com
Shopify Design Changes | Shopify Custom Theme Design and Development | Shopify App Development
Mariusz
Tourist
3 0 0

Hi @Prezentech,

Thank you for your reply!

Url: https://fondios.com/ 

Prezentech
Shopify Partner
265 50 71

Changes mentioned in the screenshots

Screenshot_6.png

Screenshot_2.png

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire us.
Feel free to Contact me for shopify help on support@prezentech.com
Shopify Design Changes | Shopify Custom Theme Design and Development | Shopify App Development
Mariusz
Tourist
3 0 0

HI @Prezentech,

This is perfect. Thank you a lot for your help!

ericsoho
Excursionist
43 0 12

Screen Shot 2022-02-13 at 2.41.59 AM.pngI am trying to get the instagram icon beside the search icon. Please help, I am using your code. 

davethedave2
New Member
2 0 0

Hi @Prezentech I am trying to use the solution.
I am using debut theme but the entire Add to Cart sections disappears?