Social media - Add social media buttons

Community Manager
Community Manager
312 10 290

Caution: This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, JavaScript, and Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.


There are two ways you can get social media buttons:

 

  • Option 1
    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 social media button by going to the theme editor and checking the Header, Sidebar, Homepage, and/or Footer menus.

  • Option 2 (Advanced)
    Code the buttons into any theme you want.

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.

 

 

Adding the buttons

 

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and then click Actions > Edit code.
  3. To get your button on your site we are going to upload the social media icon image to your theme. Click the Assets folder to open it.

    smbutton01.jpg

  4. Click the Add a new asset link.

    smbutton02.jpg

  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 the theme.liquid file to open it in the online code editor.

    smbutton03.jpg

  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, Pinterest and other social media:

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

    Alternate button code with HTML:

    <a href="https://twitter.com"><img src="my-button.jpg" alt="Follow on Twitter"/></a>

     

  8. Save your changes.

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

TyW | Community Manager @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

0 Likes