How to add TikTok i...
 
Notifications
Clear all

How to add TikTok icon to Debut theme on Shopify

13 Posts
9 Users
0 Reactions
2,723 Views
plaktheme
(@plaktheme)
Reputable Member
Joined: 5 years ago
Posts: 0
Topic starter  

Hi,

In order to add TikTok icon to the footer of Debut theme, please follow these steps :

 

 

  • From your Shopify dashboard, click Online store > Actions > Edit code
  • Open the file footer.liquid
  • Add this code at the very top
 <style>
.icon-tiktok svg {
display: flex;
vertical-align: middle;
width: 25px;
height: 25px;
  
}
</style>

 

 

  • Just before this code
{%- if request.page_type == 'blog' or request.page_type == 'article' -%}
  • Add the following one
<li class="social-icons__item">
<a class="social-icons__link" href="https://www.tiktok.com/@YOUR-USERNAME" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Tiktok' }}" target="_blank" aria-describedby="a11y-new-window-external-message">
<span class="icon-tiktok " aria-hidden="true">{% include 'tiktok-logo' %}</span>
</a>
</li>

 

  • Replace the YOUR-USERNAME in the code you have just inserted with your actual TikTok username
  • Click Save
  • Under Snippets, click Add a new snippet
  • Name it tiktok-logo
  • Insert the following code
 <svg width="250px" height="250px" viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg"><g clip-rule="evenodd" fill-rule="evenodd"><path d="M25 0h200c13.808 0 25 11.192 25 25v200c0 13.808-11.192 25-25 25H25c-13.808 0-25-11.192-25-25V25C0 11.192 11.192 0 25 0z" fill="#010101"/><path d="M156.98 230c7.607 0 13.774-6.117 13.774-13.662s-6.167-13.663-13.774-13.663h-2.075c7.607 0 13.774 6.118 13.774 13.663S162.512 230 154.905 230z" fill="#ee1d51"/><path d="M154.717 202.675h-2.075c-7.607 0-13.775 6.118-13.775 13.663S145.035 230 152.642 230h2.075c-7.608 0-13.775-6.117-13.775-13.662s6.167-13.663 13.775-13.663z" fill="#66c8cf"/><ellipse cx="154.811" cy="216.338" fill="#010101" rx="6.699" ry="6.643"/><path d="M50 196.5v6.925h8.112v26.388h8.115v-26.201h6.603l2.264-7.112zm66.415 0v6.925h8.112v26.388h8.115v-26.201h6.603l2.264-7.112zm-39.81 3.93c0-2.17 1.771-3.93 3.959-3.93 2.19 0 3.963 1.76 3.963 3.93s-1.772 3.93-3.963 3.93c-2.188-.001-3.959-1.76-3.959-3.93zm0 6.738h7.922v22.645h-7.922zM87.924 196.5v33.313h7.925v-8.608l2.453-2.248L106.037 230h8.49l-11.133-16.095 10-9.733h-9.622l-7.923 7.86V196.5zm85.47 0v33.313h7.926v-8.608l2.452-2.248L191.509 230H200l-11.133-16.095 10-9.733h-9.622l-7.925 7.86V196.5z" fill="#fff"/><path d="M161.167 81.186c10.944 7.819 24.352 12.42 38.832 12.42V65.755a39.26 39.26 0 0 1-8.155-.853v21.923c-14.479 0-27.885-4.601-38.832-12.42v56.835c0 28.432-23.06 51.479-51.505 51.479-10.613 0-20.478-3.207-28.673-8.707C82.187 183.57 95.23 189.5 109.66 189.5c28.447 0 51.508-23.047 51.508-51.48V81.186zm10.06-28.098c-5.593-6.107-9.265-14-10.06-22.726V26.78h-7.728c1.945 11.09 8.58 20.565 17.788 26.308zm-80.402 99.107a23.445 23.445 0 0 1-4.806-14.256c0-13.004 10.548-23.547 23.561-23.547a23.6 23.6 0 0 1 7.147 1.103V87.022a51.97 51.97 0 0 0-8.152-.469v22.162a23.619 23.619 0 0 0-7.15-1.103c-13.013 0-23.56 10.543-23.56 23.548 0 9.195 5.272 17.157 12.96 21.035z" fill="#ee1d52"/><path d="M153.012 74.405c10.947 7.819 24.353 12.42 38.832 12.42V64.902c-8.082-1.72-15.237-5.942-20.617-11.814-9.208-5.743-15.843-15.218-17.788-26.308H133.14v111.239c-.046 12.968-10.576 23.468-23.561 23.468-7.652 0-14.45-3.645-18.755-9.292-7.688-3.878-12.96-11.84-12.96-21.035 0-13.005 10.547-23.548 23.56-23.548 2.493 0 4.896.388 7.15 1.103V86.553c-27.945.577-50.42 23.399-50.42 51.467 0 14.011 5.597 26.713 14.68 35.993 8.195 5.5 18.06 8.707 28.673 8.707 28.445 0 51.505-23.048 51.505-51.479z" fill="#fff"/><path d="M191.844 64.902v-5.928a38.84 38.84 0 0 1-20.617-5.887 38.948 38.948 0 0 0 20.617 11.815zM153.439 26.78a39.524 39.524 0 0 1-.427-3.198V20h-28.028v111.24c-.045 12.967-10.574 23.467-23.56 23.467-3.813 0-7.412-.904-10.6-2.512 4.305 5.647 11.103 9.292 18.755 9.292 12.984 0 23.515-10.5 23.561-23.468V26.78zm-44.864 59.773v-6.311a51.97 51.97 0 0 0-7.067-.479C73.06 79.763 50 102.811 50 131.24c0 17.824 9.063 33.532 22.835 42.772-9.083-9.28-14.68-21.982-14.68-35.993 0-28.067 22.474-50.889 50.42-51.466z" fill="#69c9d0"/><path d="M154.904 230c7.607 0 13.775-6.117 13.775-13.662s-6.168-13.663-13.775-13.663h-.188c-7.607 0-13.774 6.118-13.774 13.663S147.109 230 154.716 230zm-6.792-13.662c0-3.67 3-6.643 6.7-6.643 3.697 0 6.697 2.973 6.697 6.643s-3 6.645-6.697 6.645c-3.7-.001-6.7-2.975-6.7-6.645z" fill="#fff"/></g></svg>
  • Click Save

 

