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

Solved
tomeastman123
Excursionist
16 1 1

tomeastman123_0-1600553340683.png

 

0 Likes
dmwwebartisan
Shopify Partner
4381 982 1253

@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
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
Prezentech
Shopify Partner
87 26 25

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
0 Likes
Prezentech
Shopify Partner
87 26 25

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
0 Likes
tomeastman123
Excursionist
16 1 1

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

Thanks,

Tom

0 Likes
Horaciocb
Tourist
10 0 3

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

0 Likes
Prezentech
Shopify Partner
87 26 25

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

0 Likes
Prezentech
Shopify Partner
87 26 25

@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
0 Likes