How to Change Footer Social Icons

New Member
1 0 0

Hi

i tried following method to change my social icons but it not works

https://community.shopify.com/c/Shopify-Design/Need-to-change-social-media-icons/m-p/345670

can someone help how to put custom facebook or any other social icon url in following social icon liquid file

http://prntscr.com/mjalnv

Or any other custom code method?

thanks

0 Likes
Community Manager
Community Manager
2491 171 375

Hi @Amz1,

 

Nick here from Shopify. 

 

Shopify has a great guide for adding/ adjusting social media buttons which you can follow for this. You can see the guide here. If this is something you might not feel comfortable doing, it could be worth looking into having a Shopify Expert do this for you as a small task

 

Hope this helps! 

 

All the best, Nick

Nick | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Tourist
5 0 2

I have the same issue of wanting to change my social media icons.

I did see the Shopify guide to add social media buttons.

I understood the first part about adding the icons to the assets folder but I was wondering if someone could please explain where in the theme.liquid file I would paste the code to make them appear on the footer?

Would I just put it at the end or is there a certain line I have to replace?

 

Thanks for any help,

J

1 Like
Community Manager
Community Manager
2491 171 375

Hi @Jmiller,

 

Great question. 

 

The line you paste in the code depends on where you want the buttons to appear in your theme. Your best bet here is to look through the code to find your perfect location. For each theme it is different, but you can find the general area of where it is in every theme by using CTRL/CMD+F to search for `site-footer__social-icons`. This is what it is called on Debut, but it will vary for other themes. You are looking for something called “social” which will bring you to the part of the code that contains the list of social media icons.

 

Something small to remember is that this step assumes that you already have uploaded the social media icon image you want in the assets folder, as per the guide.

 

Hope this helps!

 

All the best, Nick

Nick | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Tourist
5 0 2

Hi Nick,

Thanks for your reply.

 

I didn't find site-footer_social-icons in theme.liquid where the Shopify instructions say to go.

I was able to locate it under Assets in theme.scss.liquid but that still wasn't the right section and didn't have any place to put the code.

 

For anyone else using the Debut theme what worked for me to change the footer social icons was uploading the icons I wanted to use to the assets folder according to the Shopify instructions and then going to Sections then to footer.liquid

 

If for example you want to change your instagram icon do a search to find this line:

{% include 'icon-instagram' %}

and replace it with:
<img src="IMAGE URL">
In place of IMAGE URL put the URL to the image you've uploaded to assets that you want to use instead.
To get the URL for the image you uploaded into assets, open the uploaded file, right click on the image, select open image in new tab and copy-paste the link in the browser window to replace IMAGE URL.
To change other types of social media do a search for this line:

{% include 'icon-instagram' %}

but replace instagram with the media of whatever icon you want to change.

1 Like
Community Manager
Community Manager
2491 171 375

Hi @Jmiller,

 

Thanks for replying and sharing this. Great find. This is something which is located in a different place for every theme. 

 

Hopefully, someone with the same theme as you will get assisted from your post. 🙂

 

All the best, Nick

Nick | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
New Member
4 0 0

Hi @Jmiller

 

Your solution might be right what I need but... It seems like the code has been updated and I can't find the {% include 'icon-instagram' %}. 
Do you know what to do?

 

Best regards,

Asger

0 Likes
Community Manager
Community Manager
2491 171 375

Hi @asger,

 

Can I ask what the name of the theme you are using is please? The code can be different depending on the theme and would make a difference here. Let us know 🙂

Nick | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
New Member
4 0 0
Hi Nick

Thanks for responding.

I use the Debut theme for flettedefugle.dk.
0 Likes
Community Manager
Community Manager
2491 171 375

Hi @asger,

 

The code would still be the same for the Debut theme regarding this. They would be in the footer.liquid file and start around line 150 or above. 

 

I took a screenshot of how it looks in my test store and where it would be. You can see it below:

 

20-01-owx6j-akbsu

 

 

Nick | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes