How to add another Social Icons Media to Footer (Debut Theme)

Solved
rayyah
Tourist
4 0 1

Hi guys, I'm a Start-Up Brand by my self and first time using a Shopify .

Is anyone who can help me or teach me how to add another social media icons please?

I do follow this step but some of part I couldn't figure out.

 

https://www.youtube.com/watch?v=NKKwx5g6OP0&t=97s 

 

this is the social media icon that I prefer.

iconfinder_line_3009506.png

 

Zworthkey
Trailblazer
196 11 44

yes,

I can help you, dear.

thank you

Zworthkey
Trailblazer
196 11 44

use this app to add the social icon on your Shopify store.

https://apps.shopify.com/powr-social-media-icons

either you need to add custom code in your Shopify theme.

thank you.

rayyah
Tourist
4 0 1

Thank you for your help. But I'm looking for the way that I can edit a code. Because use the application is going to be subscribe for monthly service.

0 Likes
Zworthkey
Trailblazer
196 11 44

If you want to add this into your site contact us.at

www.zworthkey.com

0 Likes
dmwwebartisan
Shopify Partner
4446 1000 1274

This is an accepted solution.

@rayyah 

1. Goto config/settings_data.json file

Find the following code

social_instagram_link": "https:\/\/www.instagram.com\/thorne.official\/",

Add the following code after that. 

"social_line_link": "#",

 

2. Goto config/settings_schema.json file

Find code the following code

    "zh-CN": "https:\/\/vimeo.com\/shopify",
          "zh-TW": "https:\/\/vimeo.com\/shopify"
        }
      },

Add the following code after that.

{
        "type": "text",
        "id": "social_line_link",
        "label": {
          "cs": "Line",
          "da": "Line",
          "de": "Line",
          "en": "Line",
          "es": "Line",
          "fi": "Line",
          "fr": "Line",
          "it": "Line",
          "ja": "Line",
          "ko": "Line",
          "nb": "Line",
          "nl": "Line",
          "pl": "Line",
          "pt-BR": "Line",
          "pt-PT": "Line",
          "sv": "Line",
          "th": "Line",
          "tr": "Line",
          "vi": "Line",
          "zh-CN": "Line",
          "zh-TW": "Line"
        },
        "info": {
          "cs": "https:\/\/line.me\/shopify",
          "da": "https:\/\/line.me\/shopify",
          "de": "https:\/\/line.me\/shopify",
          "en": "https:\/\/line.me\/shopify",
          "es": "https:\/\/line.me\/shopify",
          "fi": "https:\/\/line.me\/shopify",
          "fr": "https:\/\/line.me\/shopify",
          "it": "https:\/\/line.me\/shopify",
          "ja": "https:\/\/line.me\/shopify",
          "ko": "https:\/\/line.me\/shopify",
          "nb": "https:\/\/line.me\/shopify",
          "nl": "https:\/\/line.me\/shopify",
          "pl": "https:\/\/line.me\/shopify",
          "pt-BR": "https:\/\/line.me\/shopify",
          "pt-PT": "https:\/\/line.me\/shopify",
          "sv": "https:\/\/line.me\/shopify",
          "th": "https:\/\/line.me\/shopify",
          "tr": "https:\/\/line.me\/shopify",
          "vi": "https:\/\/line.me\/shopify",
          "zh-CN": "https:\/\/line.me\/shopify",
          "zh-TW": "https:\/\/line.me\/shopify"
        }
      }

 

3. Goto Sections/footer.liquid file

Find the following code

or settings.social_vimeo_link != blank

Add the following code after that.

 or settings.social_line_link != blank

 

Find the following code

{%- assign socials = "Facebook Twitter Pinterest Instagram Tumblr Snapchat YouTube Vimeo" | split: ' ' -%}

Replace code with the following

 {%- assign socials = "Facebook Twitter Pinterest Instagram Tumblr Snapchat YouTube Vimeo Line" | split: ' ' -%}

 

4. Create a new file in Snippets "icon-line.liquid " and add this code

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" aria-hidden="true" focusable="false" role="presentation" class="icon icon-line" viewBox="0 0 296.528 296.528" style="enable-background:new 0 0 296.528 296.528;" xml:space="preserve">
<g><path d="M295.838,115.347l0.003-0.001l-0.092-0.76c-0.001-0.013-0.002-0.023-0.004-0.036c-0.001-0.011-0.002-0.021-0.004-0.032   l-0.344-2.858c-0.069-0.574-0.148-1.228-0.238-1.974l-0.072-0.594l-0.147,0.018c-3.617-20.571-13.553-40.093-28.942-56.762   c-15.317-16.589-35.217-29.687-57.548-37.878c-19.133-7.018-39.434-10.577-60.337-10.577c-28.22,0-55.627,6.637-79.257,19.193   C23.289,47.297-3.585,91.799,0.387,136.461c2.056,23.111,11.11,45.11,26.184,63.621c14.188,17.423,33.381,31.483,55.503,40.66   c13.602,5.642,27.051,8.301,41.291,11.116l1.667,0.33c3.921,0.776,4.975,1.842,5.247,2.264c0.503,0.784,0.24,2.329,0.038,3.18   c-0.186,0.785-0.378,1.568-0.57,2.352c-1.529,6.235-3.11,12.683-1.868,19.792c1.428,8.172,6.531,12.859,14.001,12.86   c0.001,0,0.001,0,0.002,0c8.035,0,17.18-5.39,23.231-8.956l0.808-0.475c14.436-8.478,28.036-18.041,38.271-25.425   c22.397-16.159,47.783-34.475,66.815-58.17C290.172,175.745,299.2,145.078,295.838,115.347z M92.343,160.561H66.761   c-3.866,0-7-3.134-7-7V99.865c0-3.866,3.134-7,7-7c3.866,0,7,3.134,7,7v46.696h18.581c3.866,0,7,3.134,7,7   C99.343,157.427,96.209,160.561,92.343,160.561z M119.03,153.371c0,3.866-3.134,7-7,7c-3.866,0-7-3.134-7-7V99.675   c0-3.866,3.134-7,7-7c3.866,0,7,3.134,7,7V153.371z M182.304,153.371c0,3.033-1.953,5.721-4.838,6.658   c-0.712,0.231-1.441,0.343-2.161,0.343c-2.199,0-4.323-1.039-5.666-2.888l-25.207-34.717v30.605c0,3.866-3.134,7-7,7   c-3.866,0-7-3.134-7-7v-52.16c0-3.033,1.953-5.721,4.838-6.658c2.886-0.936,6.045,0.09,7.827,2.545l25.207,34.717V99.675   c0-3.866,3.134-7,7-7c3.866,0,7,3.134,7,7V153.371z M233.311,159.269h-34.645c-3.866,0-7-3.134-7-7v-26.847V98.573   c0-3.866,3.134-7,7-7h33.57c3.866,0,7,3.134,7,7s-3.134,7-7,7h-26.57v12.849h21.562c3.866,0,7,3.134,7,7c0,3.866-3.134,7-7,7   h-21.562v12.847h27.645c3.866,0,7,3.134,7,7S237.177,159.269,233.311,159.269z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

 

Hope this works for you.

 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App