intermediate Intermediate tutorials require familiarity with basic web design concepts, as well as basic knowledge of HTML, CSS and JavaScript.

Unsupported Customization

Unsupported customizations fall outside the scope of our support service. This means that we’re not able to help you if you run into problems. The good news is that we’ve classified each tutorial according to its level of difficulty, to help you decide whether or not to attempt it on your own.

There’s also a growing community on our forums - you’ll often find friendly and helpful advice there. You could also consider reaching out to a Shopify Expert to assist you with some of the more advanced customizations.

Adding Facebook, Twitter or other social media buttons to your website

There are two ways you can get social media buttons.

  • Easy way

    Get an app that does all of the work. Check out the Social media section of the App store. Some of our Themes from the Theme Store already come with this feature enabled. Check to see if your theme already has a Twitter option in your Theme Settings.

  • Techy way

    Code the buttons into any theme you want.

Reminder

Shopify cannot add social buttons to your theme for you. This is because Facebook and Twitter constantly change their code and it is near impossible to keep up. This tutorial is a general guide. You will need to know basic HTML for this tutorial.

For finding Facebook, Pinterest and other social site buttons and icons go to their websites and look for the buttons or use the awesome Icon Finder. Twitter provides buttons that are ready to use on your website.

Adding the buttons:

  1. From your shop admin, click on the Themes tab.

    #

  2. Click on the Template Editor button.

    #

  3. To get your button on your site we are going to upload the social media icon image to your theme. Click on the Assets folder to open it.

    #

  4. Scroll down to and click on the Add a new asset link.

    #

  5. Choose the icons file on your computer and click Upload asset.

  6. Now that the physical button icon is there, we are going to add in the code to make the button work. Click on the theme.liquid file to open it in the online code editor.

    #

  7. The line you paste in the code depends on where you want the buttons to appear in your theme. Look through the code to find your perfect location. This code example is specifically for Twitter but will also work for Facebook, Pintreset and other social media:

{{ '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="/assets/my-button.jpg?1406647487" alt="Follow  on Twitter"/></a>

Make sure to Save your changes.

For more information on theme editing, read our design policy.

This customization is not supported by our Shopify Gurus. Learn more ›

Ready to put what you've learned into action?

Build an online store with Shopify. Try it free.

Experience the future of retail now.

Shopify Point of Sale. Try it free.