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

Store Design
, ,

Topic summary

A user running the Trade Theme (v15.2.0) wants to make footer menus collapsible on mobile view only. Currently, the footer displays all menu items expanded, but they want accordion-style collapsed sections to save space.

Current Status:

  • Store was initially password-protected but access has been granted
  • Multiple developers confirmed this requires custom code implementation

Solutions Offered:

JavaScript Approach:

  • One developer provided custom JavaScript code to be added before </body> in theme.liquid file
  • This would add interactive collapse/expand functionality

CSS Styling:

  • Another developer shared CSS code for theme.css/base.css to style the footer section
  • Includes formatting for background color, typography, and link styling
  • Note: This CSS alone doesn’t create collapsible functionality

Resolution: The discussion remains open with code solutions provided but no confirmation yet on implementation success. The JavaScript solution appears most relevant to achieving the collapsible behavior requested.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Hello everyone,

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

I am using Trade Theme 15.2.0 for my website.

Help would be appreciated :slightly_smiling_face:

Thank you!

How it’s looking right now

jordanbford1_2-1735172497255.png
jordanbford1_2-1735172497255.png856×1130 47.2 KB

How I want it to be collapsed:

jordanbford1_1-1735172389527.jpeg

2

Hello @jordanbford1 ,

Your store is password protected, please share.

btw as I know it needs customization and for that you need to go with a developer.

Regards
Guleria

3

Hi, @jordanbford1

Can you share your password so that I can view your store?

4

@Guleria I have removed the password! Sorry!

5

@AnneLuo I have removed the password sorry!

6

I can help you with it. But it needs to add some custom code. If you need my help, please let me know.

7

Hi @jordanbford1

You can add this code to theme.liquid file, before in Online Store > Themes > Edit code and check if it works
8

Hello, @jordanbford1

image.png
image.png311×378 4.39 KB

.footer-section {
    background-color: #0c3c2c; 
    color: white;
    padding: 20px !important;
    font-family: Arial, sans-serif;
}

.footer-section h4 {
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: bold;
}

.footer-section ul {
    list-style: none;
    padding: 0;
    text-decoration: none;
    list-style: none;
}

.footer-section li {
    margin-bottom: 5px !important;
    text-decoration: none;
    list-style: none;
}

.footer-section a {
    color: white;
    text-decoration: none;
    list-style: none;
}

.footer-section a:hover {
    text-decoration: none;
}
  1. Go to Online Store
  2. Edit Code
  3. Find theme.css/base.css file
  4. Add the following code in the bottom

Thanks!

1 Like