How can I reposition the email signup box on my store page?

Store Design
,

Topic summary

A store owner wants to reposition their email signup box to match a reference design, specifically moving it to the right side of the footer alongside navigation links arranged in three columns.

Initial Solution Provided:

  • PageFly-Victor shared custom CSS code to be added to the section-footer.css file
  • The code uses flexbox properties to restructure the footer layout
  • Implementation requires editing theme code through Online Store → Theme → Edit code

Follow-up Issue:
After applying the initial code, the layout didn’t work as expected—the email signup overlapped with the menu, and the three-column menu structure wasn’t properly aligned to the right.

Revised Fix:
PageFly-Victor provided an updated CSS solution that removes conflicting margin-left properties and adds text-align centering for footer headings and list items.

Status: The discussion remains ongoing as the store owner works to achieve the desired footer layout with proper positioning of both the email signup box and navigation menus.

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

there are two photos below the white is my store the black is an idea that im looking to create a similar idea is there any idea on how I can move the email box up and the links to the right . thank you

my store
my store2056×870 27.7 KB

idea
idea2444×702 31.4 KB

2

Hello @kickduo

To provide you with the most precise solution in this case, could you please share your page URL ( with pass if your store password is enabled )?

Thank you and hope to hear from you.
Best regards,
GemPages Support Team

3

Kickduo.com password pdog
Thank you very much

4

Hi [email removed]Kickduo,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file section-footer.css

Step 3: Paste the below code at bottom of the file → Save

@media(min-width:767px){

#shopify-section-footer .footer__content-top.page-width{
display: flex;
    flex-flow: row-reverse;
}
#shopify-section-footer .footer__content-top.page-width .footer__blocks-wrapper{
width: 80%;
}
#shopify-section-footer .footer__content-top.page-width .footer-block--newsletter{
flex-direction: column;
align-items: flex-start;
margin-top:0
}
}

PageFlyVictor_0-1678931075867.png
PageFlyVictor_0-1678931075867.png2998×862 186 KB

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

1 Like
5

fantastic help thanks

6

You are welcome. I’m glad when I can help you :heart_eyes:

7

hello can you take a look at my store I used the code and now its looking a bit different

Screenshot 2023-03-19 at 16.49.38.png
Screenshot 2023-03-19 at 16.49.38.png2356×764 31.7 KB

can the three colums with menus be moved over to the right and the email not overlap the menu

8

to fix it you can remove the margin left so you added and add my code

@media(min-width:767px){
#shopify-section-footer h2,#shopify-section-footer li{
text-align:center !important
}}