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

Solved
Highlighted
Excursionist
16 1 1

tomeastman123_0-1600553340683.png

 

0 Likes
Highlighted
Shopify Partner
2812 616 754

@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.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Shopify Partner
85 26 23

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
Highlighted
Shopify Partner
85 26 23

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
Highlighted
Excursionist
16 1 1

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

Thanks,

Tom

0 Likes