Shopify Tips: Add Bluesky icon to Shopify

How to add a Bluesky butterfly icon to the other social media icons and links in the Shopify Dawn theme.

Before you get started

Note: This guide uses the Shopify Dawn version 13 theme. If you have a different theme, or a drastically different version of the theme, things may not be exactly the same!

Before getting started it is always advisable to make it as easy as possible to revert back to the state everything was in beforehand. You then have peace of mind that if anything goes wrong you can instantly undo it! With this in mind I recommend going to your online store themes, clicking on the three dots button next to your current live theme and choosing "Duplicate". You will then have a copy of the current live state of your store which you can revert back to if needed. However, even if you don't do this, Shopify keeps a copy of all your file changes when editing your theme code so that you can revert back to an earlier version on each individual file if need be (when in the code editor, at the top of the code window it says "Recent changes" with "Current" and a drop down list beneath - just choose the file version you want to revert to.

Create the new Bluesky social media setting

This will add a new setting to your store theme, allowing you put your Bluesky social media profile link into it. It will be added to the Social Media section of theme settings you can find through your theme's "Customize" button, and then the Settings area. I've called the new setting "Bluesky":

Remember that you can just search for e.g. Instagram in the files to help you quickly locate the places to make changes!

Let's start editing files to achieve this. Go to Online Store -> Themes -> [three dots button] -> Edit code. In the Config area open the file named:

settings_data.json

At around line 19 find the line of code beginning:

"social_instagram_link"

Immediately after it add the new line:

"social_bluesky_link": "",

There's also a second place to put this new line in the same file. At around line 337 fine the line that reads:

"social_instagram_link": "",

Immediately after it add the new line:

"social_bluesky_link": "",

Save the file. Now, still in the Config area, open the file named:

settings_schema.json

At around line 1320 find this section:

      {
        "type": "text",
        "id": "social_instagram_link",
        "label": "t:settings_schema.social-media.settings.social_instagram_link.label",
        "placeholder": "t:settings_schema.social-media.settings.social_instagram_link.info"
      },

Immediately beneath add the following new lines:

      {
        "type": "text",
        "id": "social_bluesky_link",
        "label": "t:settings_schema.social-media.settings.social_bluesky_link.label",
        "placeholder": "t:settings_schema.social-media.settings.social_bluesky_link.info"
      },

(Note, the comma at the end after the curly bracket is essential, don't miss it out!)

Save the file.

In the Locales area open the file:

en.default.schema.json

At around line 255 find the section:

    "social-media": {
      "name": "Social media",
      "settings": {
        "header": {
          "content": "Social accounts"
        },

Immediately beneath add the following new lines:

        "social_bluesky_link": {
          "label": "Bluesky",
          "info": "https://bsky.app/"
        },

(Note, the comma at the end after the curly bracket is essential, don't miss it out!)

Save the file.

Your new setting should be ready for you to fill some data into it. Go to Online Store -> Themes -> Customize button. Choose the settings cog from the left hand vertical menu, then Social Media from the list. You should find your new Bluesky setting with a text box for you to enter your link.

Create the new Bluesky icon

You have your new setting, and you've filled in your Bluesky link. Now you need to actually make an icon and the link show on your website.

First, create the new Bluesky icon.

After navigating to your themes and choosing "Edit code..." go to the "Snippets" area and choose "+ Add a new snippet":

Give your new snippet the filename:

icon-bluesky.liquid

(Note that you will probably just name it 'icon-bluesky' and Shopify will add the '.liquid' itself.) Then copy and paste the following into the file, so that this is the only contents of the file:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
  <path fill="currentColor" d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565C.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479c.815 2.736 3.713 3.66 6.383 3.364c.136-.02.275-.039.415-.056c-.138.022-.276.04-.415.056c-3.912.58-7.387 2.005-2.83 7.078c5.013 5.19 6.87-1.113 7.823-4.308c.953 3.195 2.05 9.271 7.733 4.308c4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056c2.67.297 5.568-.628 6.383-3.364c.246-.828.624-5.79.624-6.478c0-.69-.139-1.861-.902-2.206c-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8"/>
</svg>

Save the new file. (Note the fill="currentColor" section - this is what will make your icon display in the same colour as your other icons that it is next to.)

Show Bluesky on your website

At the moment you've created your new Bluesky icon, but it's not being displayed yet. To change your theme to show the new snippet you just created you need to edit the snippet file called:

social-icons.liquid

You will see that this file contains blocks of repeated code that looks similar, one block for each social media icon. Choose where you want your new Bluesky icon to appear in amongst your existing social media icons and insert a new block of code there. So if you want your Bluesky icon to appear immediately after your Instagram icon for example, you will want to find the Instagram block of code, which looks like this:

  {%- if settings.social_instagram_link != blank -%}
    <li class="list-social__item">
      <a href="{{ settings.social_instagram_link }}" class="link list-social__link">
        {%- render 'icon-instagram' -%}
        <span class="visually-hidden">{{ 'general.social.links.instagram' | t }}</span>
      </a>
    </li>
  {%- endif -%}

Immediately following this block, add this new block for Bluesky:

  {%- if settings.social_bluesky_link != blank -%}
    <li class="list-social__item">
      <a href="{{ settings.social_bluesky_link }}" class="link list-social__link">
        {%- render 'icon-bluesky' -%}
        <span class="visually-hidden">{{ 'general.social.links.bluesky' | t }}</span>
      </a>
    </li>
  {%- endif -%}

Save the file. You're finished except for any visual tweaks! I made one small tweak - my butterfly icon was appearing just slighly higher than the other social media icons in my list, so I added a tiny bit of extra code to nudge it down a bit! To do that I changed this line (from what we just added):

    <li class="list-social__item">

To be this instead:

    <li class="list-social__item" style="padding-top:3px;">

Change the "3px" to be a different number to try nudging more or less to get it right for you.

Found this useful?

If this guide has helped you please leave a comment to let me know :) If it's really helped you, or you're just feeling generous, please consider buying me a coffee via Ko-Fi as a thank you - or buy an item from this website.

If you want to suggest other things you'd like me to write a Shopify guide about please let me know!

 icons (7)