Left align social media icons in the footer DAWN THEME

Store Design
, ,

Topic summary

A user seeks to left-align social media icons in the footer of Shopify’s Dawn theme.

Solutions Provided:

Multiple community members offered CSS-based fixes:

  • Custom CSS injection: Add code to theme.liquid file above the </body> tag to override default alignment
  • Direct CSS modification: Insert alignment rules into base.css or section-footer.css files targeting .footer__content-top .footer__list-social classes
  • Flexbox approach: Use justify-content: flex-start on .footer__list-social.list-social:only-child selector

Outcome:

The original poster confirmed one solution worked perfectly. A follow-up question asked about shifting icons slightly right to align with the quick links column, which was also successfully resolved.

Technical Details:

All solutions involve adding CSS rules to theme files, either through the code editor (Online Store → Edit Code) or by targeting specific stylesheet files like section-footer.css.

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

Hi Shopify community!

I am wanting to left align social media icons in the footer on Dawn theme as per screenshot below.

Screenshot 2023-09-12 at 6.18.52 pm.png
Screenshot 2023-09-12 at 6.18.52 pm.png1338×423 42.5 KB

2

Hey @sophaff

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1694507311603.png
Moeed_0-1694507311603.png1853×507 19.4 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hello @sophaff

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.footer .footer__content-top .footer__list-social {
    right: auto !important;
    left: -16px;
    top: 5px;
}
1 Like
4

Hi @sophaff

Could you share your store URL?

5

Amazing thank you that worked but is there any way we can just shift it over slightly to the right so it’s lined up with the ‘quick links’ column?

6

This worked PERFECTLY. Thank you ?

1 Like
7

hi,

You can add css short code here to section-footer.css file:

.footer__list-social.list-social:only-child {
    justify-content: flex-start;
}
8

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

9

hi,

You can add css short code here to section-footer.css file:

.footer__list-social.list-social:only-child {
    justify-content: flex-start;
}