Solved

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

parallelism23
Shopify Partner
70 1 13

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! 

parallelism23_0-1685673197071.png

Currently Linkedn is not available on dawn theme. 

parallelism23_1-1685673237655.png

 

Accepted Solutions (2)

made4Uo
Shopify Partner
3805 713 1129

This is an 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>

 

made4Uo_0-1685680631761.png

 

Result here:

made4Uo_1-1685680841843.png

 

 

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!

View solution in original post

Cedcommerce
Shopify Expert
718 76 112

This is an 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

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here

View solution in original post

Replies 6 (6)

PMike
Shopify Partner
134 12 20

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! 

Fordeer Invoice Order Printer - The great tool for the best business!
https://link.fordeer.io/YZL4Ge

made4Uo
Shopify Partner
3805 713 1129

This is an 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>

 

made4Uo_0-1685680631761.png

 

Result here:

made4Uo_1-1685680841843.png

 

 

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!

Cedcommerce
Shopify Expert
718 76 112

This is an 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

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here
IMYOURGIRL
Shopify Partner
48 1 9

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
Visitor
2 0 0

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

SLASHCARTS
Shopify Partner
5 0 0

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  

Volunteering to assist you! Likes and Accept as Solution is highly appreciated.✌