Cacher is the code snippet organizer for pro developers

add this to the header section. I've added right under the Favicon info

{
  "type": "header",
  "content": "Social Media Icons"
},
{
  "type": "checkbox",
  "id": "social_toolbar",
  "label": "Show social icons in the toolbar?",
  "info": "The icons will not show up on small screen sizes."
},

/* add this css to the bottom of the stylesheet */

.toolbar li li {display:inline-block; padding: 0; }
.social-links ul, .customer-links {float: left; margin: 0 0 0 15px; }
.social-links a {padding: 0; vertical-align:middle;}
.customer-links {padding-left: 0 !important; margin: 0 0 0 15px;}
.toolbar .search-field {padding-right: 15px;}
.toolbar li {padding-left: 15px;}
  
@media only screen and (max-width: 629px){
  .deskOnly {display:none;}
}

  {% comment %}
  create a new snippet called social-links-list and add this code
  {% endcomment %}
  
  <ul>
    <li>{% if settings.facebook_link != '' %}<a href="{{ settings.facebook_link }}" title="{{ 'layout.social.facebook_title' | t }}"><span class="shopify-social-icon-facebook-circle"></span></a>{% endif %}</li>
    <li>{% if settings.twitter_link != '' %}<a href="{{ settings.twitter_link }}" title="{{ 'layout.social.twitter_title' | t }}"><span class="shopify-social-icon-twitter-circle"></span></a>{% endif %}</li>
    <li>{% if settings.pinterest_link != '' %}<a href="{{ settings.pinterest_link }}" title="{{ 'layout.social.pinterest_title' | t }}"><span class="shopify-social-icon-pinterest-circle"></span></a>{% endif %}</li>
    <li>{% if settings.google_link != '' %}<a href="{{ settings.google_link }}" title="{{ 'layout.social.google_title' | t }}" rel="publisher"><span class="shopify-social-icon-googleplus-circle"></span></a>{% endif %}</li>
    <li>{% if settings.instagram_link != '' %}<a href="{{ settings.instagram_link }}" title="{{ 'layout.social.instagram_title' | t }}"><span class="shopify-social-icon-instagram-circle"></span></a>{% endif %}</li>
    <li>{% if settings.vimeo_link != '' %}<a href="{{ settings.vimeo_link }}" title="{{ 'layout.social.vimeo_title' | t }}"><span class="shopify-social-icon-vimeo-circle"></span></a>{% endif %}</li>
    <li>{% if settings.youtube_link != '' %}<a href="{{ settings.youtube_link }}" title="{{ 'layout.social.youtube_title' | t }}"><span class="shopify-social-icon-youtube-circle"></span></a>{% endif %}</li>
    <li>{% if settings.tumblr_link != '' %}<a href="{{ settings.tumblr_link }}" title="{{ 'layout.social.tumblr_title' | t }}"><span class="shopify-social-icon-tumblr-circle"></span></a>{% endif %}</li>
    <li>{% if settings.atom_link != '' %}<a href="{{ settings.atom_link }}" title="{{ 'layout.social.atom_title' | t }}"><span class="shopify-social-icon-feed-circle"></span></a>{% endif %}</li>
  </ul>

{% comment %}
add this right after the customer-links snippet
{% endcomment %}

{% if settings.social_toolbar %}
    <li class="social-links deskOnly">{% include 'social-links-list' %}</li>
{% endif %}