Shopify themes, liquid, logos, and UX
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?
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 </head> 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):
<i class="fab fa-mastodon"></i>
or
<i class="fa-brands fa-mastodon"></i>
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.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025