Add Social Media (TikTok Icon) via Code - Fast help please!

[Jokerdomme]

Hello,

somehow my Theme I can display all the socials in the footer if I go to my Theme > customize > Theme settings. As shown in the Screenshot here:

If I go the the mobile version of my website same goes for the footer here. Every social is listed correctly:

But the problem is now I got an hamburger Icon on the mobile version in the header at the top left. If I click this the Theme settings somehow doesnt show TikTok anymore. So There is no link I can put for TikTok but for all the other socials there is the Icon and the link I can connect there. But somehow only TikTok is missing as shown in the Screenshot here:

So how is it possible to put the TikTok Icon as shown in the Screenshot above besides the instagram icon?

Do I need to Code that? If yes where do I put this code and how do I code it?

Website link: www.sixtwonine.de

[deepaksharma]

Hello there @Jokerdomme 

You can paste the below code and in the href you can place the link to your tiktok homepage

 <a href="your-tiktok-link" target="_blank" rel="noopener" aria-label="TikTok">
         <svg
      fill="none"
      focusable="false"
      width="14"
      height="16"
      viewBox="0 0 14 16"
    >
      <path d="M13.6893 6.47331C13.5586 6.48602 13.4273 6.49268 13.296 6.49327C11.8552 6.49347 10.5114 5.76723 9.72211 4.56182V11.1389C9.72211 13.8236 7.54571 16 4.86099 16C2.17627 16 -0.00012207 13.8236 -0.00012207 11.1389C-0.00012207 8.45417 2.17627 6.27777 4.86099 6.27777C4.96247 6.27777 5.06166 6.28689 5.16143 6.29317V8.68866C5.06166 8.67669 4.96361 8.65845 4.86099 8.65845C3.49077 8.65845 2.37998 9.76923 2.37998 11.1395C2.37998 12.5097 3.49077 13.6205 4.86099 13.6205C6.23148 13.6205 7.44177 12.5407 7.44177 11.1702L7.46571 0H9.75745C9.97355 2.05512 11.6307 3.66035 13.6916 3.81102V6.47331" fill="currentColor"></path>
    </svg>
      </a>

If you are unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully, it will help you. If yes then Please don't forget to hit Like and Mark it as the solution!

[Jokerdomme]

Thanks for the answer @deepaksharma but where exactly do I have to put the code? In the header.liquid or theme.liquid or somewhere else?

[deepaksharma]

Hey @Jokerdomme I visited your website and saw the tiktok icon there if my answer was helpful can you mark my answer as solution and give me a like thanks.

[Jokerdomme]

I haven't made any changes to my website, so the issue persists. I don't think you read or understood my problem correctly. The TikTok icon is always present in the footer, and everything works there as I described earlier. The problem arises in the mobile version when you open the menu at the top left; as shown in the last screenshot I posted, the TikTok icon should be visible. That's the issue that isn't functioning. If you help me with this problem, I'll gladly give you a thumbs up and mark this post as the solution, and you'll get a bonus on top 🙂

[deepaksharma]

Sorry for that

if you are familiar with codes or perhaps may able to find it you will have to place the code in mobile-nav__social

see below screenshot the instagram code is there but tiktok is not.

it is not a css error it is more like there must be different setting for mobile nav social somewhere, or there may be chance that it was never coded in the theme file.

You can hire a trust worthy developer to make the job done even me.

[Jokerdomme]

I can't find the folder or the file in my code. I've already checked all header files, but I couldn't find 'mobile-nav__social' anywhere

[deepaksharma · Accepted solution]

You can use a chrome extension EZFY to track the class easily

If you are using chrome go to this website and install this extension

After installing successfully refresh the code page and then this will be available and use this to find the code easily

Make sure to create duplicate Your theme file. Coding without any coding knowledge can mess up your store.

[deepaksharma]

hey I just visited your website the footer elements are getting doubled you should check the media query

the error is showing for display width from 481 to 749

[Jokerdomme]

Yes I already know it. And I know which part of the code is doing that but somehow I couldnt fix that yet to be honest.