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.
1

I’m wanting to change my footers look, in mobile mode. To a category type theme. I pretty really much want the end result to look exactly like this one.

Screenshot_20240903_190406_Samsung Internet.jpg
Screenshot_20240903_190406_Samsung Internet.jpg1080×1725 59.7 KB

1 Like
2

My website URL is www.noblthelabel.com

The website I am referring to is https://blakelyclothing.com/

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

4

Hi @NoBL

To achieve a dropdown style, you need to add collapsible content to the footer. If this feature is not available in your theme, you will need a developer to install it. In the meantime, I have rearranged your footer on the mobile screen to match the sample website you provided, but without the collapsible feature.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media only screen and (max-width: 749px){
.footer__content-top.page-width {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}
.footer-block--newsletter {
    align-self: center;
}
.footer__content-bottom {
    border-top: 0;
}
}

And Save.

Result:

Made4uoRibe_0-1725363284194.png
Made4uoRibe_0-1725363284194.png711×756 17.2 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

5

Thank you for this! I will try this out tomorrow when I am on my computer.

Is it possible to have the text center of the screen? So that it is not on the left side?

6

Hello @Made4uo-Ribe I copied and pasted the code into my base.css although no changes were made.

7

Tried this code, this also did not work.

8

Hi @NoBL

I hope you doing well, So so I already try this code on my testing store in dawn theme and it will work perfectly. I think You should have add title for your menus like, Quick links or footer menu.

download (4).png
download (4).png302×450 8.49 KB

download (1).png
download (1).png418×641 10.9 KB

download (3).png
download (3).png376×440 5.1 KB

Thanks And Regards

9

I’m sorry, I didn’t provide a perfect solution since adding collapsible content in the footer requires a developer.

Alternatively, we can explore a free option.

The code I provided only adjusts the footer without the collapsible content.

Please check if this works with your theme.

https://community.shopify.com/c/shopify-design/dawn-theme-accordion-collapsible-footer/m-p/1647667

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!