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

New Member
1 0 1

Hi Kailasachse

Idk why Ketan icon-tumblr.liquid  and then delete the SVG-Code which is already there and insert your new TikTok SVG-Code --> and you´re done

Haha, thank you! 

I dug into the code but no snippets specific to icon-tumblr.liquid.

I did switch tracks and start working in Minimal, theme, though, so the code must be hiding elsewhere.

Any ideas on where?

I've checked theme.scss and footer.liquid.

Best,
Kaila

Working with small businesses to establish branding, online presence, and strategy for marketing and operations.
0 Likes
Shopify Partner
1488 148 208

@kailasachse - can you please share your website link? what exactly do you want to delete?

you are welcome to contact me.
My email - suyash.patankar@gmail.com
0 Likes
Shopify Partner
5 1 0

Hi, Kaila!

I just did this for a client on the Minimal theme and had the same question as you.

I found that the icons are part of an "icons font" where every icon is mapped to a specific value, for example: Instagram's icon is e903. I didn't touch that font, because it is everywhere almost in every icon all over the theme.

So... I found another approach using SVG icon files:

1. Over the social_links.liquid file I added this code, so my client would change the links herself: 

  {%- if settings.social_tiktok_link != blank -%}
    <li>
      <a class="icon-fallback-text" href="{{ settings.social_tiktok_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Tiktok' }}" target="_blank" aria-describedby="a11y-new-window-external-message">
        <span class="icon icon-tiktok" aria-hidden="true"></span>
        <span class="fallback-text">Tiktok</span>
      </a>
    </li>
  {%- endif -%}
  {%- if settings.social_patreon_link != blank -%}
    <li>
      <a class="icon-fallback-text" href="{{ settings.social_patreon_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Patreon' }}" target="_blank" aria-describedby="a11y-new-window-external-message">
        <span class="icon icon-patreon" aria-hidden="true"></span>
        <span class="fallback-text">Patreon</span>
      </a>
    </li>
  {%- endif -%}
  {%- if settings.social_society6_link != blank -%}
    <li>
      <a class="icon-fallback-text" href="{{ settings.social_society6_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Society6' }}" target="_blank" aria-describedby="a11y-new-window-external-message">
        <span class="icon icon-society6" aria-hidden="true"></span>
        <span class="fallback-text">Society6</span>
      </a>
    </li>
  {%- endif -%}

 2. Edited my settings_schema.json to reflect what I did over the social_links file:

      {
        "type": "text",
        "id": "social_tiktok_link",
        "label": {
          "en": "Tiktok",
          "es": "Tiktok"
        },
        "info": {
          "en": "http:\/\/tiktok.com\/username",
          "es": "http:\/\/tiktok.com\/username"
        }
      },
      {
        "type": "text",
        "id": "social_patreon_link",
        "label": {
          "en": "Patreon",
          "es": "Patreon"
        },
        "info": {
          "en": "http:\/\/patreon.com\/username",
          "es": "http:\/\/patreon.com\/username"
        }
      },
      {
        "type": "text",
        "id": "social_society6_link",
        "label": {
          "en": "Society6",
          "es": "Society6"
        },
        "info": {
          "en": "http:\/\/society6.com\/username",
          "es": "http:\/\/society6.com\/username"
        }
      },

 3. Added the SVG files to my assets folder:

Code_2020-12-25_11-33-32.png

 

 

 

 

 

 

4. And added the styling over my custom CSS file: 

/* Social icons */
.icon-tiktok:before, .icon-patreon:before, .icon-society6:before {
  content: "";
  display: flex !important;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  background-size: cover;
}
.icon-tiktok:before {
  background: url('{{ "ico-tiktok.svg" | asset_url }}');
}
.icon-patreon:before {
  background: url('{{ "ico-patreon.svg" | asset_url }}');
}
.icon-society6:before {
  background: url('{{ "ico-society6.svg" | asset_url }}');
}

 

And now I have my custom icons  

chrome_2020-12-25_11-39-15.png

 

 

 

 

 

 

Please let me know how it goes for you, and mark the question as solved if this guide helped you. Thanks!

Donato

0 Likes
New Member
2 0 0

Where do you get the icon from? 

0 Likes
New Member
2 0 0

I get the option to choose Tiktok under social media button but no under footer theme button. And the icon will not show. Any ideas for me please?

Thank you

Brady

0 Likes