How Can I move email signup to a block in the footer.

Store Design
, ,

Topic summary

A user working with Shopify’s Origin theme wants to relocate the email signup form from its current position to the footer’s fourth column, displaying it horizontally alongside other footer content rather than below.

Solution Provided:
A community member shared CSS code to be added to the theme’s main.css file that:

  • Uses flexbox to arrange footer content horizontally on desktop screens (min-width: 749px)
  • Aligns the newsletter block with other footer elements
  • Removes top margin to level the signup form with surrounding text

Implementation:
The code successfully repositioned the email signup as requested. A minor alignment issue was addressed by adding !important to the margin-top property.

Status:
The original issue appears resolved. A new question emerged about positioning the email signup on the far left instead, which remains unanswered.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hi

I am using Origin Theme and I would like to know how could I movd the email signup into a block at the footer, so it goes from below to the side on the 4th column.

Thanks a lot!

Screenshot 2024-10-04 164915.jpg
Screenshot 2024-10-04 164915.jpg2758×1171 92.3 KB

1 Like
2

Hi @BD2024

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

3

https://www.brilliancedirect.com

4

Thanks for the info, check this one.

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 (min-width: 749px) {
.footer__content-top.page-width {
    display: flex;
    width: 100%;
}

.footer__blocks-wrapper.grid {
    flex-grow: 1;
}

.footer-block--newsletter {
    margin-top: 0;
}

.footer-block__newsletter {
    align-self: flex-start;
}
}

And Save.

Result:

Made4uoRibe_0-1728078607338.png
Made4uoRibe_0-1728078607338.png1560×320 8.31 KB

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

1 Like
5

Thanks so much, looking much better now, Do you know how can I do to have it level with the text like in your picture?

Thanks so much!!

BD2024_0-1728079286575.png
BD2024_0-1728079286575.png2336×513 20.9 KB

6

Welcome! I checked it again, and it’s already aligned on my end. Feel free to add something important, or you can replace it using the code below.

@media only screen and (min-width: 749px) {
.footer__content-top.page-width {
    display: flex;
    width: 100%;
}

.footer__blocks-wrapper.grid {
    flex-grow: 1;
}

.footer-block--newsletter {
    margin-top: 0 !important;
}

.footer-block__newsletter {
    align-self: flex-start;
}
}

And save.

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

1 Like
7

Welcome! Would you mind hitting ‘like’ as well? Thanks!

8

Hi @Made4uo-Ribe ,
How to make that email sign up placed on far left?