Solved

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

Jokerdomme
Tourist
30 0 0

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:


Screenshot_42.png

 

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


Screenshot_43.png

 

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:

 

Screenshot_44.png

 

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

Accepted Solution (1)
deepaksharma
Shopify Partner
448 63 94

This is an accepted solution.

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

deepaksharma_0-1709809957238.png

 

 

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

deepaksharma_1-1709809984459.png

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.

Deepak Sharma || Shopify Developer || Helping eCommerce Stores
- Was my reply helpful? Accept it as solution
- Was your question answered? Mark it as an Accepted Solution.
-CHAT ON WHATSAPP | BUY ME A COFFEE | MAIL ME: ds2305187@gmail.com

View solution in original post

Replies 9 (9)

deepaksharma
Shopify Partner
448 63 94

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!

Deepak Sharma || Shopify Developer || Helping eCommerce Stores
- Was my reply helpful? Accept it as solution
- Was your question answered? Mark it as an Accepted Solution.
-CHAT ON WHATSAPP | BUY ME A COFFEE | MAIL ME: ds2305187@gmail.com
Jokerdomme
Tourist
30 0 0

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
Shopify Partner
448 63 94

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.

Deepak Sharma || Shopify Developer || Helping eCommerce Stores
- Was my reply helpful? Accept it as solution
- Was your question answered? Mark it as an Accepted Solution.
-CHAT ON WHATSAPP | BUY ME A COFFEE | MAIL ME: ds2305187@gmail.com
Jokerdomme
Tourist
30 0 0

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
Shopify Partner
448 63 94

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.

deepaksharma_0-1709808724415.png

 

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.

Deepak Sharma || Shopify Developer || Helping eCommerce Stores
- Was my reply helpful? Accept it as solution
- Was your question answered? Mark it as an Accepted Solution.
-CHAT ON WHATSAPP | BUY ME A COFFEE | MAIL ME: ds2305187@gmail.com
Jokerdomme
Tourist
30 0 0

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
Shopify Partner
448 63 94

This is an accepted solution.

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

deepaksharma_0-1709809957238.png

 

 

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

deepaksharma_1-1709809984459.png

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.

Deepak Sharma || Shopify Developer || Helping eCommerce Stores
- Was my reply helpful? Accept it as solution
- Was your question answered? Mark it as an Accepted Solution.
-CHAT ON WHATSAPP | BUY ME A COFFEE | MAIL ME: ds2305187@gmail.com
deepaksharma
Shopify Partner
448 63 94

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

deepaksharma_0-1709812634601.png

 

Deepak Sharma || Shopify Developer || Helping eCommerce Stores
- Was my reply helpful? Accept it as solution
- Was your question answered? Mark it as an Accepted Solution.
-CHAT ON WHATSAPP | BUY ME A COFFEE | MAIL ME: ds2305187@gmail.com
Jokerdomme
Tourist
30 0 0

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.