Can I add a TikTok icon to my Debut theme footer with custom HTML?

Store Design

Topic summary

Goal: Add a TikTok icon to the Debut theme footer’s “Follow us” section so it matches other social icons in color and size.

What was tried:

  • Guidance provided to edit theme files: add code in theme.liquid (before ) and add a TikTok entry in footer.liquid after the social icons loop ({% endfor %}), with the href set to the store’s TikTok URL.
  • This successfully displayed a TikTok icon/link, but it was vertically misaligned compared to other icons.

Latest update/fix:

  • A community member shared a working alignment tweak by editing the element in footer.liquid:
    • Add inline CSS margin-top: 2px; to nudge the icon down.
    • Use a consistent size (e.g., font-size: 20px) and set the color to match others.
    • Example structure used Font Awesome classes (fa-brands fa-tiktok) inside the social icon list item.

Status:

  • A practical CSS adjustment was provided to align the TikTok icon with others. No explicit confirmation of final resolution from the original poster.

Notes:

  • Screenshots were shared and are central to the alignment issue and visual comparison.
Summarized with AI on January 8. AI used: gpt-5.
1

Hello!

I was wondering if there was a way with custom HTML to add in a TikTok icon to the follow us section in the footer of my site next to the other social icons so that it matches the other social icons colour and size wise.

I have included an image of that section and the icons.

Thanks

Rhys

tiktok icon footer ex.png
tiktok icon footer ex.png1323Ă—355 25.6 KB

2

Hello @lkidgell ,

I would like to give you some recommendations to support you:

  1. Go to Online Store → Theme → Edit code
  2. Open your theme.liquid theme file
  3. Paste the below code before

GemPages_0-1669084176254.png
GemPages_0-1669084176254.png1915Ă—964 78.1 KB

  1. Open your footer.liquid theme file

  2. Paste the below code after {%- endfor -%}

- [
                    
                      Tiktok
                    ](https://www.tiktok.com/en/)

GemPages_1-1669084365617.png
GemPages_1-1669084365617.png1913Ă—961 92.9 KB

*Let’s add your Tiktok URL to href attribute

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

1 Like
3

Hi @GemPages

Thank you for your assistance!

I have successfully been able to get the TikTok Icon in the footer with the code you provided, but the icon is not exactly in line with the other icons. is there a way to make it in line with the other icons (I have included an image of how it currently looks)

Thank you for your assistance so far

Screen Shot 2022-11-24 at 9.15.04 am.png
Screen Shot 2022-11-24 at 9.15.04 am.png484Ă—220 2.82 KB

4

Hello @lkidgell ,

Actually, you can paste your page URL here so that I can detect further and provide you with an even more detailed answer.

Best regards,
GemPages Support Team

5

The theme.liquid code was fine. but for the footer.liquid file:

In the style attribute of the element, I added margin-top: 2px; to lower the icon by 2 pixels. You can adjust the value as needed to achieve the desired vertical alignment. Feel free to experiment with different pixel values until you find the right adjustment. A pixel width and height of 20px worked for the image and sized it according to the others. Hope this helps people as it stumped me for a few hours before I figured it out. Good luck.

Here was my modifed code set:

  • Tiktok