Add TikTok Icon to Social Media Icons in Footer for Split Theme in Shopify

  1. In the backend click on Online Store.
  2. Beside your live theme, click the Actions button -> Edit Code
  3. Scroll down the sidebar to the Config section and click on settings_schema.json
  4. Once loaded, scroll down to the social media section
  5. Add a section here for tiktok. This will make the input field appear in the theme settings:
                        
    
          {
            "type": "text",
            "id": "social_tiktok",
            "label": "TikTok",
            "info": "https:\/\/www.tiktok.com"
          },

     

    This is where I chose to insert it:

    Click on Save when you are done.

  6. Under Snippets, open up social-icons.liquid
  7. Find the spot in the code where you want to put the tiktok icon. You will want to consider that where you put the code will affect the order of the icons on the front end. Paste this code for the TikTok icon:
                        

      	{%- if settings.social_tiktok != '' -%}
    		<a href="{{ settings.social_tiktok | escape }}" target="_blank" aria-label="Tiktok"><span class="icon {{ size }}" aria-hidden="true">{% render 'theme-symbols', icon: 'social_tiktok' %}</span></a>
    	{% endif %}

  8. Now you will need to add the TikTok icon itself. Under Snippets, click on theme-symbols.liquid
  9. Paste this code into the file:
                        

    {%- elsif icon == 'social_tiktok' -%}
    <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
    <g>
    	<path class="st0" d="M480.3,128.4c-29.2,0-56.2-9.7-77.8-26c-24.8-18.7-42.7-46.2-49-77.8c-1.6-7.8-2.4-15.9-2.5-24.2h-83.5v228.1
    		l-0.1,124.9c0,33.4-21.8,61.7-51.9,71.7c-8.8,2.9-18.2,4.3-28,3.7c-12.6-0.7-24.3-4.5-34.6-10.6c-21.8-13-36.5-36.6-36.9-63.7
    		c-0.6-42.2,33.5-76.7,75.7-76.7c8.3,0,16.3,1.4,23.8,3.8v-62.3V197c-7.9-1.2-15.9-1.8-24.1-1.8c-46.2,0-89.4,19.2-120.3,53.8
    		c-23.3,26.1-37.3,59.5-39.5,94.5c-2.8,45.9,14,89.6,46.6,121.8c4.8,4.7,9.8,9.1,15.1,13.2c28,21.5,62.1,33.2,98.1,33.2
    		c8.1,0,16.2-0.6,24.1-1.8c33.6-5,64.6-20.4,89.1-44.6c30.1-29.7,46.7-69.2,46.9-111.2l-0.4-186.6c14.4,11.1,30,20.2,46.9,27.3
    		c26.2,11.1,54,16.6,82.5,16.6v-60.6v-22.5C480.6,128.4,480.3,128.4,480.3,128.4L480.3,128.4z"/>
    </g>
    </svg>

    You can replace the svg code above with the code for any svg you want to use to represent the TikTok icon.

    Make sure you paste it before the endif tag. This is where I pasted it in my file:

    Click Save when you are done.

  10. Now all you need to do is go add the URL in the front end. Click on Online Store in the side menu
  11. Beside the Live Theme, click on the Customize Button.
  12. In the left side menu click on “Theme Settings” at the very bottom
  13. On the right side of the screen click on “Social Media” under Theme Settings and expand the options.
  14. Find the TikTok text input field and enter the URL for the TikTok account.
  15. Click on Save.
  16. Your TikTok icon should now be live!

     

Leave a Reply

Your email address will not be published. Required fields are marked *