How do I add Facebook, Twitter, and social media buttons to my website? (Shopify Admin 2)

There are two ways you can get social media buttons.

Easy way: Get an app that does all of the work

Here are a bunch of apps that do all of the coding work for you!

• Addthis: Gives you the option to add every button you could imagine!
• Happy Ending: Lets you pull Facebook into your Thank You page so that customers can refer their friends after they order.
• ShopConnection: Support FB, Twitter, Pinterest, Google+, Fancy and Tumblr
• Want Button: Exposure on your shoppers' Facebook Timelines
• Pinfeed: for Pinterest 

Techy way: Code the buttons into any theme you want.

For finding Facebook, Pinterest and other social site buttons and icons you will need to use Google Images or the awesome Icon Finder.

Twitter provides buttons that are ready to use on your website

Adding the buttons:

You will need to add some code in the file theme.liquid of your theme. The file theme.liquid is responsible for anything that appears on every page of your site (ie. your header and footer — and quite often your sidebar too). 

To edit your theme.liquid layout file, login to your shop admin and go to the Theme tab. From the Themes page, click on the Template Editor button.

You will be redirected to the Theme Editor page. On the theme editor page, in the sidebar, look under Layouts for theme.liquid. 

Click on 'theme.liquid' to open it in the online code editor.

STEP 1: Upload your image to your theme

On the Theme Editor page, in the sidebar, locate the Assets folder. Scroll down to the bottom of the asset's folder and click on the 'Upload a new theme asset' link. Upload your image.

STEP 2: Use some Liquid code

Use the following Liquid code in your theme.liquid file to display your image as a button. The line you paste in the code depends on where you want the buttons to appear in your theme. That's why you need to be able to read HTML to do this.

	{{ 'my-twitter-button.png' | asset_url | img_tag | link_to: 'http://twitter.com/iamawesome', 'follow me on twitter' }} 

Alternate button code with HTML

	<a href="http://twitter.com"><img src="{{ 'my-button.jpg' | asset_url }}" alt="Follow {{ shop.name }} on Twitter"/></a> 

In the above code snippet, use your own filename and the URL to your Twitter page. The same technique can be used for Facebook, Pinterest or other social buttons and icons. 

For more information on theme editing, read our design policy as well as our theme customization guide.

Related Article: Adding a Facebook Like Button
Related Article: I want to add Tweet buttons to my blog. How do I do this?