How can I position my social media links and policy and other stuff like this

Store Design

Topic summary

Goal: Reposition and align footer elements (social icons, policies, newsletter) to match a provided reference layout.

  • Initial approach: A responder suggested centering the footer content via CSS. Steps: Online Store → Themes → Edit code → add CSS in base.css/style.css/theme.css. The CSS targeted newsletter block, headings, social list, and bottom wrapper to center items and remove extra padding.

  • Result: The change had no visible effect for the requester, even after adding the CSS at the end of base.css. Screenshots showed the layout remained unchanged.

  • Follow-up suggestion: Another responder advised editing theme.liquid and pasting code before the closing tag. However, the actual code snippet was not included in the message (only screenshots), so the actionable content is incomplete.

  • Status: Unresolved. Next steps likely require correct, theme-specific selectors or the missing theme.liquid code, and verification that the CSS is loaded. Images are central to understanding the desired vs. current layout.

Summarized with AI on January 19. AI used: gpt-5.
1

website: gatewaymidera.com
password: GatewayMidera45

My icons/links in my footer look like this

GatewayMidera_0-1693511350994.png
GatewayMidera_0-1693511350994.png1920Ă—627 25.4 KB

and i want it to look like this"

GatewayMidera_1-1693511393556.png
GatewayMidera_1-1693511393556.png1920Ă—498 17.1 KB

how do i move around the stuff

1 Like
2

Hi @GatewayMidera

Do you like to align it all in center? If it is check this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
footer.footer.color-inverse.gradient.section-sections--19624336851232__footer-padding * {
    padding-bottom: 0px;
}

.footer-block--newsletter {
    justify-content: center;
    flex-direction: column;
}

.footer-block__newsletter {
    margin: auto;
}

h2.footer-block__heading {
    text-align: center;
}

form#ContactFooter {
    margin: auto;
}

ul.footer__list-social.list-unstyled.list-social {
    align-self: center;
}

.footer__content-bottom-wrapper.page-width {
    justify-content: center;
}

I hope it help.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

It did not work, I added it to the bottom of base and it did not change

GatewayMidera_0-1693514717604.png
GatewayMidera_0-1693514717604.png1918Ă—898 72.3 KB

results:

GatewayMidera_1-1693514733491.png
GatewayMidera_1-1693514733491.png1920Ă—737 140 KB

4

Hi @GatewayMidera ,

This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.

While I acknowledge that this issue falls short of the desired outcome, I have an idea that I believe might be of help:

  1. Go to Online Store → Theme → Edit code
  2. Open your theme.liquid file
  3. Paste below code before :

Beae_Anthony_0-1692221515245.png
Beae_Anthony_0-1692221515245.png1830Ă—745 86.5 KB

Beae_Anthony_0-1693519964029.png
Beae_Anthony_0-1693519964029.png1787Ă—704 28.3 KB

Best regards,

Anthony

1 Like