Small design tweaks can make a big difference in how professional your Shopify store looks. One common customization is centering the footer elements and menus, which is great for symmetry, clarity, and that modern clean vibe. This quick guide will show you how to center-align your footer menus and branding info in your Shopify theme with a few simple CSS tweaks.
All the codes below need to be added to the Footer’s Custom CSS field, which you can locate in the Shopify Theme Editor. Click on the Footer section and scroll through the settings all the way down to find it.
1. Center-Align The Footer Menus Items And Headings
The following code will center the footer menus for mobile and desktop views:
/* add this to align your footer menus in the desktop view */
.footer-block__details-content, .footer-block__heading {
text-align: center;
}
/* add this to align your footer menus in the mobile view */
.footer-block__heading, .list-menu__item--link {
justify-content: center;
}2. Fix The Last Item In The Desktop View
In some free Shopify Themes, when you center the footer items, the last line of each menu seems to be displaced, breaking the sleek look you’re looking for. Add the following line to your Custom CSS code to fix it.
.footer-block__details-content > li:not(:last-child) {
margin-right: 0rem !important;
}3. Bonus: Center-Align The Brand Info Block In Shopify’s Footer
Many stores like to include the Brand Info block in the footer. After changing the alignment of the footer’s menus, you might want to adjust the position of your Branding Info to maximize the streamlined aesthetic of your store. Add the following code to the Custom CSS field to achieve it.
This code works both for desktop and mobile devices:
.footer-block__brand-info {
display: flex;
flex-direction: column;
align-items: center;
}And that’s it! With just a few lines of CSS, you can customize your Shopify footer menus and info blocks to improve aesthetics and branding. Need help with your Shopify Store’s customization? Feel free to reach out!