Help me move the email subscription to the footer!

Store Design
,

Topic summary

A user needs help repositioning their email newsletter subscription section to the footer of their Shopify store and aligning it properly with other footer blocks.

Current Status:

  • The newsletter section has been added to the footer but alignment issues persist
  • The user wants the email subscription aligned with other footer elements for a cohesive look

Solution Provided:
A community helper is providing custom CSS code to fix the layout:

  • Navigate to: Admin → Online Store → Themes → Assets → main.css (or base.css/style.css)
  • Add specific CSS targeting .footer-block--newsletter and .footer__blocks-wrapper classes
  • The code uses flexbox properties to control alignment and spacing

Ongoing Issue:
Despite multiple CSS iterations, the email subscription positioning remains off. The helper continues refining the code, adding !important flags and adjusting margins to achieve proper alignment with footer links and blocks.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

a7619ae0a982f03ec7841d35ea1e5361.png
a7619ae0a982f03ec7841d35ea1e5361.png1211×255 40.6 KB

As title says, I can’t move the email sub section to the footer.

Please help me!

1 Like
2

Hi @SamSukhoonNordl

Can you add the newsletter first? Thanks!

1 Like
3

I added it! :slightly_smiling_face:

4

Thanks, do you mean like this right?

Made4uoRibe_0-1720216644378.png
Made4uoRibe_0-1720216644378.png1426×241 73.6 KB

if it is check this one.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
@media only screen and (min-width: 749px){
.footer__content-top.page-width {
    display: flex;
    justify-content: space-between;
}
.footer__blocks-wrapper.grid {
    flex-grow: 3;
}
.footer-block--newsletter {
    margin-top: 0px;
    align-items: flex-start;
}
}
  • And Save.
1 Like
5

Yeah! But I want it more alligned with the other blocks so that it looks good. Thank you!

6

i add some code please, check it again. thanks!

1 Like
7

Thanks :slightly_smiling_face: I tried now but the email thingys position is way off! :disappointed_face:

8

I have tried playing around with it but can’t seem to solve it.

9

Please, replace it again.

@media only screen and (min-width: 749px){
.footer__content-top.page-width {
    display: flex;
    justify-content: space-between;
}
.footer__blocks-wrapper.grid {
    flex-grow: 3;
}
.footer-block--newsletter {
    margin-top: 7px !important;
    align-items: flex-start !important;
}
}

I add some margin same on the links.

Thanks!