How can I add a custom social media link on the mobile navigation menu??

[matchyychin]

I have created a custom social media link on the footer next to the Instagram icon (see screenshot).

and I would like to have this custom social media link on the mobile navigation menu as well, currently it only shows the instagram icon (see screenshot)

is there any way I could add the custom social media link here? Thanks!!

Here is the URL: https://cloudixhealth.com/

[ShreyaRevize]

Hey @matchyychin 

Here are the steps to manually add the LINE link to your mobile menu:

1. Go to your Shopify admin dashboard
2. Navigate to "Online Store" > "Themes"
3. Click the three dots (•••) next to "Customize" and select "Edit code"
4. Look for the mobile menu template file. Search for files like:
   • drawer-menu.liquid
   • mobile-menu.liquid
   • mobile-navigation.liquid
   • Or look in the sections folder for similar files
5. Once you find the file that contains the mobile menu code, search for "instagram" or "social" to locate where social icons are displayed
6. When you find the Instagram code, it might look something like this:

{% if settings.social_instagram_link != blank %}
  <a href="{{ settings.social_instagram_link }}" class="social-icon">
    {% render 'icon-instagram' %}
  </a>
{% endif %}

• Right after the Instagram code block, add a similar block for LINE

{% if settings.social_line_link != blank %}
  <a href="{{ settings.social_line_link }}" class="social-icon">
    {% render 'icon-line' %}
  </a>
{% endif %}

• If your theme doesn't have an icon-line SVG, you may need to create one:
  • Find the snippets folder in your theme editor
  • Create a new snippet called icon-line.liquid
  • Add SVG code for a LINE icon:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-line">
  <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
  <polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>

Please give a try at your end and if you need any help, just send us your collaborator code via DM or email. We’ll gladly make the necessary changes for you for free.  Looking forward to assisting you! 😊

Cheers,
Shreya