How to manually add social icons in footer section

Up until version 3.3.0 we had only a basic footer menu for the social platform links (example). We've added the social icons in the theme Version 3.3.1 but if you want to manually add these in an older theme version, please follow these steps:

1. In /sections/footer.liquid file, in line 102, before the {% endcase %}, add from this code only the codes for platforms you need to display in your site (remove the Pinterest snippet if you don't need this for example).

Also, add your own social links instead of the {{ settings.social_twitter | escape }} -screenshot:

{% when 'social' %}

        <div class="footer-item footer-social">
          
          {% unless block.settings.title == blank %}
            <h4>{{ block.settings.title | escape }}</h4>
          {% endunless %}

          <div class="social-icons">

            {% if settings.social_twitter != '' %}
              <a href="{{ settings.social_twitter | escape }}" target="_blank" aria-label="Twitter"><span class="icon" aria-hidden="true">{% include 'theme-symbols', icon: 'social_twitter' %}</span></a>
            {% endif %}

            {% if settings.social_facebook != '' %}
              <a href="{{ settings.social_facebook | escape }}" target="_blank" aria-label="Facebook"><span class="icon" aria-hidden="true">{% include 'theme-symbols', icon: 'social_facebook' %}</span></a>
            {% endif %}

            {% if settings.social_google != '' %}
              <a href="{{ settings.social_google | escape }}" target="_blank" aria-label="Google Plus"><span class="icon" aria-hidden="true">{% include 'theme-symbols', icon: 'social_google' %}</span></a>
            {% endif %}

            {% if settings.social_youtube != '' %}
              <a href="{{ settings.social_youtube | escape }}" target="_blank" aria-label="YouTube"><span class="icon" aria-hidden="true">{% include 'theme-symbols', icon: 'social_youtube' %}</span></a>
            {% endif %}

            {% if settings.social_vimeo != '' %}
              <a href="{{ settings.social_vimeo | escape }}" target="_blank" aria-label="Vimeo"><span class="icon" aria-hidden="true">{% include 'theme-symbols', icon: 'social_vimeo' %}</span></a>
            {% endif %}

            {% if settings.social_pinterest != '' %}
              <a href="{{ settings.social_pinterest | escape }}" target="_blank" aria-label="Pinterest"><span class="icon" aria-hidden="true">{% include 'theme-symbols', icon: 'social_pinterest' %}</span></a>
            {% endif %}

            {% if settings.social_tumblr != '' %}
              <a href="{{ settings.social_tumblr | escape }}" target="_blank" aria-label="Tumblr"><span class="icon" aria-hidden="true">{% include 'theme-symbols', icon: 'social_tumblr' %}</span></a>
            {% endif %}

            {% if settings.social_instagram != '' %}
              <a href="{{ settings.social_instagram | escape }}" target="_blank" aria-label="Instagram"><span class="icon" aria-hidden="true">{% include 'theme-symbols', icon: 'social_instagram' %}</span></a>
            {% endif %}

            {% if settings.social_linkedin != '' %}
              <a href="{{ settings.social_linkedin | escape }}" target="_blank" aria-label="LinkedIn"><span class="icon" aria-hidden="true">{% include 'theme-symbols', icon: 'social_linkedin' %}</span></a>
            {% endif %}

            {% if settings.social_flickr != '' %}
              <a href="{{ settings.social_flickr | escape }}" target="_blank" aria-label="Flickr"><span class="icon" aria-hidden="true">{% include 'theme-symbols', icon: 'social_flickr' %}</span></a>
            {% endif %}

            {% if settings.social_reddit != '' %}
              <a href="{{ settings.social_reddit | escape }}" target="_blank" aria-label="Reddit"><span class="icon" aria-hidden="true">{% include 'theme-symbols', icon: 'social_reddit' %}</span></a>
            {% endif %}

            {% if settings.social_email != '' %}
              <a href="mailto:{{ settings.social_email | escape }}" target="_blank" aria-label="Email"><span class="icon" aria-hidden="true">{% include 'theme-symbols', icon: 'social_email' %}</span></a>
            {% endif %}

          </div>

        </div>

2. At the very end of the same file, replace this original code:

        "type": "newsletter",
        "name": "Newsletter",
        "limit": 1,
        "settings": [
          {
            "type": "text",
            "id": "title",
            "label": "Heading",
            "default": "Newsletter"
          }
        ]
      }
    ]
  }
{% endschema %}

with this one instead 

 "type": "newsletter",
        "name": "Newsletter",
        "limit": 1,
        "settings": [
          {
            "type": "text",
            "id": "title",
            "label": "Heading",
            "default": "Newsletter"
          }
        ]
      },
      {
        "type": "social",
        "name": "Social",
        "limit": 1,
        "settings": [
          {
            "type": "text",
            "id": "title",
            "label": "Heading",
            "default": "Follow us"
          }
        ]
      }
    ]
  }
{% endschema %}

