Social icons: 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. 

Header example centred:

Mobile:

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

This customization requires Pipeline 2 or higher. Click link to check your version number. 
Which version of Pipeline am I using?

How to:

Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.

Make a duplicate before any code changes:

Next, open the Code Editor:

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

Quick link if the theme is live/published:
Open Code Editor

1

Create a snippet

In the Snippets folder, choose Add a new snippet:

Call the snippet:

social-icons

Example:

Choose the Create snippet button to continue. 

In the code area on the right, paste all the code from this file:

Click to view code

Save the file.

2

Use the snippet in your header file

Now you can call that snippet in your header file depending on where you'd like to show the social icons.

Option 1: Centred Social icons in the header

Open your header.liquid file from the sections folder:

Quick link if the theme is live/published:
sections/header.liquid

Use this code to call the social-icons snippet - Copy using Command-C (Mac) or Control-C (Win):

{% include 'social-icons' %}

Find the right spot to Paste the code - Paste using Command-V (Mac) or Control-V (Win):

Be sure to paste that code after the endif line for the account section. Example:

Save and preview your site - That's it. 

Option 2: Social icons on the left in the header

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:

Open your header.liquid file from the sections folder:

Copy this code - Copy using Command-C (Mac) or Control-C (Win):

<div class="header-account-link">
{% include 'social-icons' %}
</div>

Or, if you're using the account login icon with the social icons, this version allows you to add some spacing after the account head icon:

<div class="header-account-link" style="margin-left: 15px;">
{% include 'social-icons' %}
</div>

Find the right spot to Paste the code - Paste using Command-V (Mac) or Control-V (Win):

Be sure to paste that code after the endif line for the account section. Example:

Save and preview your site - That's it. 

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

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.