Feel free to reply to this topic if you need any further assistance with TikTok icon 🙂
Katrine

Katrine | Technical support at Plak, Scrowp & Vantout
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as a Solved Solution


   
Quote
Topic Tags
(@andie1994)
New Member
Joined: 3 years ago
Posts: 3
 

Hi! Could you also help to add tiktok logo for Boundless theme?


   
ReplyQuote
plaktheme
(@plaktheme)
Reputable Member
Joined: 5 years ago
Posts: 0
Topic starter  
Posted by: @andie1994

Hi! Could you also help to add tiktok logo for Boundless theme?

Hi Andie, 

here is a thread on how to add Tiktok icon to Boundless theme 🙂

Katrine | Technical support at Plak, Scrowp & Vantout
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as a Solved Solution


   
ReplyQuote
(@sfsfsfdf)
New Member
Joined: 3 years ago
Posts: 4
 

Hi,

The snippet only seems to add a black box. Are you able to provide an updated link for the tik tok icon?

 


   
ReplyQuote
(@sfsfsfdf)
New Member
Joined: 3 years ago
Posts: 4
 

HI, how can I have the icon match the instagram icon look on the debut theme?


   
ReplyQuote
Jasmine Keinsh
(@plakadmin)
Estimable Member Admin
Joined: 4 years ago
Posts: 131
 
Posted by: @sfsfsfdf

HI, how can I have the icon match the instagram icon look on the debut theme?

