DAWN THEME - How to change mobile footer menu into collapsible menu

Store Design
, ,
1

Hello,

I’m using Shopify Dawn theme and I would like to change the mobile footer menu into collapsible menu with plus and minus icons.

Link: https://admin.shopify.com/store/454c7e-d8/

2

Hello @Us1256 ,

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

3

Hi @Us1256

You can add this code to theme.liquid file, before in Online Store > Themes > Edit code, save file and check again.
4

Hi @Guleria ,

Thank you for the solution, but unfortunately it didn’t resulted in what I was trying to achieve. Even other parts of the footer were changed into tabs, like the brand information. The solution from @Dan-From-Ryviu helped me solve the problem.

5

Thank you @Dan-From-Ryviu , exactly what I was looking for.

1 Like
6

You are very welcome!

7

Hi,

I tried using your code and it works but it looks like this. There’s a lot of empty space between each menu when its closed.

https://eb00a5-ab.myshopify.com
pass jordan

Screenshot 2024-09-06 135158.png
Screenshot 2024-09-06 135158.png1026×547 37.4 KB

8

Yes, I am also facing the Spacing issue.

@Dan-From-Ryviu kindly let me know an alternate code to fix for the spacing issue .

somersville_0-1736005364579.png
somersville_0-1736005364579.png456×280 1.77 KB

1 Like
9

Could you share your store link so I can give the code to solve this?

10

Sure,

https://www.somersville.in/

Pp: 10102024

11

Please add this code to Custom CSS in ONline Store > Themes > Customize > Theme settings

@media (max-width: 749px) {
    .footer-block__details-content  {
        margin-bottom: 0px !important;
    }
    .footer-block.grid__item {
        margin: 10px 0 !important;
    }
}
12

Thanks @Dan-From-Ryviu , that worked fine as expected.

1 Like
13

Happy I could help! Have a great day ahead!

Best,

Dan from Ryviu Support Team.

1 Like
14

It would work. You can try to add code to check.

1 Like