Your footer menu is an important part of your Shopify store, providing customers with quick access to key pages like policies, contact information, and FAQs. If you want to increase or decrease the font size of your footer menu, you’ll need to adjust the CSS. Here’s a step-by-step guide on how to do it.
1. Add Custom CSS Directly To The Footer’s Settings
This option is simple and avoids editing the theme code. Easily add the following code to the Custom CSS setting included in the footer options.
.footer-block__details-content .list-menu__item--link {
font-size: 1.6rem !important; /* change the size until you're satisfied with the result */
}This method is the simplest and works great since it will adjust all your footer menus at once.
2. Bonus Tip: Adjust The Line Spacing Of The Footer Menus
After changing the font size of the footer menus, you might want to adjust their line spacing as well. This is very easy to do since it only requires that you add an extra line of code to the previous Custom CSS.
To modify both the font size and line spacing of the footer menus, add the following code to the footer’s Custom CSS field:
.footer-block__details-content .list-menu__item--link {
font-size: 1.6rem !important; /* change the size until you're satisfied with the result */
line-height: 80%; /* change the size until you're satisfied with the result */
}3. Save Your Changes
Save your changes, reload your Shopify Store’s page, and that’s it! Now your footer menus will be exactly as you wanted them!
With just a few lines of CSS, you can customize the font size of your Shopify footer menu to improve readability and branding. Need help with your Shopify Store’s customization? Feel free to reach out!