I want to adjust the design of my hamburger nav and add small links anchored to the bottom of the drawer. What’s the best way to change it in my template files?
Example of UI:
Thanks!
UX caveat, future merchants wanting to move the existing menu items from top to bottom should read the below warning to avoid UX issues.
Not simple, it will be very dependent on the theme and where the links need to be controlled(admin nav, or theme setting, metafields,etc), then not only in where to put code but also how the code should be structure to match the themes styling.
Most themes don’t have it but it’s possible some themes may have a custom-liquid block/section for the menu-drawer to add things to the drawer footer.
For Dawn based themes start in the snippet header-drawer.liquid new links would be before, near or in the .menu-drawer__utility-links element.
https://github.com/Shopify/dawn/blob/main/snippets/header-drawer.liquid#L126C13-L126C13
https://github.com/Shopify/dawn/blob/main/snippets/header-drawer.liquid
For things like nested-navigation , customer links see the liquid code examples
https://shopify.github.io/liquid-code-examples/example/nested-navigation
in the nested-navigation example replace “main-menu” with the handle of the desired menu.
https://shopify.github.io/liquid-code-examples/example/customer-account-links
https://shopify.github.io/liquid-code-examples/example/payment-icons
https://shopify.github.io/liquid-code-examples/example/social-media-navigation
If you need this customization then contact me directly by mail for services.
Please always provide context, examples: store url, theme name, post url(s) , or any further detail.
Contact Info in signature.
Good Hunting.
UX warning,
Merchants shouldn’t move the existing menus in the drawer.
Adding a new area is different and okay for things such as for social icons or polices.
Merchants should not arbitrarily move where things are based on personal preference or misunderstanding of UX.
The drawer open icon is at the top of the page.
This is where users finger/thumb will be when the drawer opens.
The users expect menus to be near where they clicked.
If menus are not where expected, your forcing them move their hand from the top of their device to the bottom of their device every time they open the drawer for no real reason.