FROM CACHE - en_header

How to Change Footer Social Icons

Amz1
New Member
2 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

Replies 17 (17)
Nick
Community Moderator
Community Moderator
4522 434 987

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 | Community Moderator @ 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

Jmiller
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

Nick
Community Moderator
Community Moderator
4522 434 987

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 | Community Moderator @ 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

Jmiller
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.

Nick
Community Moderator
Community Moderator
4522 434 987

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 | Community Moderator @ 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

asger
New Member
6 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

Nick
Community Moderator
Community Moderator
4522 434 987

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 | Community Moderator @ 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

asger
New Member
6 0 0
Hi Nick

Thanks for responding.

I use the Debut theme for flettedefugle.dk.
Nick
Community Moderator
Community Moderator
4522 434 987

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 | Community Moderator @ 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

asger
New Member
6 0 0

Hi again @Nick

 

Your code is not the same as mine... I looked and search for the icons but nope. My code is just different. I don't know...

 

I've screen dumped my code. Maybe I need to look elsewhere to find the icons. I've tried in the asset folder (where I assume I should upload my own / the new icon) but the social icons are not to be found there.

 

Thanks helping me out. 

Nick
Community Moderator
Community Moderator
4522 434 987

Hi @asger,

That would be very strange if the code from the same theme is that much different. 

I might reach out to you directly to discuss this further and take a closer look if that's ok? I want to find the code for you on this to get it right. Would you be able to confirm if the email you used to sign up to the community is the same as your Shopify store and I can contact you about this? You don't need to post the email, just confirming it is ok. 

Once I have verified some details I can see if we can figure this out. 

Nick | Community Moderator @ 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

asger
New Member
6 0 0
Okay. Maybe I just don’t understand it right but it would be great to have looking into it.

Yes it is the same - though the mail is my personal mail for my user but I am not the one listed as the owner.

You’re more than welcome to reach out to me!
Nick
Community Moderator
Community Moderator
4522 434 987

Hi @asger,

 

No problem at all. I have reached out to you directly about this to take a closer look. 

 

If for any reason you didn't receive the email, be sure to let me know in a reply here. 

Nick | Community Moderator @ 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

HazExperts
New Member
2 0 0

Hi,

 

Sorry to bring up an old thread wondered if someone could help.  I am trying to add a linkedin logo in the footer to my site.  I have added the image to assets but I dont know how to get it to display.  I thought I could copy the text that was already there for say "Pinterest" and then edit it to display the image.  I can do that for the link and the ALT text but the one thing I cannot to is get the image to display.  This is the code i have on my footer Page:

 

{% if settings.social_instagram_link != blank %}
<li>
<a class="icon-fallback-text" href="{{ settings.social_instagram_link | escape }}" title="{{ 'layout.footer.store_on_social_network' | t: store_name: shop.name, social_network: 'Instagram' | escape }}">
<span class="icon icon-instagram" aria-hidden="true"></span>
<span class="fallback-text">Instagram</span>
</a>
</li>
{% endif %}
{% if settings.social_snapchat_link != blank %}
<li>
<a class="icon-fallback-text" href="{{ settings.social_snapchat_link }}" title="{{ 'layout.footer.store_on_social_network' | t: store_name: shop.name, social_network: 'Snapchat' | escape }}">
<span class="icon icon-snapchat" aria-hidden="true"></span>
<span class="fallback-text">Snapchat</span>
</a>
</li>
{% endif %}
{% if settings.social_tumblr_link != blank %}
<li>
<a class="icon-fallback-text" href="{{ settings.social_tumblr_link | escape }}" title="{{ 'layout.footer.store_on_social_network' | t: store_name: shop.name, social_network: 'Tumblr' | escape }}">
<span class="icon icon-tumblr" aria-hidden="true"></span>
<span class="fallback-text">Tumblr</span>

 

I dont use tumblr and snapchat so thought it would be simple to jsut exchange the image and links....apparently not.  I am using Supply

 

Please please help as i am going out of my mind lol

 

Many thanks

TomasMendes
Tourist
6 0 1

Hey mate can you reach out to me I need help with this.
Thanks

DaWizard
New Member
1 0 0

Hello Nick,

 

Can you message me directly and can we do remote session for you to teach me how to change my footer social media icons as it was not there ....

Nick
Community Moderator
Community Moderator
4522 434 987

Hi @DaWizard,

I wouldn't be able to do a remote session with you for this but you can reach out to our primary support team where someone can look into this for you in real time via a chat or call back. You can log in and contact our support team here

If you did want to try and take a go at this yourself, the content team at Shopify wrote a blog post about it which you can read here

Nick | Community Moderator @ 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