Add Bluesky social icon with link ?

[luckymothers]

Hi,

Trying to add a Bluesky icon and link to my footer but having no joy, can anybody help ? - there is an accepted solution that has been posted but doesnt offer any help other than screen grabs of the front end

Stiil find it bizzare there is no Bluesky social media link yet ?

Thanks

[devcoders]

Hello @luckymothers
Thank you for submitting your query to the Shopify community. I’d be happy to assist you. Could you please provide the store URL and password (if it’s password-protected) so I can review and get back to you with an update?

[luckymothers]

Hey @devcoders

Thanks for the response - the url is https://luckymothers.co.uk/

No password

[DaisyVo]

Hi @luckymothers

You’re right, it’s a bit of a hassle that Bluesky isn’t a standard social icon option on Shopify yet. But don’t worry, I can guide you through adding it manually to your footer. It’s a pretty common issue since Bluesky is relatively new.

Here’s a breakdown of how to add that Bluesky icon and link, making it as straightforward as possible:

1. Get Your Bluesky Icon Ready

First things first, you need the icon image itself. I recommend using an SVG file if you can find one, because they scale well without getting pixelated. You can search for free SVG icons online (just double-check the licensing for commercial use). Once you have your icon, head over to your Shopify admin. Go to Settings and then Files. Upload your Bluesky icon here. After uploading, Shopify will give you a URL for the image – copy this URL because you’ll need it in the next steps.

2. Access Your Theme’s Code

Now, you’ll need to dive into your theme’s code. Don’t worry, it’s not as scary as it sounds. In your Shopify admin, go to Online Store then Themes. Next to your current theme, click the three dots and select Edit Code.

3. Locate Your Footer Code

You need to find the file that controls your footer. Usually, it’s called footer.liquid and it’s located in the Sections folder. If you can’t find footer.liquid there, it might be embedded within the theme.liquid file, which is in the Layout folder. It’s like a treasure hunt sometimes!

4. Insert the Bluesky Link Code

Inside the footer file, look for where the other social media icons are coded. They’re typically within a

or

tag. This is where you’ll add the code for your Bluesky icon. Here’s an example of the code you’ll need:

Let’s break that down:

