Adding social media links to header

Highlighted
Tourist
4 0 1

Hi,
I'm using Debut theme and would like to add the social media links to the header (currently in the footer).
My knowledge of code is limited :/ Can anybody help please? 
 

Thanks

0 Likes
Highlighted
Shopify Partner
89 0 4

You can put same code what is put on the footer put into the header if you don't know how to do then i am happy to help you 

0 Likes
Highlighted
Shopify Partner
89 0 4

  <div class="grid grid--no-gutters">
      {% if social_icons %}
        <div class="grid__item{% if section.settings.footer_newsletter_enable %} medium-up--one-half{% else %} text-center{% endif %}">
          <ul class="list--inline site-footer__social-icons social-icons">
            {% if settings.social_facebook_link != blank %}
              <li>
                <a class="social-icons__link" href="{{ settings.social_facebook_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Facebook' }}">
                  {% include 'icon-facebook' %}
                  <span class="icon__fallback-text">Facebook</span>
                </a>
              </li>
            {% endif %}
            {% if settings.social_twitter_link != blank %}
              <li>
                <a class="social-icons__link" href="{{ settings.social_twitter_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Twitter' }}">
                  {% include 'icon-twitter' %}
                  <span class="icon__fallback-text">Twitter</span>
                </a>
              </li>
            {% endif %}
            {% if settings.social_pinterest_link != blank %}
              <li>
                <a class="social-icons__link" href="{{ settings.social_pinterest_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Pinterest' }}">
                  {% include 'icon-pinterest' %}
                  <span class="icon__fallback-text">Pinterest</span>
                </a>
              </li>
            {% endif %}
            {% if settings.social_instagram_link != blank %}
              <li>
                <a class="social-icons__link" href="{{ settings.social_instagram_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Instagram' }}">
                  {% include 'icon-instagram' %}
                  <span class="icon__fallback-text">Instagram</span>
                </a>
              </li>
            {% endif %}
            {% if settings.social_tumblr_link != blank %}
              <li>
                <a class="social-icons__link" href="{{ settings.social_tumblr_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Tumblr' }}">
                  {% include 'icon-tumblr' %}
                  <span class="icon__fallback-text">Tumblr</span>
                </a>
              </li>
            {% endif %}
            {% if settings.social_snapchat_link != blank %}
              <li>
                <a class="social-icons__link" href="{{ settings.social_snapchat_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Snapchat' }}">
                  {% include 'icon-snapchat' %}
                  <span class="icon__fallback-text">Snapchat</span>
                </a>
              </li>
            {% endif %}
            {% if settings.social_youtube_link != blank %}
              <li>
                <a class="social-icons__link" href="{{ settings.social_youtube_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'YouTube' }}">
                  {% include 'icon-youtube' %}
                  <span class="icon__fallback-text">YouTube</span>
                </a>
              </li>
            {% endif %}
            {% if settings.social_vimeo_link != blank %}
              <li>
                <a class="social-icons__link" href="{{ settings.social_vimeo_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Vimeo' }}">
                  {% include 'icon-vimeo' %}
                  <span class="icon__fallback-text">Vimeo</span>
                </a>
              </li>
            {% endif %}
            {% if template.name == 'blog' or template.name == 'article' %}
              <li>
                <a class="social-icons__link" href="{{ shop.url }}{{ blog.url }}.atom">
                  {% include 'icon-rss' %}
                  <span class="icon__fallback-text">RSS</span>
                </a>
              </li>
            {% endif %}
          </ul>
        </div>
      {% endif %}

 

put this line of code in to header.liquid this file located under the section  on the theme 

http://prntscr.com/g02xfj

0 Likes
Highlighted
Tourist
4 0 1

Thank you identixweb :)
What line do I post this code in please? Sorry, very new to this :s
 

0 Likes
Highlighted
Tourist
4 0 1

Thank you identixweb :)
What line do I post this code in please? I've tried a few places and none seem to show up. Sorry, very new to this :s

0 Likes
Highlighted
New Member
3 0 0

Hi Carrie,

Did you get this to work?  I'm trying to figure out the same thing.

 

0 Likes
Highlighted
Shopify Partner
25 0 2

Your website is coming soon so I can't really check your code for your homepage.

0 Likes
Highlighted
Shopify Partner
25 0 2

You already have your social media icons on your footer are you trying to have it on your header?

0 Likes
Highlighted
New Member
3 0 0

Yes, I am trying to have them on both the header and footer.

0 Likes
Highlighted
Shopify Partner
25 0 2

Go to your theme and edit your code.

Then put the code IdentixWeb has provided into Sections/header.liquid just at the very end of the second div. Inside that div.

Note it must be before {% schema %}

0 Likes