Dawn Theme | Adding additional social media links on the footer > linkedn

[parallelism23]

Hey there! 

I am trying to add a Linkedn social media icon on the footer but don't really know how to inject it on the theme. 

Any suggestion? 

Thank you! 

Currently Linkedn is not available on dawn theme. 

[made4Uo · Accepted solution]

Hi @parallelism23 

You can add this directly to the footer. Please follow the instructions below.

1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
2. Go to Snippet folder and open the social-icons.liquid file
3. Find the <ul class="footer__list-social list-unstyled list-social">, and paste the code after the line. See image below

Note: Change the linkedIn_link in the code to your linkedIn link

  <li class="list-social__item">
    <a href="linkedIn_link" class="link list-social__link">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
        <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
      </svg>
      <span class="visually-hidden">LinkedIn</span>
    </a>
  </li>

Result here:

[PMike]

to include a LinkedIn social media symbol to the footer of your site within the Dawn theme, you'll got to do a few manual customization. Since LinkedIn isn't pre-configured within the theme, you'll ought to add the icon yourself.

Here's what you'll be able do:
1. Find a LinkedIn symbol picture that you simply need to utilize. You'll explore for one online or make your possess.
2. Transfer the LinkedIn icon image to your theme's assets folder. You'll be able get to this envelope within the Shopify admin under Online Store > Themes > Actions > Edit Code.
3. Next, find the footer segment in your theme's code. Search for the pertinent HTML record that controls the footer.
4. In the footer HTML, discover the area where the social media icons are shown.
5.Add an <img> tag with the source pointing to the LinkedIn icon image you uploaded. You can also wrap it in an <a> tag and provide the URL to your LinkedIn profile to make it clickable.

6. Spare your changes and see your store to see on the off chance that the LinkedIn symbol shows up within the footer.

Hope this helps! 

[made4Uo · Accepted solution]

Hi @parallelism23 

You can add this directly to the footer. Please follow the instructions below.

1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
2. Go to Snippet folder and open the social-icons.liquid file
3. Find the <ul class="footer__list-social list-unstyled list-social">, and paste the code after the line. See image below

Note: Change the linkedIn_link in the code to your linkedIn link

  <li class="list-social__item">
    <a href="linkedIn_link" class="link list-social__link">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
        <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
      </svg>
      <span class="visually-hidden">LinkedIn</span>
    </a>
  </li>

Result here:

[shubham1605]

This worked for me - but just one more thing I wanted to know is - how to make the icon colour to white?

After adding the code, by default the icon is coming as black.

[Leener]

Hi, @made4Uo...
This solution seems to work as the link is there, but the icon is not visible on the black footer background.
How can I change color to white? It is ignoring the footer CSS that style other icons on the page.
Thanks for any further advice. 🙂

[made4Uo]

Hi @Leener 

Please add the code below to your base.css file under the Asset folder. If the code below does not work, please provide your website. 

.list-social__item path {
fill: white
}

[liekesmeets]

Hello Made4Uo,

I have tried to find  <ul class="footer__list-social list-unstyled list-social">, but it appears I don't have that in my code, possibly due to an upgrade to the latest version. In the attachment you can find a screenshot of it. What should I do now? 

Warmest,

Lieke 

[Dean_Swanepoel]

Thanks so much, this worked great, could you please help with the code to add TikTok in the same way?

[Cedcommerce · Accepted solution]

Hello @parallelism23,

To resolve this issue, you can follow the below-provided steps.

Go to the Theme, Edit code, and search file name Social-icons.liquid

Now paste the below-provided code.

{%- if settings.social_linkedin_link != blank -%}

<li class="list-social__item">

<a href="{{ settings.social_linkedin_link }}" target="_blank" class="link list-social__link">

{%- render 'icon-linkedin' -%}

<span class="visually-hidden">Linked In</span>

</a>

</li>

{%- endif -%}

then go to the setting-schema.json

and search " settings_schema.social-media.name"

and paste the below schema:

{

"type": "text",

"id": "social_linkedin_link",

"label": "Linked In "

}

Then save the file and check. 

Hope this resolves your issue. Let us know if you need any further help.

All the best, 

CedCommerce

[IMYOURGIRL]

Hello! I tried your solution and it added a field in my theme settings, but the icon doesn’t appear on my website.. can you help me? Thanks!

[drvisor]

Hi, did you solve this issue? I am trying to solve it, but I couldn't. I have exactly same issue.

[SLASHCARTS]

Adding a LinkedIn Icon to your Shopify Theme:

1. Accessing the Theme Code:

Go to your Shopify admin panel.
Navigate to "Online Store" and then "Themes".
Select "Actions" and choose "Edit code" for your desired theme.
2. Adding the LinkedIn Link:

Locate the file named "Social-icons.liquid" within the theme code.
Copy and paste the following code snippet at an appropriate location within the file:
HTML
{%- if settings.social_linkedin_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_linkedin_link }}" target="_blank" class="link list-social__link">
{%- render 'icon-linkedin' -%}
<span class="visually-hidden">Linked In</span>
</a>
</li>
{%- endif -%}
Use code with caution.
3. Enabling the LinkedIn Link Setting:

Open the file named "settings-schema.json".
Find the section labeled "settings_schema.social-media.name".
Copy and paste the following schema within that section:
JSON
{
"type": "text",
"id": "social_linkedin_link",
"label": "Linked In "
}
Use code with caution.
4. Saving and Checking:

Save both the "Social-icons.liquid" and "settings-schema.json" files.
Preview your theme to ensure the LinkedIn icon is displayed correctly.
Important Note:

Editing theme code requires caution. Consider making a backup of your theme files before proceeding.
The provided code snippet assumes an existing function named "render 'icon-linkedin'" that displays the LinkedIn icon. You might need to adjust this part depending on your specific theme.
Additional Help:

If you encounter any difficulties or require further assistance, don't hesitate to contact SLASHCART