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

[tomeastman123]

[dmwwebartisan]

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

[Prezentech]

Hi @tomeastman123 ,

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

[Prezentech · 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 -%}

[tomeastman123]

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

Thanks,

Tom

[Horaciocb]

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

[Prezentech]

@Horaciocb In the header.liquid

[Horaciocb]

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]

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

[Shaheed]

Hi, where do we add the code ?

[stephanieferro]

Can you help me add?

Thanks!

[Prezentech]

Hi @stephanieferro 

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

Thanks!

[Mariusz]

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?

[Prezentech]

Hi @Mariusz ,

Can you please share the store url?

Thanks,

[Mariusz]

Hi @Prezentech,

Thank you for your reply!

Url: https://fondios.com/ 

[Prezentech]

Changes mentioned in the screenshots

 

 

[Mariusz]

HI @Prezentech,

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

[ericsoho]

I am trying to get the instagram icon beside the search icon. Please help, I am using your code. 

[davethedave2]

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

[Yoursocial]

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