How do i customize my footer in Dawn Theme?

Store Design

Topic summary

A user wants to customize their Dawn theme footer on mobile to display an accordion/collapsible category-style layout, similar to another website they referenced (blakelyeclothing.com).

Two Solutions Offered:

  1. CodeFoxer1232 provided custom CSS and JavaScript code to add collapsible functionality to footer blocks on mobile. The code adds +/- icons and click handlers to expand/collapse footer sections. They confirmed testing it successfully on a Dawn theme store and suggested adding menu titles like “Quick links” for proper functionality.

  2. Made4uo-Ribe offered CSS-only code to rearrange the footer layout on mobile (centering content, adjusting flex direction) but acknowledged it doesn’t include collapsible functionality. They noted that true collapsible content requires developer implementation and suggested exploring a free alternative via a community forum link.

Current Status:

The original poster tried both solutions but reported neither worked when implemented. The discussion remains unresolved, with the user still seeking a working solution to achieve the accordion-style mobile footer layout.

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

Hi @NoBL yes i can help you with this, I am designer and developer.

NOTE: add this code on footer.liquid file At the bottom of section.

here is code

@media (max-width: 749px) { .grid .footer-block.grid__item { margin: 0; } .grid .footer-block__heading { position: relative; margin: 0; padding: 1.5rem 0; cursor: pointer; } .grid .footer-block__heading::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 20px; text-align: center; } .grid .footer-block__heading:not(.block-collapsed)::after { content: "-"; } .grid .footer-block__heading.block-collapsed + .footer-block__details-content { visibility: hidden; opacity: 0; height: 0; margin: 0; padding: 0; transition: all .2s ease-out; overflow: hidden; } .grid .footer-block__heading + .footer-block__details-content { visibility: visible; opacity: 1; height: auto; transition: all .2s ease-out; overflow: hidden; margin-bottom: 3rem; } }

Thanks And Regards