• YOUR_BLUESKY_PROFILE_URL**:** Replace this with your actual Bluesky profile URL (like https://bsky.app/profile/yourusername.bsky.social).
• YOUR_ICON_URL**:** This is where you paste the URL of the Bluesky icon you uploaded in step 1.
• width=“20” height=“20”****: These attributes control the size of your icon. Feel free to adjust these numbers to fit with your other icons. I usually find 20px by 20px works well, but it depends on your design.
• target=“_blank”****: This is important; it makes the link open in a new tab, so people don’t leave your website.

I’ve found that placing this code within the same

or

as your other social media icons keeps everything nicely aligned.

5. Save Your Changes

After you’ve added the code, hit save. And that’s it! Your Bluesky icon should now be visible in your footer, linking directly to your profile.

A couple of other things to keep in mind:

• If you’re not comfortable editing code yourself, there are Shopify apps that can help you add custom social media icons without touching the code.
• The exact code structure might differ a bit depending on your theme, but the basic principle is the same. Just look at how the other icons are implemented and follow that example.

I hope this helps you get that Bluesky icon up and running. I know it can be a bit frustrating dealing with these little technical hiccups, but it’s often worth it to have that complete social media presence.

If you need any other assistance, I am willing to help.

Best regards,

Daisy.

[luckymothers]

Hey @DaisyVo

Thanks for your help, is much appreaciated ! although i cant read the code to actually add the icon (stage .4) it’s reading as a url ink which when clicked gives:

Can you repost the code ?

Thanks again,

Nick

[luckymothers]

Hey @DaisyVo @devcoders ,

Thanks for the advice Daisy but unfortunatley it didnt work for me, i came up with a solution though.

Download a Bluesky svg icon file - https://uxwing.com/bluesky-icon/
(License: All icons on this site can be used in personal, commercial, and client projects without any attribution or credit.)

Go to ‘Online Store’ > ‘Themes’ >’Three dots…’ > Edit code

Find ‘Assets’ (left side menu) > ‘create new asset’ and add the downloaded Bluesky SVG file.(make sure its named ‘icon-bluesky.svg’) > ‘save’

Go to ‘Snippets’ > ‘social-icons.liquid’ Look for a social media you won’t use, I used Vimeo (which I’ll use as reference).

When you find the code comment out it out (just in case things go Pete Tong you can revert back)

{% comment %}

{%- if settings.social_vimeo_link != blank -%}…………
…….. {%- endif -%}

{% endcomment %}

Copy the ‘Vimeo’ code (without the commenting out) and paste it underneath the commented-out code (just above ) and THEN replace the text ‘icon-vimeo.svg’ with ‘icon-bluesky.svg’ > save

Go to ‘Online Store’ > ‘Themes’ > ‘Customize’ > ‘Theme Settings’ (cog icon the left menu) > ‘Social Media’ and in the ‘Vimeo’ text box (or the social media you’ve chosen to use) just enter your Bluesky account url (from your Bluesky account > ‘profile’ > ‘three dots on right’ > ‘share’ which copies your details to clipboard and just paste it in the Vimeo text box).

Result! – perfect Bluesky icon in the footer and working link.
(In fact, you can use this method to add any icon and link to your footer).

(Will look at how to change the ‘Vimeo’ label in the ‘Theme Settings’ when I have more time, changing ‘Vimeo’ to ‘Bluesky’ in ‘Edit default theme content’ doesn’t make any difference, so may be hard coded?)

[jussiheinonen]

Very well written instructions, works a treat. Twitter social link/icon replaced with Bluesky Thank you!

[luckymothers]

Hi @jussiheinonen

Fantastic ! and you’re welcome - Glad it worked for you and the instructions were ok (though i should have been clearer that its the SVG Code you need to download/copy/paste not the actual icon) but you obviously sussed it !

[VeWear]

Hello @luckymothers

I tried following your direction but I don’t seem to be to find the 'icon-vimeo.svg as my code does not have any. ‘.svg’.

Would you have any advise? Thank you so much!

Seb

[luckymothers]

Hi @VeWear

Happy to help if i can.

Some Questions !

What theme are you using ?

In ‘Snippets’ > ‘social-icons.liquid’ are any of the social media icons named with a .svg ?

In the ‘Assets’ folder how are your icons named ? do they have a .SVG suffix i.e are they named ‘icon-vimeo’ or ‘icon-vimeo.svg’ ?

Also in your ‘online store’ > ‘customise’ >‘Theme settings’ is ‘vimeo’ one of your options ? (just checking lol).

Cheers,

Nick

[VeWear]

Hi @luckymothers ,

Thank you so much for offering to help! The theme I am using is “Dawn”. Regarding the naming of the social media icons, no, there is unfortunately no ‘icon-vimeo.svg’ as you noted in your instruction. Please see my attached screenshot in my original post. Yes, ‘Vimeo’ is a listed option

Thanks again,Seb

[luckymothers]

@VeWear

Hi Seb,

Can you choose ‘edit code’ again and in the left column open ‘assets’ scroll down to where the icons are - TikTok, Twitter and Vimeo should all be around the same place can you take a screen shot of them please? (like the attachment).

Thanks,

Nick

[VeWear]

Hi Nick,

Great, thank you. Yes, I am seeing the blue sky icon i created in the assets folder → See screenshot. However, I still dont seem to be able to see the ‘icon-vimeo.svg’ in the ‘Snippets’ > ‘social-icons.liquid folder. → See second attached screenshot.

Thanks again for the help!

[VeWear]

Hello @luckymothers ,

I was wondering if you had an idea as to how to solve my specific issue I decribed in my previous post with included screenshots. I am unfortunately still not able to include the Bluesky Icon. to my store. Please see last post. I truly appreciate your help! Thank you!

Seb

[luckymothers]

@VeWear

Hi Seb, havent forgotten you - am just going through a new important job application which is taking priority, not even touched my own site till today.

Am not famliar with the Theme you are using but it obviously doesn’t use the xxxx.svg naming to reference the icons, we just need to find where the ‘icon-vimeo’ is? and my guess is just change it to ‘icon-bluesky’. I’ll get back to you but in the meantime if you can try and search for where ‘icon-vimeo’ is ?

Nick

[VeWear]

Hi Nick,

Thank you so much for getting back to about this even though you have a lot of other important things needing your attention!
Ok, I will try and look more through other areas which I have not searched at before and hope I can find the icon file!

Thanks again, I really appreciate it and good luck with your application,
Seb

[rachelep]

BRILLIANT! Thank you so much for sharing your solution. It worked perfectly!

[VeWear]

This is driving me kinda crazy. I have uploaded the bluesky icon seemingly successful, but when copying and editing the venmo code, it tells me “‘snippets/icon-bluesky.svg. liquid’ does not exist”… I have no idea why this. Please see attached screenshots.

[weloveminerals]

Hi, I tried this out, too, and it’s not working out. Theme Dawn. I’ve done all above changes but the vimeo icon doesn’t disappear. The suffix .svg doesn’t seem to change anything.

[luckymothers]

Hi @weloveminerals and apolgies @VeWear , i know you had a problem getting the icon to appear in ‘Dawn’ (sorry i forgot to get back to you!).

I’ve just downloaded the Dawn theme and followed my own instructions and it all works fine - see screen shot attached.

Although the code in my ‘Snippets’ looks different to yours ? - screen shot below.

What version of Dawn are you using ?

The one with the above code is 15.3.0 - which works as you can see.

Cheers,

Nick