Narrative Theme - Add TikTok Logo Next to Other Default Social Logos

[ksachse]

Hello,

I'd like to add a TikTok logo next to my store's default social media logos in the footer and menu upper left.

URL: https://qol276egxutnlag5-27754201186.shopifypreview.com

I would prefer to use an SVG file, and wouldn't mind overriding an existing logo like Tumblr if need be.

Any thoughts on how to accomplish this?

[KetanKumar]

Thanks @ksachse 

Welcome to the Shopify community!
yes, is possible to as you like we are added code backend side so can you please assign me on you staff account so i will fix easy also provide SVG file if you have 

[ksachse]

Thank you for your quick reply.

I would like to try this on my own, first, considering my client has a limited budget.

[KetanKumar]

@ksachse 

it's ok for that nor a major change just minor code added don't very doesn't pay i have only added proper code that's it 

[ksachse]

Thank you. I do still want to learn how to do this. 

Can you guide me?

This would also be useful for anyone else who visits this post looking for help, too.

[KetanKumar]

give me code file so i will update and guide you

[ksachse]

Thanks! 

SVG code is:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6.11 6.11">
<defs><style>.cls-1{fill:#fff;}</style></defs>
<path class="cls-1" d="M.62,6,.4,5.88a.65.65,0,0,1-.28-.41V.6A.68.68,0,0,1,.63.12H5.51A.67.67,0,0,1,6,.65V5.49a.7.7,0,0,1-.52.5Z"/>
<path d="M5.48.25a.55.55,0,0,1,.38.41V5.45a.54.54,0,0,1-.41.41H.67l-.05,0L.46,5.78a.57.57,0,0,1-.21-.31V.63A.56.56,0,0,1,.63.25H5.48m0-.25H.6A.83.83,0,0,0,0,.6V5.51A.77.77,0,0,0,.34,6c.09,0,.19.08.28.12H5.49a.79.79,0,0,0,.62-.62V.62A.81.81,0,0,0,5.51,0Z"/>
<path class="cls-1" d="M3.21,1V2.3c0,.52,0,1.05,0,1.57a.64.64,0,0,1-.51.61A.64.64,0,0,1,2,4.13a.6.6,0,0,1,.16-.75,2.11,2.11,0,0,1,.48-.21V2.62H2.53a1.22,1.22,0,0,0-1.11.73,1.17,1.17,0,0,0,.17,1.3A1.23,1.23,0,0,0,3,5a1.25,1.25,0,0,0,.83-1.18c0-.49,0-1,0-1.48,0,0,0-.09,0-.16a1.09,1.09,0,0,0,1,.45V2a1.13,1.13,0,0,1-1-1Z"/>
<path d="M2.54,5.22a1.33,1.33,0,0,1-1-.5,1.3,1.3,0,0,1-.18-1.43,1.33,1.33,0,0,1,1.21-.8H2.6l.11,0,0,.11v.64l-.07,0-.17.06a1.22,1.22,0,0,0-.28.13.48.48,0,0,0-.13.59.5.5,0,0,0,.57.28.5.5,0,0,0,.42-.48v-3h.81l0,.1a1,1,0,0,0,.9.88h.11v.9H4.81a1.24,1.24,0,0,1-.89-.28V3.85A1.38,1.38,0,0,1,3,5.14,1.24,1.24,0,0,1,2.54,5.22Zm0-2.48a1.07,1.07,0,0,0-1,.65,1,1,0,0,0,.15,1.17,1.08,1.08,0,0,0,1.23.35,1.14,1.14,0,0,0,.75-1.06V2.26l0-.38.21.25a1,1,0,0,0,.77.41V2.1a1.23,1.23,0,0,1-1-1H3.33V3.87a.78.78,0,0,1-.61.73.75.75,0,0,1-.85-.42.72.72,0,0,1,.2-.9,1.17,1.17,0,0,1,.34-.16l.08,0Z"/>
</svg>

[KetanKumar]

@ksachse 

Thanks for code 

i need also social medic icon code can fine social-media snippet 

[ksachse]

Thanks! Let’s use/replace the Tumblr code for this. I grabbed the below code from Snippets > social-links.liquid

  {%- if settings.social_tumblr_link != blank -%}
    <li>
      <a class="icon-fallback-text" href="{{ settings.social_tumblr_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Tumblr' }}" target="_blank" aria-describedby="a11y-new-window-external-message">
        <span class="icon icon-tumblr" aria-hidden="true"></span>
        <span class="fallback-text">Tumblr</span>
      </a>
    </li>
  {%- endif -%}

[KetanKumar]

@ksachse 

Thanks for more details 

can i check your back end code so i will easy to fix so 

I need your store login details. Yes, I know your login details are confidential. For this second option, I have added your store to my Shopify partner account so I will check your code easily and manage what you think about it?