Login

Country

Cart

Your cart is empty

Article: Behind the Build: Adding Bluesky to Your Shopify Theme (Prestige)

Add Bluesky to Your Shopify Theme

Behind the Build: Adding Bluesky to Your Shopify Theme (Prestige)

Add Bluesky to Your Shopify Store in 6 Steps!

Welcome to Behind the Build, practical Shopify solutions by LightForce Laser Engraving. Each post walks through something we’ve actually done in our own Shopify store—whether it's a layout tweak, a theme fix, or a customization that helped things run more smoothly. We're small business owners, not developers, and we believe in helping each other grow by sharing what works.

In our first post, we’ll show you how we added a Bluesky social media icon to both our footer and our blog/product share buttons using the Prestige theme—without using any apps or hiring a developer. If you find it helpful or if you can build on this with other suggestions, please feel free to leave a comment.

Disclaimer: We’re not Shopify developers — just a small business sharing what’s worked for us. Every theme is a little different, so your results may vary. Always back up your theme before making any changes, and test edits in a duplicate (unpublished) theme when possible.

Important: Theme updates may erase your customizations. You may need to repeat this process after updating your theme.

✅ Step 1: Download and Upload the Bluesky Icon

  1. Visit uxwing.com/bluesky-icon and download the SVG version of the Bluesky icon.
  2. In your Shopify admin, go to Online Store > Themes > Actions > Edit code.
  3. Click the Assets folder in the sidebar.
  4. Click Add a new asset and upload your SVG file.
  5. Rename it: bluesky-icon.svg

✅ Step 2: Add the Icon to Your Social Media Footer

  1. Still in the code editor, open: snippets/social-media.liquid
  2. Find where the other social icons are listed (Facebook, Twitter, etc.).
  3. Paste the following code after the Twitter block:
{%- if settings.social_bluesky != blank -%}
  <li class="social-media__item branding-colors--bluesky">
    <a href="{{ settings.social_bluesky }}" class="tap-area" target="_blank" rel="noopener" aria-label="Follow us on Bluesky">
      <img src="{{ 'bluesky-icon.svg' | asset_url }}" alt="Bluesky" width="24" height="24" style="display: block; margin: 0 auto;">
    </a>
  </li>
{%- endif -%}

✅ Step 3: Add a Theme Setting for the Bluesky Link

  1. Open: config/settings_schema.json
  2. Search for the section labeled "Social media".
  3. Paste the following line below the Twitter entry:
{
  "type": "url",
  "id": "social_bluesky",
  "label": "Bluesky"
},

Tip: Don’t forget a comma at the end unless it’s the last item in the list.

✅ Step 4: Add Your Bluesky Profile Link

  1. Go to Online Store > Themes.
  2. Click the Customize button for your live theme.
  3. Click the ⚙️ gear icon in the bottom-left corner of the editor.
  4. Select Social media.
  5. Paste your Bluesky profile URL:
    https://bsky.app/profile/yourhandle.bsky.social
  6. Click Save.

✅ Step 5: Enable the Footer Icon

  1. Still in the Theme Editor, scroll to the Footer section under the Home page view.
  2. Click the Footer block.
  3. Toggle “Show social media icons” to ON.
  4. Click Save.

Your Bluesky icon should now appear next to your other social icons in the footer — fully clickable and styled in blue.

✅ Step 6: Add a Bluesky Share Button to Blogs & Products

  1. Open: snippets/share-buttons.liquid
  2. Find the list items for Facebook and Twitter.
  3. Paste the following code block right after Twitter:
<li class="social-media__item branding-colors--bluesky">
  {%- capture share_url -%}
    https://bsky.app/intent/compose?text={{ title | url_param_escape }}%20{{ url | url_param_escape }}
  {%- endcapture -%}
  <a href="{{ share_url }}" aria-label="Share on Bluesky" target="_blank" rel="noopener" class="tap-area">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 511.999 452.266" width="20" height="20" style="display: block; margin: 0 auto;">
      <path fill="#0085FF" fill-rule="nonzero" d="M110.985 30.442c58.695 44.217 121.837 133.856 145.013 181.961 23.176-48.105 86.322-137.744 145.016-181.961 42.361-31.897 110.985-56.584 110.985 21.96 0 15.681-8.962 131.776-14.223 150.628-18.272 65.516-84.873 82.228-144.112 72.116 103.55 17.68 129.889 76.238 73 134.8-108.04 111.223-155.288-27.905-167.385-63.554-3.489-10.262-2.991-10.498-6.561 0-12.098 35.649-59.342 174.777-167.382 63.554-56.89-58.562-30.551-117.12 72.999-134.8-59.239 10.112-125.84-6.6-144.112-72.116C8.962 184.178 0 68.083 0 52.402c0-78.544 68.633-53.857 110.985-21.96z"/>
    </svg>
  </a>
</li>

Tip: This lets customers share your blog post or product page directly to their own Bluesky account. The post will automatically include your page title and a clickable link to your store.

✨ That’s It!

You’ve successfully added Bluesky to your Shopify store using the Prestige theme — both as a footer icon and as a share button for your blog posts and product pages. No apps. No extra tools.

If you found this helpful, tag us on Bluesky and let’s keep building better shops together. 🛠️

Share