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

Store Design
, , , ,

Topic summary

A user successfully added a custom social media link (LINE) to their store’s footer alongside the Instagram icon but needs help displaying it in the mobile navigation menu, where only Instagram currently appears.

Solution provided:

  • Access theme code editor via Shopify admin (Online Store > Themes > Edit code)
  • Locate mobile menu template files (drawer-menu.liquid, mobile-menu.liquid, or similar in sections folder)
  • Search for existing Instagram/social icon code
  • Duplicate the Instagram code block and modify it for LINE
  • Create a custom icon-line.liquid snippet in the snippets folder if the theme lacks a LINE icon SVG
  • Add the LINE icon SVG code to the new snippet

Current status: The responder offered free implementation assistance if the user shares collaborator access via DM or email. The discussion remains open pending the user’s attempt or acceptance of help.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

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

Screenshot 2025-03-21 at 1.20.13 am.png
Screenshot 2025-03-21 at 1.20.13 am.png1018Ă—366 14.8 KB

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)

Screenshot 2025-03-21 at 1.22.54 am.png
Screenshot 2025-03-21 at 1.22.54 am.png730Ă—1290 25.7 KB

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

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

1 Like
2

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 %}
  
    {% render 'icon-instagram' %}
  
{% endif %}
  • Right after the Instagram code block, add a similar block for LINE
{% if settings.social_line_link != blank %}
  
    {% render 'icon-line' %}
  
{% 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:

Please give a try at your endand 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! :blush:

Cheers,
Shreya