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

Solved

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

tomeastman123
Excursionist
16 1 1

tomeastman123_0-1600553340683.png

 

Accepted Solution (1)
Prezentech
Shopify Partner
391 76 106

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 20 (20)

dmwwebartisan
Shopify Partner
12323 2552 3732

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Prezentech
Shopify Partner
391 76 106

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
391 76 106

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

cbswco
Explorer
46 0 9

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

Prezentech
Shopify Partner
391 76 106

@cbswco 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
cbswco
Explorer
46 0 9

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
391 76 106

@cbswco 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
Visitor
1 0 0

Hi, where do we add the code ?

stephanieferro
Visitor
1 0 0

Can you help me add?

 

Thanks!

Prezentech
Shopify Partner
391 76 106

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
391 76 106

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
391 76 106

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
Explorer
50 0 13

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
Visitor
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?

Yoursocial
Visitor
1 0 0

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

Yoursocial_0-1669745385933.png

 

mike-the-drive
Tourist
15 0 0

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!

 

www.thedriveclothing.com