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

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
3852 717 1200

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

 

 

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

View solution in original post

Cedcommerce
Shopify Partner
718 76 114

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 11 (11)

PMike
Shopify Partner
134 12 22

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
3852 717 1200

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

 

 

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
shubham1605
Visitor
1 0 0

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

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
Shopify Partner
3852 717 1200

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
}

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
liekesmeets
Visitor
1 0 0

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,

 

LiekeScreenshot 2024-08-08 153638.png 

Dean_Swanepoel
Shopify Partner
7 0 3

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

Cedcommerce
Shopify Partner
718 76 114

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
51 1 11

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
10 2 3

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.✌