I would like to add LinkedIn icon at the footer of my store page in the Crave theme

[CT08]

Hi,

I would like to add LinkedIn icon at the footer of my store page in the Crave theme along with other social media icons. I tried following steps provided in below post, but lines of codes were different in Step 3 and I could not follow.

https://community.shopify.com/c/shopify-design/add-linkedin-page-to-dawn-theme/td-p/1489729

Could somebody please share steps with screenshot elaborately to help me with this please.

[Harsita · Accepted solution]

Hi @CT08 

Thank you for reaching out to the Shopify community.

For adding linkedin icon at footer of page in Crave theme, please follow the below steps:-

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:\/\/ca.linkedin.com\/company\/shopify"
}

Step 2: Go to Config->settings_data.json ,search for social (ctrl+f social) and insert the below code

"social_linkedin_link": "",

Step 3 : Now create Snippet file , for this go to snippets folder -> click add new snippet - > name it icon-linkedin.liquid,  paste the code given below in the file and save it. 

<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-linkedin" viewBox="0 0 24 24" style="fill: rgb(242,239,221);"><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 4 :  Go to Snippets->social-icons.liquid, then insert the given code inside the ul :

{%- 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">{{ 'general.social.links.linkedin' | t }}</span>
     </a>
    </li>
{%- endif -%}

Step 5 :  Go to Locales->en.default.json , find links object (ctrl + f links) and add below code:-

 "linkedin": "LinkedIn",

Step 6 : Go to Sections-> footer.liquid, search social (ctrl+f social), and add the below code in the if condition:-

and settings.social_linkedin_link == blank

Now , go to your shopify admin pannel Online Store-> themes -> Customize -> Theme settings -> Social Media, here you will be able to see new section for linkedin, hence you will be able to add your linkedin icon.

Do give it a try and let me know if this was helpful.

Thanks.

[CT08]

Thank you so much! But I am not able to add LinkedIn option to my shopify automations i.e. automated e-mailers sent out to customers and also in the password protected page.

Could you also please assist with those too. 

Thank You!

[Morewoodkid]

This is awesome and worked perfectly, the only issue that I have is that this LinkdIn logo is larger than the others... how do I change this? Ideally I would actually like to make all of them a little larger 🙂

[NAP2]

Hey, did you find a solution, I am facing the same issue.

[PixelMixel]

Hi @Harsita
Thank you for posting this solution, I too have had this issue and your solution has helped greatly, thank you.  One question, though, is that the icon is larger than the other Social icons in the Dawn theme, which part of the code in the icon-linkedin.liquid file do I need to change so that it matches the other social icon sizes?

Many thanks in advance.
Gary

When I inspect the page I can see that for instance the Instagram icon has a viewBox="0 0 20 20" (17.6 x 17.6) 

[ltrain]

I tried this with the Production 1.16 theme. and it doesn't work. I changed the size to auto then it didn't show anything just a solid square. Then trying different svg's I got it to show but it's not the same size as the FB icon and other icons that are standard to the theme. Can you help me solve this?

[Lenfantvivant]

This worked seamlessly. I also just changed the RGB code to black with style="fill: rgb(0,0,0);". Thank you!!

One question and I am ignorant getting started, but I guess there is a way to take this code: <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-linkedin" viewBox="0 0 24 24" style="fill: rgb(242,239,221);"><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>

And do it for Spotify, Apple Music, etc. icons as well. No, I get the point of changing all of the above explanations where it says LinkedIn to, e.g., Spotify, Apple Music, etc., but how do I ensure it loads the right icon, e.g., through the path?

Is there a site I can use? Again, thank you for your support.

[drvisor]

Unfortunately it seems as below;

[communityce]

Thanks for the answer. Just one thing. We also need to add a small JSON snippet in the locale/en.default.schema.json file. 

"social_linkedin_link": {
          "label": "LinkedIn",
          "info": "http:\/\/linkedin.com\/shopify"
        },

 Since this was not added, in the Theme Settings there was an issue. It was showing the error "missing translation: "t:sections" ........

Once the above snippet was added I was able to see the LinkedIn label correctly.

Cheers...

[shopjobie1]

how do I change the icon for linkedin in dawn theme? I had to use the code from here just to get it in there but I need to change the icon

[Harsita]

Hi @CT08 

1. To add linkedin icon in the footer of your password protected page please follow the steps below:-

Step 1 :  Go to Snippets->icon-linkedin.liquid, and replace the svg code with the code provided below, then save the file.

<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-linkedin" viewBox="0 0 24 24"><path fill="currentColor"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 2 : Go to Sections->main-password-footer.liquid, add the code provided below inside the ul

{%- 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">{{ 'general.social.links.linkedin' | t }}</span>
    </a>
  </li>
{%- endif -%}

Now, you will be able to see the linkedin icon on the footer of password page.

2. To add social media icons in automated email template, please follow the below steps:-

Step 1 : In your Shopify admin panel, go to Settings and click on Notifications.Choose the automated email you want to edit and click on its name. This will take you to the email template editor. For ex - 

Step 2 : Now click on edit code, and now you will be able to edit the template of your email, here you can add any social-media icon of your choice in the footer. For exmple-

code i used for icons is provided below, you can find any icon of your choice and modify its css like - height, width etc.

<tr>
  <td>
    <a href="https://www.facebook.com/yourpage" target="_blank">
      <svg xmlns="https://www.w3.org/2000/svg" height="45px" width="45px"><path
fill="#3B5998" d="M2.77 1C1.8 1 1 1.8 1 2.77v28.5c0 .97.8 1.77 1.77 1.77h15.3v-12.4H13.9V15.8h4.17v-3.55c0-4.13 2.52-6.38 6.2-6.38 1.78 0 3.3.13 3.74.2v4.3h-2.55c-2 0-2.4.96-2.4 2.36v3.08h4.8l-.63 4.84h-4.16v12.4h8.15c.98 0 1.78-.8 1.78-1.77V2.77c0-1-.8-1.8-1.8-1.8H2.78z"></path></svg>
     </a>
     <a href="https://www.facebook.com/yourpage" target="_blank">
       <svg viewBox="0 0 24 24" xmlns="https://www.w3.org/2000/svg" height="40px" 
 width="38px" style="margin-bottom: 7px;"><path fill="#0077B5" d="M19,19H16V13.7A1.5,1.5 0 0,0 14.5,12.2A1.5,1.5 0 0,0 13,13.7V19H10V10H13V11.2C13.5,10.36 14.59,9.8 15.5,9.8A3.5,3.5 0 0,1 19,13.3M6.5,8.31C5.5,8.31 4.69,7.5 4.69,6.5A1.81,1.81 0 0,1 6.5,4.69C7.5,4.69 8.31,5.5 8.31,6.5A1.81,1.81 0 0,1 6.5,8.31M8,19H5V10H8M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z"></path></svg>
    </a>
  </td>  
</tr>

You can preview your template, and adjust your code as per your needs.

Do give it a try and let me know if this was helpful.

Thanks

[TheBrandAudit]

Thanks for the above! How would you go about doing this for your marketing automation Welcome Email? I want to add LinkedIn as an icon, but it isn't an option on the standard Dawn template. TY!