Social media - Add social media icons via Assets

[TyW]

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of HTML, CSS, JavaScript, and Liquid is required. Consider hiring a Shopify Expert if you aren't comfortable doing the steps in the 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.
  
  Note: This method may provide addition support options compared to coding this yourself. If you anticipate needing assistance consider an app! 
  
  
• 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.
   
   
   
   
4. Click 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 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, 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.

[CleverGifter]

You can also just go to

online store > customize  theme settings  social media

🙂

[hahahacheong]

Hi, good morning

I would like to add a social media button to the current theme, I wonder would you mind showing me where I should add the code to, please?

I have already uploaded the icons file - IMG_8642.JPG to Asset

{{ ‘IMG_8642.JPG | asset_url | img_tag | link_to: 'https://artland.com/galleries/ri-galerie', 'follow me on artland' }}

I appreciate that you will show me where I should locate the code above. Thank you so much

[thesiloshaunt6]

i did this, i have the buttons but they do not work. they say page not found.

[LeoRobert]

It work but I don't know which line I should paste the code so that the button appears on wanted position. I want the social media buttons to be at position like image attached below. Please help.

[eiizumidesign]

Hello Hahahacheong,

I think you need more customization and create and add a social account to the theme settings as well.

Stage 1 – Creating a new Social Media account into the Theme Settings:
Go to page – https://en.shopify.hk/partners/blog/social-media-marketing-icon

1. Go to header – "Creating the theme setting" and complete the steps.
2. Go to header – "Adding markup to footer.liquid" and complete the steps.
   1. Line 4: " {%- render 'icon-twitch' -%} " — icon-twitch is the icon (image) asset you should call up. <<EiizumiDesign – This part need may further experimenting because your are using a JPEG image instead of ICON, but once you go through everything other thing else, this should be the only obstacle. But if you wish to do ICON, you can go here – https://www.shopify.com.sg/partners/blog/building-icon-systems-with-svg. For your info, ICON goes under ASSETS in EDIT CODE.>>
      
      

Stage 2 – URL Insertion and Checking The Existence of your Created Social Media account stage:
Where to find your Social Account link and insert your desired URL "'https://artland.com/galleries/ri-galerie":
 

1. Main Dashboard > Sales Channels > Online Store > Themes > [Customize] button for Live Theme (on the right panel)
   
   
2. Left-side menu scroll down > Theme settings

1. Theme settings > Social media > Social accounts

[eiizumidesign]

When you go to the Theme setting and look at the Social Account, are these social media account options there?

1. Main Dashboard > Sales Channels > Online Store > Themes > [Customize] button for Live Theme (on the right panel)
   
   
2. Left-side menu scroll down > Theme settings
   
   
   
3. Theme settings > Social media > Social accounts