Shopify themes, liquid, logos, and UX
Hi guys, I need help with a few footer adjustments.
Move the bottom section higher, like in the picture:
Make the headings (STORE, LEGAL, NEWSLETTER) bold.
Set the text under the "Store" and "Legal" columns to the same size as the text that says "Stay up to date with the new collections, products, and exclusive offers." And slightly emphasize it—don’t make it bold, just a little more noticeable, maybe by simply making it white.
I want it to look like this:
My store URL: https://1049xn-ya.myshopify.com/
Thank you so much, I really appreciate your help!
Tim
Hi @CreatorTim ,
Thank you for your question!
Please go to Theme editor > Theme settings > Custom CSS to add the following code:
1, Move the badges up:
h2.footer-block__heading.inline-richtext {
font-weight: bold;
text-transform: uppercase;
}
2, Make them uppercase:
h2.footer-block__heading.inline-richtext {
font-weight: bold;
text-transform: uppercase;
}
3, Adjust the font size and white color:
ul.footer-block__details-content.list-unstyled li a {
color: #fff !important;
font-size: 16px;
}
If you need to make the text below Newsletter white as well:
.footer-block--newsletter p {
color: #fff;
}
After that, you should get this result:
I hope my answer is helpful!
Best,
Liz.
Hey, I just want to move the bottom section up, how do I do that?
Thank you,
Tim
Regarding the footer adjustment, please help me replace the previous code with this new set:
.footer__content-top {
padding-bottom: unset !important;
}
.footer__content-bottom {
padding-top: unset !important;
}
I hope it solve your problem now!
Hey, thanks for your response, but the store name and the year didn’t move up.
Do you know how to also move it up?
Thanks!
Tim
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;
}
}
Hey, it did move up, but somehow the whole thing got wider, and now it looks like this:
I want the width to stay the same as before; I just wanted to move it up.
Thanks,
Tim
Hi @CreatorTim ,
Upon checking, I see that you have adjusted it yourself https://prnt.sc/Xa8j1ToVBfGw is that right? Then I am glad to know that we have assisted in resolving this problem!
Best,
Liz.
Hi @CreatorTim
TRy this one.
.footer__content-bottom {
display: flex;
flex-direction: row-reverse;
max-width: var(--page-width);
margin: auto;
padding: 0 5rem;
}
.footer__content-top.page-width {
padding-bottom: 3rem;
}
.footer-block--newsletter h2 {
font-weight: bold;
}
.footer-block__newsletter p.newsletter-title,
.footer-block__details-content .list-menu__item--link {
opacity: 1 !important;
color: white !important;
}
Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025