I just wanna add Mastodon to my social links, but the theme doesn’t have Mastodon as an option. Is there a way to just manually do this in the code?
Topic summary
A user wants to add Mastodon to their store’s social media links, but their theme doesn’t include it as a built-in option.
Solution Provided:
Another user shared a workaround using FontAwesome icons:
- Add FontAwesome CSS library to the theme.js file before the
</head>tag - Insert specific FontAwesome icon code (either
<i>or<a>tag format) in the appropriate liquid file (social-icons.liquid or footer.liquid) - Adjust CSS attributes like size, text-decoration, and height as needed
Current Status:
The discussion includes working code snippets and reference links to StackOverflow and W3Schools for implementation guidance. One commenter expressed hesitation about modifying theme code and hopes Shopify will add native Mastodon support in future updates.
1 Like
Nobody knows?
I’m kind of surprised that nobody knows how to do this…
I figured out how to add a Mastodon icon to my social icons using FontAwesome:
First, add this line to your theme.js file, just before the tag:
{{ '//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css' | stylesheet_tag }}
Then add one of these to the place in your code where you want it to appear (e.g. social-icons.liquid or footer.liquid):
or
Additionally, because I wasn’t using the render tag on the svg liquid files, I had to do some tweaking of the size and other CSS attributes, namely adding text-decoration:none and height: 44px to the a tag.
Source help docs used to solve this:
StackOverflow thread
More about formatting fontawesome fonts.
Would also love to know. I’m nervous about altering my Theme code and hope this becomes an option in future Shopify updates.