Notifications
Clear all
Topic starter
27/01/2021 8:17 pm
Hi all,
Could you tell me how do I do to add the Tiktok icon to the footer of my Shopify store please ?
I searched on other forums but I couldn't find something that actually works as I am using Plak theme.
Thanks in advance
Jessy
Love is the flower you've got to let grow
27/01/2021 8:37 pm
Hi @jessy
Jasmine here from Plak theme to help you adding the TikTok icon to your Plak theme footer.
Spoiler
Step 1
- From Your Shopify dashboard, click Online store > Actions > Edit code
- Open the file footer.liquid
- At the very top, add the following code
<style>
.icon-tiktok svg {
display: flex;
vertical-align: middle;
width: 30px;
height: 30px;
}
</style>
- Click Save
Spoiler
Step 2
- 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
Spoiler
Step 3
- Open the file footer.liquid
- Insert the following code where the TikTok icon will appear (in this example it will appear between Facebook & Twitter icons)
<li>
<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
Let me know if this worked for you
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
jessy reacted
Topic starter
27/01/2021 9:08 pm
Oh wow Jasmine you're a champ, thank you so much it worked like a charm 😍 😍
This post was modified 4 years ago by jessy
Love is the flower you've got to let grow
10/02/2021 9:30 pm
Hi @Plakadmin
Thanks for explaining the above. How can I increase the spacing between the TikTok icon and the other icons to be more uniform spacing?
Thanks
10/02/2021 9:50 pm
Hi @Plakadmin
Thanks for explaining the above. How can I increase the spacing between the TikTok icon and the other icons to be more uniform spacing?
Thanks
Hi @tom121
You can add left & right spacing by changing the code at STEP1 to this one :
<style>
.icon-tiktok svg {
content: "";
display: flex !important;
vertical-align: middle;
width: 30px;
height: 30px;
background-size: cover;
margin-left : 20px;
margin-right: 20px;
}
</style>
The 2 lines I added to this code (that controls the left & right spacing) are :
margin-left : 20px;
margin-right: 20px;
Change these value until you get the correct spacing
Kind regards,
Jasmine
This post was modified 4 years ago by Jasmine Keinsh
Jasmine | Plak theme support
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as a Solved Solution
15/05/2021 10:30 am
I tried pasting code in different places but it isn't setting well where I need it. Also the codes of social media are in a row continuously and not as you've shown in the picture. Please help!
Thanks
15/05/2021 1:09 pm
I tried pasting code in different places but it isn't setting well where I need it. Also the codes of social media are in a row continuously and not as you've shown in the picture. Please help!
Thanks
Could you tell me which theme are you using please ?
15/05/2021 1:47 pm
@plaktheme minimal-free theme
The code mentioned in this thread is suitable for themes from PlakTheme, as we don't support themes other than our themes (Plak, Grass & Sly), I invite you to post your request on the official Shopify forum to get an answer from Shopify staff
Best regards,
Katrine
15/05/2021 9:56 pm
I see thank you for the help, really appreciated it.
Jasmine Keinsh and plaktheme reacted
14/09/2021 6:34 pm
@plakadmin I tried your code in impulse theme and it is working fine. The problem is that when I click on icon it's redirects me to this url https://warmyinternational.com/www.tiktok.com/@warmy.tiktok but i want it to be redirected to www.tiktok.com/@warmy.tiktok. Any help please
15/09/2021 11:38 am
@plakadmin I tried your code in impulse theme and it is working fine. The problem is that when I click on icon it's redirects me to this url https://warmyinternational.com/www.tiktok.com/@warmy.tiktok but i want it to be redirected to www.tiktok.com/@warmy.tiktok. Any help please
Hi khubaiba,
Since you are using a theme not related to ours and not related to Free Shopify themes, I invite you to contact your theme provider support directly
Kind regards,
Katrine
17/10/2021 10:29 am
I tried pasting code in different places but it isn't setting well where I need it. Also the codes of social media are in a row continuously and not as you've shown in the picture. Please help!
Thanks
Hi,
I just want to let you know that we support questions related to Free Shopify themes, and here is a tutorial on how to add the TikTik icon to Minimal theme
Katrine
17/11/2021 3:03 am
Hi! this worked! but how do I resize the icon? i tried adjusting the height and width, but it didn't change at all.
also, if its not too much trouble, how can I match it to my icon's theme? if not its ok.
Page 1 / 2
Next
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