How to add a home icon to the main mobile menu in Halo theme?

Store Design
, , , ,

Topic summary

Goal: add a clickable Home icon to the top-left of the mobile (hamburger) menu in the Halo Shopify theme.

Context: The requester shared a preview URL of an unpublished theme. The intent was to place the icon inside the mobile menu drawer, linking to the homepage.

Proposed quick fix: One participant suggested a fast, non-ideal approach:

  • Add CSS in base.css to style a custom link with an image and adjust the menu’s top border.
  • Inject HTML via JavaScript in theme.liquid (before ) to insert the Home icon image before the .list-menu–inline element, with a note to replace the image source.

Issues: An error flagged missing width and height attributes on the img tag. After adding them, the icon still did not render on the frontend. Another participant asked if the goal was to replace an existing icon; further code guidance was unclear, and an offer was made to be added as staff to investigate.

Outcome: The original poster ultimately solved it themselves. No final code or steps were shared publicly. Status: resolved, but no documented solution for others.

Summarized with AI on January 9. AI used: gpt-5.
1

Anyone have any or can provide any custom liquid/CSS snippet to add a home icon (with link) to the top left of the mobile main menu in Halo theme?

Like this

Loz86_0-1703683114168.png
Loz86_0-1703683114168.png338×274 15.9 KB

2

Hi @Loz86

Send your store url so we can check and provide possible solution

Best regard

3

Hi @Jasoliya

Thanks for the reply.

I’m currently working on an unpublished theme at the moment.

The url is: https://y1hz4akx21bmfaxh-78729543967.shopifypreview.com

4

Try to add this code, this is not proper solution but its fast solution for you

  1. Go to Online Store->Theme->Edit code
  2. Asset->base.css → paste bellow code in bottom of file
.cd_a{padding-left: 19px; margin-top: 12px; display: block; max-width: 50px; padding-bottom: 7px;}
.cd_a img{width:100%;}
.halo-sidebar-wrapper .list-menu.list-menu--inline{border-top: 1px solid #eee;}
  1. now add this Js code in theme.liqude file just belfore 
document.querySelector('.list-menu--inline').insertAdjacentHTML('beforebegin', '
![25694.png|512x512](upload://joBK47Mql4ng9SMweVczspCqZ8K.png)
');

Note: you can change image to your

5

Got this error in theme.liquid snippet

“Missing width and height attributes on img tag”

Loz86_0-1703687444419.png

I’ve added these missing attributes with this

document.querySelector('.list-menu--inline').insertAdjacentHTML('beforebegin', '
![Home.png?v=1703687100|2048x1536](upload://ygS937LMQEsnD5ZYJfuEyWUgfOL.png)
');

However the icon isn’t showing frontend

6

You want to replace this icon?

techlyser_web_0-1703688998144.png

7

try to add this
8

Still no joy unfortunately :pensive_face:

9

add me staff (jasoliyabrijesh123@gmail.com)) i will check,

10

No, it was adding a home icon inside the hamburger menu, I’ve managed to do it now thanks anyway.

11

I’ve managed to do it now thanks anyway.