Need Help With Center Alignment of Headers & Quick Links in Footer

Store Design
, , ,

Topic summary

A user seeks help centering footer elements in their Shopify store, specifically wanting to:

Main Issues:

  • Center-align quick links and their category headers
  • Left-align the email signup form header above its input box
  • Remove excess spacing between categories and on the sides

Screenshots provided show the current misaligned footer layout.

Solutions Offered:

Two community members requested the store URL for better diagnosis.

Two detailed CSS solutions were provided:

  1. Ellie-BOGOS suggested:

    • Editing base.css to align links and headers (with screenshot guide)
    • Adding CSS code to theme.liquid to left-align the email header

  2. topnewyork provided alternative CSS code to paste in theme.liquid before </head>, including a result screenshot showing centered alignment

Status: The discussion remains open with a follow-up from Ellie-BOGOS checking if the solutions worked. No confirmation yet from the original poster on whether either approach resolved the issue.

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

Hi,

I Need Help With Center Alignment of Headers & Quick Links in Footer. I looked through many discussion posts and tried different codes, but it’s still not aligned properly. Can someone help please? I attached pictures below.

I would like the quick links to be centered AND the header of each category to be centered above the links as well. I would also like the header of the email signup form to be aligned left, so it’s directly above the email signup box.

Any and all help would truly be appreciated! Thanks!

*Also, if someone can tell me what code to use to remove all the extra dead space between the categories and on the sides, that would be great and truly appreciated!

Screenshot 2025-02-27 at 6.32.51 PM.png
Screenshot 2025-02-27 at 6.32.51 PM.png2654×926 131 KB

Screenshot 2025-02-27 at 6.42.29 PM.png
Screenshot 2025-02-27 at 6.42.29 PM.png2642×904 122 KB

2

Kindly provide your store’s URL.

3

Hi @sculptingbodies
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

4

Hi @sculptingbodies

This is Ellie from BOGOS: Free gifts, Discounts & Bundles

  1. To align the links & headers:

Go to theme > Edit code > Go to base.css file

Follow the guide on the image

Center Footer Screenshot.png
Center Footer Screenshot.png2552×1350 141 KB

  1. To align left the email header

Go to theme > Edit code > Go to theme.liquid file

Add this CSS code

<style>
.footer-block--newsletter{ margin-top: unset !important; }
.footer-block--newsletter .footer-block__heading{ text-align: left !important; }
</style>

Try it on your end!

5

Hi @sculptingbodies

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

Result:

topnewyork_0-1740726438006.png
topnewyork_0-1740726438006.png1366×492 17.2 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

6

Hi @sculptingbodies :blush: I just wanted to check in and see if you’ve been able to solve your problem yet? I truly hope my recommendations help. Let me know if this works for you or if you have any other questions!

:blush: Appreciate it if you could Like and Accept as Solution if my answer was helpful!