Drop Down/Nestled Footer

Store Design

Topic summary

A user seeks to implement a collapsible/dropdown footer on their Shopify store using the Prestige theme version 10.8.

Initial Responses:

  • One contributor offers custom coding assistance via private message to implement the feature
  • The original poster accepts the collaboration request

Technical Solution Provided:
A detailed implementation guide is shared involving three code modifications:

  1. HTML Structure - Wrap footer blocks in collapsible elements within footer.liquid, using button toggles and content containers

  2. CSS Styling - Add styles to theme.css to control visibility states (hidden by default, visible when active class is applied)

  3. JavaScript Functionality - Insert toggle script before </body> tag in theme.liquid to handle click events and class switching

Status: The discussion remains open with both a private collaboration offer and a public code solution available for implementation.

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

Hi,

I’m trying to create a drop down/nextled footer on my store running prestige theme 10.8.

Store:is-salon-yaletown.myshopify.com

2

Hey @isSalon,
In order to create the collapsible rows [dropdown] for your footer requires to do the custom code in your theme file. Could you please share the 4 digits collab code in the p/m so that I can implement the same feature.
Waiting to hear back from you.
Thanks

3

Thank you — sent pm.

4

I accepted the request

5

Hi @isSalon ,
Make a collapsible footer in Prestige
Go to: Online Store → Themes → Edit code → Sections → footer.liquid
Wrap your footer blocks in a collapsible element

<div class="footer-menu">
  <button class="footer-toggle">
    {{ block.settings.heading }}
  </button>
  <div class="footer-content">
    <!-- Your links here -->
  </div>
</div>

Add CSS to hide/show
Add to Assets → theme.css:

.footer-content {
  display: none;
}
.footer-menu.active .footer-content {
  display: block;
}
.footer-toggle {
  cursor: pointer;
}

Add JS to toggle
Add before in theme.liquid:

<script>
  document.querySelectorAll('.footer-toggle').forEach(button => {
    button.addEventListener('click', () => {
      button.parentElement.classList.toggle('active');
    });
  });
</script>