Hi there,

Could you please share your site link or the Debut demo with the Instagram icon, so we can assist you with suitable Tiktok icon ?

Thanks in advance

Jasmine | Plak theme support
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as a Solved Solution


   
ReplyQuote
(@sfsfsfdf)
New Member
Joined: 3 years ago
Posts: 4

   
ReplyQuote
Jasmine Keinsh
(@plakadmin)
Estimable Member Admin
Joined: 4 years ago
Posts: 131
 
Posted by: @sfsfsfdf

@plakadmin https://itsthequestiongame.com

Thanks for providing the link.

After checking your store and in order to change the Tiktok icon colors to fit your current footer colors, I invite you to change the snippet (titok-logo.liquid) code to this one and click Save :

 

<svg width="250px" height="250px" viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
<g clip-rule="evenodd" fill-rule="evenodd">
<path d="M25 0h200c13.808 0 25 11.192 25 25v200c0 13.808-11.192 25-25 25H25c-13.808 0-25-11.192-25-25V25C0 11.192 11.192 0 25 0z" fill="#FFEF00"/>
<path d="M156.98 230c7.607 0 13.774-6.117 13.774-13.662s-6.167-13.663-13.774-13.663h-2.075c7.607 0 13.774 6.118 13.774 13.663S162.512 230 154.905 230z" fill="#ee1d51"/>
<path d="M154.717 202.675h-2.075c-7.607 0-13.775 6.118-13.775 13.663S145.035 230 152.642 230h2.075c-7.608 0-13.775-6.117-13.775-13.662s6.167-13.663 13.775-13.663z" fill="#66c8cf"/>
<ellipse cx="154.811" cy="216.338" fill="#010101" rx="6.699" ry="6.643"/>
<path d="M50 196.5v6.925h8.112v26.388h8.115v-26.201h6.603l2.264-7.112zm66.415 0v6.925h8.112v26.388h8.115v-26.201h6.603l2.264-7.112zm-39.81 3.93c0-2.17 1.771-3.93 3.959-3.93 2.19 0 3.963 1.76 3.963 3.93s-1.772 3.93-3.963 3.93c-2.188-.001-3.959-1.76-3.959-3.93zm0 6.738h7.922v22.645h-7.922zM87.924 196.5v33.313h7.925v-8.608l2.453-2.248L106.037 230h8.49l-11.133-16.095 10-9.733h-9.622l-7.923 7.86V196.5zm85.47 0v33.313h7.926v-8.608l2.452-2.248L191.509 230H200l-11.133-16.095 10-9.733h-9.622l-7.925 7.86V196.5z" fill="#000000"/>
<path d="M161.167 81.186c10.944 7.819 24.352 12.42 38.832 12.42V65.755a39.26 39.26 0 0 1-8.155-.853v21.923c-14.479 0-27.885-4.601-38.832-12.42v56.835c0 28.432-23.06 51.479-51.505 51.479-10.613 0-20.478-3.207-28.673-8.707C82.187 183.57 95.23 189.5 109.66 189.5c28.447 0 51.508-23.047 51.508-51.48V81.186zm10.06-28.098c-5.593-6.107-9.265-14-10.06-22.726V26.78h-7.728c1.945 11.09 8.58 20.565 17.788 26.308zm-80.402 99.107a23.445 23.445 0 0 1-4.806-14.256c0-13.004 10.548-23.547 23.561-23.547a23.6 23.6 0 0 1 7.147 1.103V87.022a51.97 51.97 0 0 0-8.152-.469v22.162a23.619 23.619 0 0 0-7.15-1.103c-13.013 0-23.56 10.543-23.56 23.548 0 9.195 5.272 17.157 12.96 21.035z" fill="#ee1d52"/>
<path d="M153.012 74.405c10.947 7.819 24.353 12.42 38.832 12.42V64.902c-8.082-1.72-15.237-5.942-20.617-11.814-9.208-5.743-15.843-15.218-17.788-26.308H133.14v111.239c-.046 12.968-10.576 23.468-23.561 23.468-7.652 0-14.45-3.645-18.755-9.292-7.688-3.878-12.96-11.84-12.96-21.035 0-13.005 10.547-23.548 23.56-23.548 2.493 0 4.896.388 7.15 1.103V86.553c-27.945.577-50.42 23.399-50.42 51.467 0 14.011 5.597 26.713 14.68 35.993 8.195 5.5 18.06 8.707 28.673 8.707 28.445 0 51.505-23.048 51.505-51.479z" fill="#000000"/>
<path d="M191.844 64.902v-5.928a38.84 38.84 0 0 1-20.617-5.887 38.948 38.948 0 0 0 20.617 11.815zM153.439 26.78a39.524 39.524 0 0 1-.427-3.198V20h-28.028v111.24c-.045 12.967-10.574 23.467-23.56 23.467-3.813 0-7.412-.904-10.6-2.512 4.305 5.647 11.103 9.292 18.755 9.292 12.984 0 23.515-10.5 23.561-23.468V26.78zm-44.864 59.773v-6.311a51.97 51.97 0 0 0-7.067-.479C73.06 79.763 50 102.811 50 131.24c0 17.824 9.063 33.532 22.835 42.772-9.083-9.28-14.68-21.982-14.68-35.993 0-28.067 22.474-50.889 50.42-51.466z" fill="#69c9d0"/>
<path d="M154.904 230c7.607 0 13.775-6.117 13.775-13.662s-6.168-13.663-13.775-13.663h-.188c-7.607 0-13.774 6.118-13.774 13.663S147.109 230 154.716 230zm-6.792-13.662c0-3.67 3-6.643 6.7-6.643 3.697 0 6.697 2.973 6.697 6.643s-3 6.645-6.697 6.645c-3.7-.001-6.7-2.975-6.7-6.645z" fill="#fff"/>
</g>
</svg>

 

