How do i customize my footer in Dawn Theme?

Store Design
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

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/post/1647667

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