Footer Adjustments

Store Design
, , , ,

Topic summary

A user seeks CSS customization help for their Shopify store footer, requesting three specific changes:

Original requests:

  • Move the bottom footer section (badges/payment icons) higher to reduce spacing
  • Make column headings (STORE, LEGAL, NEWSLETTER) bold
  • Increase font size and change link colors to white for better visibility

Solution progression:

Two community members provided CSS code snippets targeting different aspects. Initial solutions addressed the heading styling and text color changes successfully.

Spacing issue:

The main challenge involved moving the bottom section upward. Multiple CSS iterations were needed:

  • First attempt used padding adjustments
  • Second attempt added flexbox properties and margin modifications
  • Final code included media queries to control layout and spacing

Current status:

The discussion appears resolved. The support member’s final check indicates the user may have successfully implemented the adjustments themselves. The solution required adding custom CSS to the theme’s Custom CSS section, with code targeting .footer__content-bottom, .footer__content-top, and related classes.

Images were central to communicating the desired outcome and troubleshooting layout issues throughout the thread.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
7

In this case, please also add this code to your theme’s custom CSS:

@media screen and (min-width: 750px) {
.footer__content-bottom-wrapper.page-width:nth-child(1) {
    flex: 5;
}
.footer__content-bottom-wrapper.page-width:nth-child(2) {
    flex: 1;
}
.footer__content-bottom {
    display: flex;
    flex-direction: row-reverse;
}
.footer__copyright {
    margin-top: 3.5rem !important;
}
}