How to add Tiktok icon alongside the rest of the social buttons (Using Shopify Turbo theme)?

[Dollies40]

Hey all,

I'd like to add a Tiktok logo to the rest of the social media icons. Basically, the theme already comes with some built in social icons for a number of different platforms, unfortunately, tiktok isn't one of them 😞

These tend to appear in both the header and footer of the website. I'm assuming I'm going to have to tinker around with the code, which is fine, just need some advice on how to go about doing this. 

Thanks in advance!

[diego_ezfy]

@Dollies40 

It's certainly possible to achieve what you are after, but it would require some custom coding, I'm afraid that there is no simple copy/paste solution.

Perhaps someone around here will be kind enough to devote their time to get it coded in for you, however if it's something you would like to get done quickly you'd be better off hiring a dev to code it in or double check whether Out of The Sandbox can custom code it in for you.

Kind regards,
Diego

[Dollies40]

Thank you for your reply. 

That isn't ideal. It's quite disappointing actually. I'm beginning to find restrictions for something I feel should be relatively straightforward. That said, I'll try to contact out of the box and see if they can help. 

I appreciate your input however!

[Cosmichealing]

HI Dollies40,

Any luck with contacting support?

[PaulNewton]

@Cosmichealing use search "add tiktok icon" "add social icon" etc

https://community.shopify.com/c/forums/searchpage/tab/message?filter=location&q=add%20tiktok%20icon&... 

Implementation will vary wildly based on theme and image formats.

Or contact someone to buy the customization.

[Dollies40]

Unfortunately not! wasn't much help at all

[VincentHTM]

Hi @Dollies40 I've added the Tiktok icon for one of our clients (https://surfisurus.com/), so here is the easiest way to do it:

Go to your Shopify Backend, Online Store -> Themes -> Actions -> Edit code.

Then search for 'social' and click on the social-icons.liquid file. (See screenshot bellow)
Add the following code snippet wherever you want the Tiktok logo to be seen:

<li><a href="YOUR TIKTOK URL" title="YOUR TITLE" rel="me" target="_blank" class=""><img src="THE TIKTOK ICON URL FROM YOUR SHOPIFY SETTINGS" style="
width: 20px;
"></a></li> 

To get your Tiktok icon link, simply go to your admin dashboard: Settings -> Files -> And then add your Tiktok png file (should be 100px square). Then copy and paste the link in the code snippet.

And you're good to go!

Our agencies: https://ecommerceforprofit.com/ and https://www.hangtenmedia.com/

Cheers.

[KarmaEDV]

Since there is no easy way but coding my quick and dirty but working solution was to hard-code at the right position (for me in the file "social-icons.liquid") in the theme like that:

<li>

<a href="https://www.tiktok.com/@username" title="{{ shop.name }} on TikTok" rel="me" target="_blank" class="icon-xxx">
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><style>svg{fill:#ff0000}</style>
<path d="M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z"/></svg>
</a>
</li>