How to change placement of footer menu & email sign up

Store Design
, , ,

Topic summary

A user seeks to reorganize their footer layout to match a reference design, specifically wanting to reposition the email signup box and footer menu placement, plus adjust social media icon distribution.

Initial Confusion:

  • Multiple helpers initially misunderstood the request as a color change (black to white)
  • User clarified they want layout restructuring, not color modifications

Solution Provided:

  • Made4uo-Ribe delivered working CSS code targeting footer content alignment
  • Code uses flexbox properties (flex-direction: row-reverse, column gaps, width adjustments) to reposition elements
  • Implementation requires adding CSS to Shopify theme files (base.css, theme.css, or styles.css)

Implementation Steps:

  1. Navigate to Shopify Admin → Online Store → Theme → Edit code
  2. Locate the appropriate CSS file
  3. Insert provided CSS at bottom of file and save

Status: Resolved - Original poster confirmed the solution worked exactly as intended. A follow-up user later requested clarification on where to paste the same code for their similar issue.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
13

Hi @lyna123

Im sorry i didnt notice the notification to this post. Thanks for the info,

I just like to clarify from footer black to footer white right? As image youve provided?

Only the alignment oyu like to change or also the background color?

Check this one.

@media only screen and (min-width: 749px){
.footer__content-top.page-width {
    display: flex;
    flex-direction: row-reverse;  
    column-gap: 5% !important;
}
.footer-block--newsletter {
    flex-direction: column;
    flex-wrap: wrap;
    width: 20%;
     margin-top: 0px;
}
ul.list-unstyled.list-social.footer__list-social, .footer__follow-on-shop {
    align-self: flex-start;
}

.footer-block .grid--4-col-tablet .grid__item {
        width: 20%;
    }

.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet {
    flex-grow: 2;
}

.footer__follow-on-shop:not(:first-child):not(:last-child) {
        text-align: left !important;
    }
}

And Save.

Result:

Made4uoRibe_0-1716556150150.png
Made4uoRibe_0-1716556150150.png1888×591 34.1 KB

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

1 Like