How to add Linkedin Icon to the RIDE theme footer?

Technical Q&A
, ,
1

I would like to know how to add the linkedin icon (link) in the RIDE theme footer.

1 Like
2

To add a LinkedIn icon to your RIDE theme footer, you can

go to your Shopify Admin, navigate to Online Store > Themes > Customize, select Theme settings > Social Media, and enter your LinkedIn profile URL there. The theme should automatically display the icon,

and if not, you may need to manually edit the theme code in settings_schema.json and the social-icons.liquid snippet.

3

Hello, @GeekDoTi

  1. Go to Edit code in your Shopify theme.

  2. Open the config folder and then the " settings_schema.json " file.

  3. Search for the section with "name": “name”: “Social media” .

  4. After finding it, paste the following code:

,{
  "type": "text",
  "id": "social_linkedin_link",
  "label": "LinkedIn"
}

This will add a LinkedIn field under your social media settings.

image
image683×321 54.9 KB

image
image334×408 48.8 KB

Now here’s how you can add the LinkedIn icon to your Shopify theme:

  1. Go to Edit code in your Shopify theme.

  2. Open the Snippets folder and click Add a new snippet.

  3. Name the new snippet icon-linkedin.liquid.

  4. Paste the following code inside it:

<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="icon icon-linkedin" fill="none" viewBox="0 0 20 20">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M15.12 15.12V10.452c0-2.32-.5-4.116-3.236-4.116-1.332 0-2.22.72-2.58 1.392h-.036v-1.2H6.84V15.12h2.52V11.1c0-1.008.192-1.98 1.44-1.98 1.224 0 1.248.816 1.248 2.052V15.12h2.064zM4.836 6.552A1.68 1.68 0 103.152 4.86a1.68 1.68 0 001.684 1.692zM6.06 15.12V7.8H3.6V15.12h2.46z" fill="currentColor"/>
</svg>
  1. Now, search for the file social-icons.liquid in your theme.
  2. Find the end of one of the existing social media blocks (for example, the {%- endif -%} for Instagram or Facebook).
  3. Right after that line, paste the following code:
{%- if settings.social_linkedin_link != blank -%}
  <li class="list-social__item">
    <a href="{{ settings.social_linkedin_link }}" class="list-social__link link">
      {%- render 'icon-linkedin' -%}
      <span class="visually-hidden">LinkedIn</span>
    </a>
  </li>
{%- endif -%}

Click Save.

image
image849×261 73.8 KB

image

the LinkedIn icon should now appear in your footer (and anywhere else your social icons are displayed).

Thank You!

4

Hello welcome here

This is a right platform where your need are met

Can you let me know in details what you really need