JustinWDev of Archived Theme Support
4/15/2015 - 9:18 PM

Show social icons in the toolbar on Minimal without breaking the layout.

Show social icons in the toolbar on Minimal without breaking the layout.

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 %}
    <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>
{% 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 %}

Show social icons in the toolbar on Minimal without breaking the layout. Customers ask for this constantly so this should be a bit of a timesaver. The gist takes into account all screen sizes as well as having all options in the toolbar showing up. The icons are hidden on mobile portrait and landscape by necessity though (smaller than 629px), which should be made clear to merchants who request this change. The icons in the footer haven't been touched.