How to Add Linkedin Social Media Icon in Shopify

0 2,132

Step 1 :  Go to Online Store->Theme->Edit code->Config->settings_schema.json -> find where social media icons has been placed , as shown in the attached file, then insert the given code there :


,
{
"type": "text",
"id": "social_linkedin_link",
"label": "Linked In",
"info": "https://linkedin.com/shopify"
},

you can find code as shown in the attached file.

Step 2 :

Now create Snippet file , for this go to snippets folder -> click add new snippet – > name it icon-linkedin.liquid 

and placed given code below in that file :


<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-linkedin" viewBox="0 0 24 24" style=" fill:#FFFFFF"><path d="M4.98 3.5C4.98 4.881 3.87 6 2.5 6S.02 4.881.02 3.5C.02 2.12 1.13 1 2.5 1s2.48 1.12 2.48 2.5zM5 8H0v16h5V8zm7.982 0H8.014v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0V24H24V13.869c0-7.88-8.922-7.593-11.018-3.714V8z"/></svg>

 

Step 3: 

Now go to footer.liquid file and find code (press ctrl+F key and find section.settings.show_social)

Now place given code just below there :


{%- if settings.social_linkedin_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_linkedin_link }}" class="link list-social__link" >
{%- render 'icon-linkedin' -%}
<span class="visually-hidden">{{ 'LinkedIn' | t }}</span>
</a>
</li>
{%- endif -%}

Solution : 

this will show the linkedin ICON LINK OPTION in customize as well show icon in footer like below in your theme .

Leave A Reply

Your email address will not be published.