Add Social Icon (LinkedIn) to Shopify Footer?

IlluminateLabs
Explorer
126 0 16

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.

Replies 4 (4)

Nick_Marketing
Shopify Partner
1487 336 464

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


Nick | Ecommerce & Marketing Technology Consultant | Toronto, CANADA
- For consulting work availability, please send me a Private Message or submit a ✍️Contact Form.
- For FREE Shopify Tutorials, Subscribe to my YouTube channel (▶️ Ecommerce TV).
IlluminateLabs
Explorer
126 0 16

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?

Nick_Marketing
Shopify Partner
1487 336 464

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

Nick | Ecommerce & Marketing Technology Consultant | Toronto, CANADA
- For consulting work availability, please send me a Private Message or submit a ✍️Contact Form.
- For FREE Shopify Tutorials, Subscribe to my YouTube channel (▶️ Ecommerce TV).
IlluminateLabs
Explorer
126 0 16

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.