Dawn theme - Mobile footer accordion menu

Store Design
,

Topic summary

Users seek to implement an accordion-style collapsible footer menu for mobile view in Shopify’s Dawn theme. The main challenge involves making footer sections expandable/collapsible with +/- icons on mobile devices while keeping them static on desktop.

Primary Solution:
Mr_RaviRaj provided CSS and JavaScript code to add to footer.liquid that creates the accordion functionality. The code uses media queries to target mobile screens (max-width: 749px) and adds click handlers to footer headings.

Common Issues & Refinements:

  • Default state problem: Multiple users reported accordions opening by default instead of being collapsed
  • Working solution: Moniox95 and vinceservidad shared updated code that sets block-collapsed class by default, ensuring sections start closed
  • Auto-close behavior: Some requested that opening one section automatically closes others (unresolved)
  • Selective application: Users want to exclude certain footer blocks (like social media or newsletter signup) from accordion behavior

Theme Compatibility:
The solution works primarily for Dawn theme (versions 2.5.0 through 11.0.0 confirmed). Users with other themes (Prestige, Sense, Debutify) requested adaptations, with suggestions to modify the provided code or use alternative CodePen examples.

Code snippets and implementation details are extensively shared throughout the thread.

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

Hi @Mr_RaviRaj @King-Kang @NS2982

Thank you it works perfectly fine with DAWN 2.5.0. Is there a way that the accordions tabs are closed at first. As all of them are open in the beginning/default?

1 Like