Adjusting the position of Dawn theme footer

Store Design
, , ,

Topic summary

A user seeks to reposition footer elements in Shopify’s Dawn theme, specifically moving the newsletter signup block from left-aligned to right-aligned alongside other footer content.

Multiple Solutions Provided:

  • ZestardTech suggests adding CSS to base.css to adjust .footer-block--newsletter width and display properties
  • GemPages recommends inserting custom code before the </head> tag in the theme.liquid file
  • BSS-Commerce proposes modifying both base.css and section-footer.css files with flexbox properties (display: flex, justify-content: space-between)

Follow-up Request:

The original poster later asks how to center social media icons in the footer middle instead of positioning them on the right side.

GemPages responds with additional code to replace their previous solution, though the specific implementation details appear corrupted in the thread.

Status: The discussion remains ongoing as the user refines their layout requirements. All solutions involve custom CSS modifications to Dawn theme files.

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

Hi would like to ask is it possible to change the positioning of my dawn theme footer from
This:

KelvinLeow_1-1670226126693.png
KelvinLeow_1-1670226126693.png1197×342 9.3 KB

To this:

KelvinLeow_0-1670226108034.png
KelvinLeow_0-1670226108034.png1231×325 30.4 KB

here’s my website link https://dissy-co.myshopify.com/?_ab=0&_fd=0&_sc=1

password: cheolt

1 Like
2

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >base.css and paste this at the bottom of the file:
.footer-block--newsletter {
width: 50%;
margin-top: 0;
}
.footer__blocks-wrapper {
width: 50%;
}
.footer__content-top.page-width {
display: flex;
}

ZestardTech_0-1670227103294.png
ZestardTech_0-1670227103294.png1893×276 8.35 KB

3

Hello @KelvinLeow ,

It’s GemPages support team and glad to support you today.

I would like to give you the recommendation to support you so kindly follow the steps below:

  1. Go to Online Store > Theme > Edit code of your current theme

GemPages_0-1670227282314.png
GemPages_0-1670227282314.png1857×907 102 KB

  1. Open your theme.liquid theme file

  2. Paste the below code before

For example,

GemPages_1-1670227683265.png
GemPages_1-1670227683265.png1914×911 68.1 KB

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team

4

Hi @KelvinLeow

Please follow these steps:

Navigate to Online Store > Themes > Edit code. Then find the file “base.css”, scroll down to the bottom and add these codes:

.footer .footer__content-top {
    display: flex!important;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

Find the file “section-footer.css”, scroll down to the bottom and add these codes

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

I hope that it works for you.

5

@GemPages Sorry for the trouble again, what if i want to make it in the middle instead?

KelvinLeow_0-1670396091561.png
KelvinLeow_0-1670396091561.png1386×131 3.8 KB

Moving the social media icons to the middle of the footer instead of right side of the footer.

6

Hello @KelvinLeow ,

Let’s try adding this code before to replace my old code:

Best regards,
GemPages Support Team