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 <div> or <ul> tag. This is where you'll add the code for your Bluesky icon. Here’s an example of the code you'll need:

<a href="YOUR_BLUESKY_PROFILE_URL" target="_blank" title="Bluesky">

  <img src="YOUR_ICON_URL" alt="Bluesky" width="20" height="20">

</a>

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 <div> or <ul> 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 </ul>) 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 !