Move social media icons in the footer

Store Design
, , , ,

Topic summary

A user seeks help repositioning social media icons in their Shopify store footer—specifically, moving them beneath the logo and aligning them to the left instead of center.

Proposed Solutions:

Multiple respondents offered CSS and theme customization approaches:

  • Edit section-footer.css: Change alignment property from ‘center’ to ‘left’
  • Add custom CSS to theme.liquid: Insert <style> block before </body> tag with media queries targeting .footer-block and using justify-content: left !important
  • Modify footer.liquid structure: Relocate the social icons render code within the Sections/footer.liquid file to reposition elements

All solutions involve accessing Online Store → Theme → Edit Code and modifying either CSS files or Liquid template files. Several responses include screenshots demonstrating code placement.

Status: Multiple viable solutions provided; awaiting confirmation from original poster on which approach resolved the issue. The discussion remains open with no marked accepted solution yet.

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

Hi guys, anybody know how I can move the social media icons in the footer to be underneath my logo on the left rather than being centered? Any help would be greatly appreciated!

Website: fhuzeo.com

2

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the section-footer.css file and change the ‘center’ to ‘left’

AnneLuo_0-1714966467377.png
AnneLuo_0-1714966467377.png1046×776 64.4 KB

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

3

Hello @flammagreg

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (min-width: 750px) { .footer-block--newsletter { justify-content: left !important; } }

techlyser_web_0-1714968658868.png
techlyser_web_0-1714968658868.png1314×375 9.32 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

4

This is Noah from PageFly - Shopify Page Builder App

Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

5

Hi @flammagreg ,

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code

EBOOST_1-1672356985580.png
EBOOST_1-1672356985580.png532×438 15.6 KB

  1. Sections/footer.liquid

  2. Find code below

{%- if section.settings.show_social and has_social_icons -%}
                        {%- render 'social-icons', class: 'footer__list-social' -%}
                       {%- endif -%}
  1. Move code likes the screenshot below

EBOOST_0-1714985238722.png
EBOOST_0-1714985238722.png1591×739 57.7 KB

6

Hello,

I am San from MS Web designer.

Go to Themes > Edit code > Theme.liquid > at the bottom place this code before

Do let me know in case of any concerns.

Regards,

San