How can I customize the footer in Dawn theme?

Store Design
,
1

Hey! Im trying to customize my footer and there’s not really that many options. Im kind of new but I see people with great looking footers and I cant figure out how they do it. My footer at the moment is kind of bland, that’s mostly because I cant figure out how people get the “email signup” in the same section as the quick links. My footer is the first one and I want it to look similar to the second image. They have their padding between text much smaller and the email is next to the quick menu. They also have 2 different colors between the two footer sections. How do you customize this? Thanks!

507b22a5961d4ee607145c819488227e.png
507b22a5961d4ee607145c819488227e.png1862×500 19.1 KB

6f7322b661cf804d81026040ab5971e9.png
6f7322b661cf804d81026040ab5971e9.png2528×406 29.4 KB

1 Like
2

Hi @KennyO

Would you mind to share your Store URL website? with password if its protected. Thanks!

3

Hey, ty for the reply! My url is https://7276da-2.myshopify.com/

1 Like
4

Thank you, try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “section-footer.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.footer__content-top.page-width {
    display: flex;
    justify-content: space-around;
}
h2.footer-block__heading.inline-richtext {
    text-align: left;
}
ul.footer-block__details-content.list-unstyled {
    display: flex;
    flex-direction: column;
    justify-content: left;
    text-align: left;
}
.footer-block--newsletter {
    display: flex;
    align-items: flex-start;
    margin-top: 0px;
}
.footer__content-bottom.scroll-trigger.animate--slide-in {
    background: white;
    color: black;
}
.footer__content-bottom.scroll-trigger.animate--slide-in {
    display: flex;
    align-content: center;
    flex-direction: row-reverse;
}
#shopify-section-sections--19615886770514__footer > footer > div.footer__content-bottom.scroll-trigger.animate--slide-in > div:nth-child(1) {
    padding-left: 0px;
    padding-right: 15%;
}
#shopify-section-sections--19615886770514__footer > footer > div.footer__content-bottom.scroll-trigger.animate--slide-in > div.footer__content-bottom-wrapper.page-width.footer__content-bottom-wrapper--center {
    padding-left: 15%;
}

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

1 Like