How to add social icons to the top header

Pipeline tries to keep the top of your site very clean and simple to allow shoppers easy access to your navigation and purchase flow. Having additional items in the top section may seem helpful but can add clutter to your clean aesthetic design. In Pipeline your social icons reside at the bottom in your footer. If you have the need to add them to top header area, this code change can help you achieve that. 

Result:

Mobile:

Your top bar announcement text will be pushed down below to a new line.

This customization requires Pipeline 2 or higher. See link below to check your version number. 

Option 1: Centred Social Icons

Copy all the code from this file (follow link to view all code):

https://gist.githubusercontent.com/whistlerbrad/71523a578bea967590d5a9a80e71d188/raw/26b86528ec746e5b1e357d84acba779ad926f761/header.liquid

And replace all the code in your header.liquid file:

http://myshopify.com/admin/themes/current/?key=sections/header.liquid

Save and reload your site - That's it. 

To manage which icons are displayed, use the same social settings used with your footer. 


Option 2: Social icons on the left

This version works best if you turn off the account icon:

It will also work with Account icon as well - The UX is not as nice but it will work:

Copy all the code from this file (follow link to view all code):

https://gist.githubusercontent.com/whistlerbrad/714bba34bf7f15841f088116c5616666/raw/8278c638a8c9459ae043b528f77bc9513c22589a/header.liquid

And replace all the code in your header.liquid file:

http://myshopify.com/admin/themes/current/?key=sections/header.liquid

Save and reload your site - That's it. 


Optional method - manual customization

If you already have a customized header.liquid file and don't want to replace the entire code as explained above, you can manually add the icons with the following code and at this location:

http://myshopify.com/admin/themes/current/?key=sections/header.liquid&line=12

The code to add is:

        {% if settings.social_twitter_link != blank %}
            <a class="icon-fallback-text" href="{{ settings.social_twitter_link }}" title="{{ shop.name }} on Twitter" target="_blank" itemprop="sameAs">
              <span class="icon icon-twitter" aria-hidden="true"></span>
              <span class="fallback-text">Twitter</span>
            </a>
        {% endif %}
        {% if settings.social_facebook_link != blank %}
            <a class="icon-fallback-text" href="{{ settings.social_facebook_link }}" title="{{ shop.name }} on Facebook" target="_blank" itemprop="sameAs">
              <span class="icon icon-facebook" aria-hidden="true"></span>
              <span class="fallback-text">Facebook</span>
            </a>
        {% endif %}
        {% if settings.social_instagram_link != blank %}
            <a class="icon-fallback-text" href="{{ settings.social_instagram_link }}" title="{{ shop.name }} on Instagram" target="_blank" itemprop="sameAs">
              <span class="icon icon-instagram" aria-hidden="true"></span>
              <span class="fallback-text">Instagram</span>
            </a>
        {% endif %}
        {% if settings.social_pinterest_link != blank %}
            <a class="icon-fallback-text" href="{{ settings.social_pinterest_link }}" title="{{ shop.name }} on Pinterest" target="_blank" itemprop="sameAs">
              <span class="icon icon-pinterest" aria-hidden="true"></span>
              <span class="fallback-text">Pinterest</span>
            </a>
        {% endif %}
        {% if settings.social_google_link != blank %}
            <a class="icon-fallback-text" href="{{ settings.social_google_link }}" title="{{ shop.name }} on Google Plus" target="_blank" itemprop="sameAs">
              <span class="icon icon-google_plus" aria-hidden="true"></span>
              <span class="fallback-text">Google Plus</span>
            </a>
        {% endif %}
        {% if settings.social_youtube_link != blank %}
            <a class="icon-fallback-text" href="{{ settings.social_youtube_link }}" title="{{ shop.name }} on Youtube" target="_blank" itemprop="sameAs">
              <span class="icon icon-youtube" aria-hidden="true"></span>
              <span class="fallback-text">Youtube</span>
            </a>
        {% endif %}
        {% if settings.social_vimeo_link != blank %}
            <a class="icon-fallback-text" href="{{ settings.social_vimeo_link }}" title="{{ shop.name }} on Vimeo" target="_blank" itemprop="sameAs">
              <span class="icon icon-vimeo" aria-hidden="true"></span>
              <span class="fallback-text">Vimeo</span>
            </a>
        {% endif %}
        {% if settings.social_tumblr_link != blank %}
            <a class="icon-fallback-text" href="{{ settings.social_tumblr_link }}" title="{{ shop.name }} on Tumblr" target="_blank" itemprop="sameAs">
              <span class="icon icon-tumblr" aria-hidden="true"></span>
              <span class="fallback-text">Tumblr</span>
            </a>
        {% endif %}
        {% if settings.social_fancy_link != blank %}
            <a class="icon-fallback-text" href="{{ settings.social_fancy_link }}" title="{{ shop.name }} on Fancy" target="_blank" itemprop="sameAs">
              <span class="icon icon-fancy" aria-hidden="true"></span>
              <span class="fallback-text">Fancy</span>
            </a>
        {% endif %}

For the left version, I added a margin-right after the account icon and also wrapped the social icons below in a new div with the same class as the account link:


Removing the header icons

If you need to undo or remove this change, use the Older versions drop-down option and rollback to before you replaced the above code. 

Still need help? Contact Us Contact Us