Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hi there,
Can anyone please adivse how to move the email signup to the right block and align with left menu links? Also how can I make the space between blocks smaller? Thank you.
example:
Best regards,
Tara
Solved! Go to the solution
This is an accepted solution.
Hi @Tara123 ,
You can edit the CSS to customize the footer on your website. Add the following code at the end of your base.css file:
h2.footer-block__heading.inline-richtext {
text-align: start !important;
}
.footer-block--newsletter.scroll-trigger.animate--slide-in {
margin-top: 0px !important;
}
.footer__content-top.page-width {
display: flex;
align-items: flex-start;
gap: 40px;
flex-wrap: wrap;
}
@media only screen and (min-width: 750px) {
.footer-block--newsletter.scroll-trigger.animate--slide-in {
flex: 1;
}
.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in {
flex: 2;
}
}
--> Result after adding:
Hope it helps @Tara123
If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here ☕.
B2B Solution & Custom Pricing | Product Labels by BSS
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
Hey @Tara123
Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.
Best Regards,
Moeed
Hi Moeed,
Thanks for your kind response. My website: veepli.com, PW: owcrjj
Best Regards,
This is an accepted solution.
Hi @Tara123 ,
You can edit the CSS to customize the footer on your website. Add the following code at the end of your base.css file:
h2.footer-block__heading.inline-richtext {
text-align: start !important;
}
.footer-block--newsletter.scroll-trigger.animate--slide-in {
margin-top: 0px !important;
}
.footer__content-top.page-width {
display: flex;
align-items: flex-start;
gap: 40px;
flex-wrap: wrap;
}
@media only screen and (min-width: 750px) {
.footer-block--newsletter.scroll-trigger.animate--slide-in {
flex: 1;
}
.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in {
flex: 2;
}
}
--> Result after adding:
Hope it helps @Tara123
If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here ☕.
B2B Solution & Custom Pricing | Product Labels by BSS
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
Thank you so much. It works.
A further question, for mobile view, how can I decrease the top margin of email signup block to the same as the other blocks? The space looks large. Thank you.
Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025