Shopify UI Elements Generator
Menu
Social icons Cart attribute Line Item Property Methods of payment
Social icons Cart attribute Line Item Property Methods of payment

Customize
Set your social links and customize the look of your buttons.

1. Set your links 2. Customize the look

All links, except the email one, must begin with http://, https:// or //. The email link must begin with mailto:. Leave the text box blank if you don't want to use the corresponding icon. If you don't need Facebook or Twitter icons, remove the URLs that were put in by default.

Circle
Silhouette
Circle
Rounded corners
Square

Ex: teal, or #39CCCC. See this for nice color ideas.

22px

Preview
Your buttons will appear just like this, wherever you place your code.

Grab your code
Copy and paste the code below into your theme.liquid file between the <body> and </body> tags. The buttons will appear wherever you place your code.

{{ 'social/social-icons.css' | global_asset_url | stylesheet_tag }}
<style>
  .social-links a { display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; margin: 0; padding: 0.05em; color: #555!important; font-size: 22px!important; }
</style>
<span class="social-links">
  <a href="https://www.facebook.com/shopify" title="Follow us on Facebook" target="_blank" rel="noopener noreferrer"><span class="shopify-social-icon-facebook-circle"></span></a>
  <a href="https://twitter.com/shopify" title="Follow us on Twitter" target="_blank" rel="noopener noreferrer"><span class="shopify-social-icon-twitter-circle"></span></a>
</span>