Save the file. 

3. In snippets/theme-symbols.liquid file add this code at the end of the file, just before the {% endif %} -screenshot:

{% elsif icon == 'social_email' %}
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M25.87 5.42V4.9H.1v15.28c0 .4.4.78.78.78h24.35c.4 0 .78-.4.78-.78l-.14-14.76zm-2.98.77l-9.97 8.3-9.97-8.3H22.9zM1.52 19.4V7.1l10.88 8.94c.13.13.26.13.52.13s.4 0 .52-.13L24.32 7.1v12.3H1.52z"/></svg>
{% elsif icon == 'social_facebook' %}
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M24.99,0H1.16C0.43,0,0,0.43,0,1.01v23.83C0,25.57,0.43,26,1.16,26h12.71v-9.82h-3.32v-4.04h3.32V8.96c0-3.32,2.17-5.06,5.06-5.06c1.44,0,2.6,0.14,3.03,0.14v3.47h-2.02c-1.59,0-2.02,0.72-2.02,1.88v2.74h4.04l-0.87,4.04h-3.32V26h6.93c0.58,0,1.16-0.43,1.16-1.16V1.01C26,0.43,25.57,0,24.99,0z"/></svg>
{% elsif icon == 'social_twitter' %}
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M25.83 5.57c-.94.47-2 .7-3.05.82 1.06-.7 1.88-1.64 2.35-2.94-1.06.6-2.1 1.06-3.4 1.3-.94-1.06-2.35-1.64-3.87-1.64-2.94 0-5.28 2.35-5.28 5.28 0 .47 0 .82.12 1.17-4.47-.23-8.35-2.34-10.93-5.5-.47.82-.7 1.64-.7 2.7 0 1.88.94 3.4 2.35 4.46a4.25 4.25 0 0 1-2.35-.7v.12c0 2.58 1.88 4.7 4.23 5.17-.47 0-.94.12-1.4.12-.35 0-.7 0-.94-.12.6 2.1 2.58 3.64 4.93 3.64-1.88 1.53-4.1 2.35-6.58 2.35-.47 0-.82 0-1.3-.12C2.35 23.18 5.17 24 8.1 24c9.75 0 15.03-8.1 15.03-15.03v-.7a9.91 9.91 0 0 0 2.7-2.7z"/></svg>
{% elsif icon == 'social_flickr' %}
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M24.85 0H1.15C.43 0 0 .43 0 1.15v23.7c0 .57.43 1 1.15 1h23.7c.57 0 1.15-.43 1.15-1.15V1.15C25.86.43 25.43 0 24.85 0zM7.6 17.24c-2.44 0-4.3-1.87-4.3-4.3s1.87-4.3 4.3-4.3 4.3 1.87 4.3 4.3-2 4.3-4.3 4.3zm10.78 0c-2.44 0-4.3-1.87-4.3-4.3s1.87-4.3 4.3-4.3 4.3 1.87 4.3 4.3-2 4.3-4.3 4.3z"/></svg>
{% elsif icon == 'social_google' %}
	<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 26 26"><g fill="rgb(86.27451%,30.588235%,25.490196%)"><path d="M26.047 13.023a13.03 13.03 0 0 1-13.023 13.023A13.03 13.03 0 0 1 0 13.023 13.03 13.03 0 0 1 13.023 0a13.03 13.03 0 0 1 13.023 13.023zm0 0"/><path class="invert-fill" d="M4.535 13.14c-.047 2.242 1.496 4.38 3.617 5.078 2 .672 4.46.168 5.79-1.543.973-1.203 1.195-2.8 1.1-4.297l-5.137-.008.004 1.828 3.074.035c-.258.89-.848 1.715-1.742 2.035-1.727.762-3.934-.234-4.477-2.047-.656-1.734.418-3.828 2.19-4.336 1.102-.387 2.234.05 3.176.62.477-.445.922-.922 1.36-1.406-1.066-.895-2.44-1.44-3.855-1.32-2.77.03-5.195 2.6-5.1 5.36zm13.828-2.31l-.012 1.535-1.535.008v1.53l1.535.008.008 1.535h1.527l.012-1.535 1.535-.008V12.38l-1.535-.012-.012-1.535zm0 0"/></g></svg>
{% elsif icon == 'social_instagram' %}
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M13 2.4l5.2.1c1.3.1 1.9.3 2.4.4.6.2 1 .5 1.5 1s.7.9 1 1.5c.2.5.4 1.1.4 2.4.1 1.4.1 1.8.1 5.2l-.1 5.2c-.1 1.3-.3 1.9-.4 2.4-.2.6-.5 1-1 1.5s-.9.7-1.5 1c-.5.2-1.1.4-2.4.4-1.4.1-1.8.1-5.2.1s-3.9 0-5.2-.1-1.9-.3-2.4-.4c-.6-.2-1-.5-1.5-1s-.7-.9-1-1.5c-.2-.5-.4-1.1-.4-2.4-.1-1.4-.1-1.8-.1-5.2l.1-5.2c.1-1.3.3-1.9.4-2.4.2-.6.5-1 1-1.5s.9-.7 1.5-1c.5-.2 1.1-.4 2.4-.4 1.3-.1 1.7-.1 5.2-.1m0-2.3L7.7.2C6.3.2 5.4.4 4.5.7c-.8.4-1.5.8-2.3 1.5C1.5 3 1.1 3.7.7 4.5.4 5.4.2 6.3.1 7.7V13l.1 5.3c.1 1.4.3 2.3.6 3.1.3.9.8 1.6 1.5 2.3s1.4 1.2 2.3 1.5c.8.3 1.8.5 3.1.6 1.4.1 1.8.1 5.3.1l5.3-.1c1.4-.1 2.3-.3 3.1-.6.9-.3 1.6-.8 2.3-1.5s1.2-1.4 1.5-2.3c.3-.8.5-1.8.6-3.1.1-1.4.1-1.8.1-5.3l-.1-5.3c-.1-1.4-.3-2.3-.6-3.1-.3-.9-.8-1.6-1.5-2.3S22.3 1.1 21.4.8c-.8-.3-1.8-.5-3.1-.6S16.5.1 13 .1zm0 6.3c-3.7 0-6.6 3-6.6 6.6s3 6.6 6.6 6.6 6.6-3 6.6-6.6-2.9-6.6-6.6-6.6zm0 10.9c-2.4 0-4.3-1.9-4.3-4.3s1.9-4.3 4.3-4.3 4.3 1.9 4.3 4.3-1.9 4.3-4.3 4.3z"/><circle cx="19.9" cy="6.1" r="1.6"/></svg>
{% elsif icon == 'social_linkedin' %}
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M24.85 0H1.15C.43 0 0 .43 0 1.15v23.7c0 .57.43 1 1.15 1h23.7c.57 0 1.15-.43 1.15-1.15V1.15C25.86.43 25.43 0 24.85 0zM7.6 21.98H3.88V9.62h3.88v12.35H7.6zM5.75 8.04c-1.3 0-2.15-1-2.15-2.3s1-2.15 2.15-2.15c1.3 0 2.15 1 2.15 2.15.14 1.3-.86 2.3-2.15 2.3zm16.23 13.94H18.1v-6.03c0-1.44 0-3.3-2-3.3s-2.3 1.58-2.3 3.16v6.03h-3.73V9.62h3.73v1.72c.57-1 1.72-2 3.6-2 3.88 0 4.6 2.6 4.6 5.9v6.76z"/></svg>
{% elsif icon == 'social_pinterest' %}
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M13 0C5.85 0 0 5.85 0 13c0 5.46 3.38 10.27 8.32 12.1-.13-1.04-.26-2.6 0-3.77l1.56-6.5s-.4-.65-.4-1.82c0-1.82 1.04-3.12 2.34-3.12 1.17 0 1.7.78 1.7 1.82 0 1.17-.65 2.73-1.04 4.3-.26 1.3.65 2.34 1.95 2.34 2.34 0 4.03-2.47 4.03-5.98 0-3.12-2.2-5.33-5.46-5.33-3.64 0-5.85 2.73-5.85 5.6 0 1.17.4 2.34.9 3 .13.13.13.26.13.4-.13.4-.26 1.3-.4 1.43 0 .26-.13.26-.4.13-1.56-.78-2.6-3.12-2.6-5.07 0-4.16 3-7.93 8.58-7.93 4.55 0 8.06 3.25 8.06 7.54 0 4.42-2.86 8.06-6.76 8.06-1.3 0-2.6-.65-3-1.43l-.78 3.12c-.26 1.17-1.04 2.6-1.56 3.38 1.04.52 2.34.78 3.64.78 7.15 0 13-5.85 13-13S20.15 0 13 0z"/></svg>
{% elsif icon == 'social_reddit' %}
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M26 12.6a3.18 3.18 0 0 0-3.12-3.12c-.72 0-1.44.24-1.92.72-1.92-1.2-4.32-1.92-6.85-2.04l1.32-4.2 3.72.84c.12 1.32 1.2 2.4 2.52 2.4 1.44 0 2.64-1.2 2.64-2.64S23.1 1.9 21.67 1.9c-.96 0-1.92.6-2.28 1.44l-4.32-.96c-.36-.12-.72.12-.84.48l-1.68 5.28c-2.64 0-5.28.72-7.2 2.04-.6-.48-1.2-.72-1.92-.72A3.18 3.18 0 0 0 .3 12.59c0 1.08.48 2.04 1.32 2.52v.72c0 2.16 1.2 4.08 3.48 5.52 2.16 1.56 4.92 2.28 8.05 2.28 3 0 5.88-.72 8.05-2.16 2.28-1.44 3.48-3.48 3.48-5.52v-.72c.72-.6 1.32-1.56 1.32-2.64zm-4.32-9.13c.6 0 1.2.48 1.2 1.2 0 .6-.48 1.2-1.2 1.2a1.13 1.13 0 0 1-1.2-1.2c.12-.72.6-1.2 1.2-1.2zM7.63 14.5a1.85 1.85 0 0 1 1.8-1.8c.96 0 1.68.84 1.68 1.8a1.64 1.64 0 0 1-1.68 1.68c-1.08 0-1.8-.72-1.8-1.68zm9.72 5.16c-.84.84-2.28 1.32-4.2 1.32s-3.36-.48-4.2-1.32c-.24-.24-.24-.72 0-.96s.72-.24.96 0c.6.6 1.68.96 3.24.96s2.64-.24 3.24-.96c.24-.24.72-.24.96 0 .36.24.36.6 0 .96zM17 16.2c-.96 0-1.8-.72-1.8-1.68a1.85 1.85 0 0 1 1.8-1.8c.96 0 1.68.84 1.68 1.8a1.64 1.64 0 0 1-1.68 1.68z"/></svg>
{% elsif icon == 'social_vimeo' %}
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M25.9 7.3c-.12 2.47-1.88 6-5.3 10.36-3.53 4.6-6.48 6.83-8.95 6.83-1.53 0-2.83-1.4-3.9-4.24L5.65 12.6c-.7-2.7-1.53-4.1-2.35-4.1-.24 0-.94.35-2.12 1.18L0 8.13C1.3 6.95 2.6 5.9 3.77 4.7c1.65-1.53 2.94-2.24 3.9-2.36 2-.24 3.3 1.18 3.77 4.12.47 3.18.82 5.18 1.06 5.9.6 2.6 1.18 4 1.88 4 .6 0 1.4-.82 2.47-2.6s1.65-3.06 1.77-3.9c.12-1.53-.47-2.24-1.77-2.24-.6 0-1.3.12-1.88.47C16.26 4 18.6 1.87 22.26 2c2.6.25 3.77 1.9 3.65 5.3z"/></svg>
{% elsif icon == 'social_youtube' %}
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M25.76 8.2s-.24-1.77-1.06-2.6c-.95-1.06-2.13-1.06-2.6-1.06L13 4.3l-9.1.24c-.47 0-1.65 0-2.6 1.06C.47 6.43.24 8.2.24 8.2S0 10.33 0 12.45v2c0 2.13.24 4.25.24 4.25s.24 1.77 1.06 2.6c.95 1.06 2.25.95 2.84 1.06 2.12.25 8.86.25 8.86.25l9.1-.24c.47-.12 1.65-.12 2.6-1.06.83-.83 1.06-2.6 1.06-2.6s.24-2.13.24-4.26v-2c0-2.12-.24-4.25-.24-4.25zm-15.48 8.63V9.5l6.97 3.66-6.97 3.67z"/></svg>
{% elsif icon == 'social_tumblr' %}
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26"><path d="M19.02 20.9c-.52.26-1.44.4-2.1.4-2.1 0-2.48-1.44-2.48-2.6v-8.1h5.23V6.66h-5.23V0h-3.8s-.13 0-.13.13c-.4 2.1-1.3 5.62-5.23 7.06v3.4h2.6v8.5c0 2.87 2.22 7.05 7.84 6.92 1.96 0 4.05-.78 4.57-1.57l-1.3-3.53z"/></svg>

Save the file. 

4. Finally, add this CSS code at the end of the theme's stylehseet: assets/theme.css if your theme version is 3.5.0 or later (or assets/theme.scss.liquid if your theme version is 3.4.2 or lower):

.social-icons {
  margin-bottom: 30px;
  height: 26px;
  display: flex;
}
.social-icons a {
  margin: 0 7px;
  display: inline-block;
  width: 26px;
  height: 26px;
}
.site-nav .social-icons a {
  opacity: .62;
}
.site-nav .social-icons a:hover,
.site-nav .social-icons a.hover {
  opacity: 1
}
.site-nav .social-icons a svg {
  width: 26px !important;
  height: 26px !important;
}
.site-nav .social-icons a svg * {
  fill: #ffffff;
  transition: fill 150ms linear;
}
.site-nav .social-icons a:hover svg * {
  fill: #ff0000;
}

Save the file. 

Now you can enable the Social option from the Footer settings in theme customizer and display your new social icons (screenshot).

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.