Since Debut theme is no longer provided by Shopify, if you need to do some extra customization, you can hireone our Shopify experts.

Kind regards,
Jasmine

 

Jasmine | Plak theme support
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as a Solved Solution


   
ReplyQuote
 Andy
(@andy)
New Member
Joined: 3 years ago
Posts: 2
 

Hi, how can I have the icon match other social icons' looks on the Debut theme? The colors of the footer are:

Background #282A41

Text #FFFFFF 

Thanks!

 


   
ReplyQuote
Jasmine Keinsh
(@plakadmin)
Estimable Member Admin
Joined: 4 years ago
Posts: 131
 

@andy can you share your store url where you want to change it?

Jasmine | Plak theme support
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as a Solved Solution


   
ReplyQuote
 Andy
(@andy)
New Member
Joined: 3 years ago
Posts: 2
 

@plakadmin hi!

I didn't publish the store yet, I will share the link when it's complete! 🙂

Thanks


   
ReplyQuote
Jasmine Keinsh
(@plakadmin)
Estimable Member Admin
Joined: 4 years ago
Posts: 131
 

Hi @andy, Not a problem. Please let us know once you can share your store url. We will be happy to help you with your query.

Jasmine | Plak theme support
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as a Solved Solution


   
ReplyQuote
(@sfsfsfdf)
New Member
Joined: 3 years ago
Posts: 4
 

@plakadmin is there a way to adjust the spacing so all three icons are aligned?

 


   
ReplyQuote
Share:

Welcome to the Shopify Forum Community provided by Plak ThemeLLC, a place where you can discuss about eCommerce and Shopify, solve technical issues, get help with Shopify Design, Apps integration, Marketing, Facebooks ad, Google ads and more.

Before posting, we invite you to read and follow the forum rules | We also support any questions related to Free Shopify themes :Dawn, Express, Minimal, Brooklyn, Narrative, Supply, Debut, Venture, Boundless and Simple