Custom hamburger menu icon Reformation theme

Store Design
, , , , , ,

Topic summary

A user wants to replace the default hamburger menu icon with a custom SVG on the Reformation theme’s mobile view. They’ve provided the SVG URL and site credentials.

Initial Solution Proposed:

  • Locate header.liquid file
  • Search for “mobile-toggle” code
  • Replace existing SVG with custom code
  • Add CSS to app.css to style the icon

Complication:
The user’s theme structure differs from the suggested approach. Their header.liquid doesn’t contain the mobile-toggle code or SVG elements. Instead, the theme uses separate snippet files:

  • mobile-toggle.liquid
  • header-mobile-menu.liquid (contains SVG mentions but no clear replacement point)

Current Status:
The helper has requested the code from both snippet files to provide a tailored solution. The discussion remains open and awaiting further technical guidance specific to this theme’s file structure.

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

I’d like to replace the hamburger menu icon on mobile with a custom SVG, there aren’t liquid files for this like on other themes I’ve worked on in the past and I would appreciate some guidance on where to add/replace this code please.

SVG link: https://cdn.shopify.com/s/files/1/0730/9456/2033/files/menu-grey.svg?v=1746112774

url: https://milosminimart.com/

pw: minimart2025

1 Like
2

Hello @blakelyhiner

Please follow the steps below after logging into the Shopify admin:

  • Go to your Shopify Admin panel.

  • Click on Online Store > Themes.

  • Find the live theme and then click Actions > Edit code.

  • Search for header.liquid

  • Inside that search for “mobile-toggle” and replace the existing code with your svg code: https://prnt.sc/H2tvNlHJrCr0

  • Then search for app.css

  • Please insert the provided CSS code at the end of the file and save the changes.

.mobile-toggle svg
{
    width: 100%;
    height: 100%;
}

Note: if you have not found SVG code, then just open your SVG image in Notepad and copy that code and paste it.

Please hit Like and Mark it as a Solution if you find our reply helpful.

3

I appreciate your suggestion, my header.liquid doesn’t contain any SVG or the mobile-toggle area. I have a separate snippet for mobile-toggle.liquid and then another for header-mobiler-menu.liquid - this one is the only one that contains the svg mentions, but no place to replace the url for the svg file.

Screenshot 2025-05-06 at 8.24.22 AM.png
Screenshot 2025-05-06 at 8.24.22 AM.png2210×1414 495 KB

4

Hello @blakelyhiner

Could you please share the code from both files so we can review it and provide you with a solution?