Add Social Icon (LinkedIn) to Shopify Footer?

IlluminateLabs
Explorer
118 0 14

My theme (Brooklyn) allows for certain default social channels to be added, like Facebook and Instagram which we've already added.

However I want to also add LinkedIn as that's where we have the most followers.

I know how to add the hover effect I desire to this icon, I just don't know how to manually add the LinkedIn icon to the .social-icons class.

0 Likes
Nick_Marketing
Shopify Partner
263 48 66

You can follow the similar process as stated in the other post, it's well explained. The example is for TikTok  & Spotify footer Icons, but you can just replace it with LinkedIn. You'll be modding quite a few files, so I recommend you to Duplicate (backup) your current theme.
Instructions:
https://community.shopify.com/c/Shopify-Design/HELP-Social-Media-Footer-in-Brooklyn-Theme/td-p/10234...


- I help businesses with eCommerce and Marketing Technology integrations.
- For consulting work inquiries, please send me a Private Message.
- Presently working in Toronto, CANADA.
0 Likes
IlluminateLabs
Explorer
118 0 14

Appreciate the resource. So I followed those instructions and they mostly worked but for some reason the text and icon aren't aligned for my custom icon as for the others.

Footer_Error_1.pngFooter_Error_2.png

Any ideas?

0 Likes
Nick_Marketing
Shopify Partner
263 48 66

Potentially there is an issue with vertical-allign or there is an issue with the container. Closely observe every selector element and its respective properties in CSS.
+ LinkedIn icon seems to be larger in size than others.

https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

- I help businesses with eCommerce and Marketing Technology integrations.
- For consulting work inquiries, please send me a Private Message.
- Presently working in Toronto, CANADA.
0 Likes
IlluminateLabs
Explorer
118 0 14

How much would you charge to fix this?

I also want to add a hover effect with color code #1464C4 when icon is scrolled over on desktop, to match the hover effect for the other icons.

0 Likes