How to make Collapsible Footer Menus on Mobile (Dawn Theme)

Store Design

Topic summary

Goal: make Dawn theme footer menus collapsible on mobile only.

Implementation:

  • Add custom code to the theme: Online Store > Themes > Edit code > Sections > footer.liquid (paste at the bottom).
  • Initial guidance referenced a CodePen example for collapsible behavior.

Latest updates:

  • A working code snippet was shared for Dawn 15.0.0 to enable collapsible footer menus on mobile.
  • An updated version improves UX: menus toggle open/closed and stay open until the user closes them.

Compatibility/notes:

  • Confirmed working on Dawn 15.0.0; users on earlier versions (e.g., 2.5.0, 6.0.2) may need to adapt the code.
  • Code snippets are central to applying the solution; screenshots show the desired mobile result.

Outcome:

  • A user confirmed the updated solution works “like a charm.”
  • Issue appears resolved with a practical code-based fix; no outstanding questions reported.
Summarized with AI on December 18. AI used: gpt-5.
1

Hello everyone,

I would like to make my Footer Menus collapsible on Mobile view only! (see screenshots below)

I am using Dawn Theme by the way.

Help would be appreciated :slightly_smiling_face:

Thank you!

Footer Menus Mobile.jpg
Footer Menus Mobile.jpg399×565 12.3 KB

How it’s looking right now

Footer Collapsible Menus Mobile.jpg
Footer Collapsible Menus Mobile.jpg466×109 3.02 KB

How I want it to look like

1 Like
2

@KC14

oh sorry for that issue yes its possible to change code If you’re comfortable working with coding languages (eg. HTML, JavaScript, CSS, and Liquid), then you can try to follow the custom coding provided by

https://codepen.io/EricPorter/pen/EKqYpj or Send DM

3

@made4Uo @KetanKumar @LitCommerce @oscprofessional @ZestardTech

Anyone who knows how to fix this?

All help would be appreciated :slightly_smiling_face:

Thank you!

4

@made4Uo @KetanKumar @LitCommerce @oscprofessional @ZestardTech

Hi there,

where does the code need to be placed.

I am using the DAWN Theme 2.5.0 and 6.0.2

Looking forward to your feedback.

Best regards,

Daniel

5

@myKidsLounge

Go to Edit code >>>> Section >>> Footer code

6

Hello,

Follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your section → footer.liquid file and paste the following code at the bottom:

Note: I’m using Dawn theme version 15.0.0 if you are using a different version and code is not working for you please adjust code accordingly.

Thanks

1 Like
7

Hello again, I updated @Guleria 's code,

  • now the menu if you press the menu it can also close
  • and it stays open till closed by the user

Follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your section → footer.liquid file and paste the following code at the bottom:

Dawn theme version 15.0.0
!Thanks to @Guleria .

2 Likes
8

Thank you so much,

it works like a charm, I really wanted it!

you made my day.