Shopify themes, liquid, logos, and UX
Hello everyone,
I want to change the position of my Newsletter form in the footer menu of the Dawn Theme. Please help me.
Thank you in advance for your help!
Store: https://delicious-fruits-vegetables.myshopify.com/
Password: Admin
Solved! Go to the solution
This is an accepted solution.
Please add this code to theme.liquid file, after <head> in Online Store > Themes > Edit code
<style>
@media (min-width: 750px) {
html .footer__content-top {
display: grid;
grid-template-columns: 4fr auto;
grid-template-rows: 1fr;
}
html .footer__content-top .footer-block--newsletter {
align-items: flex-start;
margin-top: 0px;
}
}
</style>
- Helpful? Like and Accept solution! Or Support me: Buy Coffee
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
This is an accepted solution.
To help the change not affect the mobile version, you can use this to apply on desktop instead:
@media screen and (min-width: 768px){
.footer__content-top.page-width {
display: flex !important;
}
.footer__content-top .footer__blocks-wrapper {
width: 75% !important;
}
.footer__content-top .footer-block--newsletter {
align-items: start !important;
margin-top: 0 !important;
}
}
Hope this can help!
Best, Daisy
Here is the code you can use:
.footer__content-top.page-width {
display: flex !important;
}
.footer__content-top .footer__blocks-wrapper {
width: 75% !important;
}
.footer__content-top .footer-block--newsletter {
align-items: start !important;
margin-top: 0 !important;
}
Here is the result:
You can add the code in the Custom CSS field.
Hope this can help!
Best,
Daisy
This is an accepted solution.
To help the change not affect the mobile version, you can use this to apply on desktop instead:
@media screen and (min-width: 768px){
.footer__content-top.page-width {
display: flex !important;
}
.footer__content-top .footer__blocks-wrapper {
width: 75% !important;
}
.footer__content-top .footer-block--newsletter {
align-items: start !important;
margin-top: 0 !important;
}
}
Hope this can help!
Best, Daisy
Wow Great. It worked. Thank you So much. The newsletter form can be placed on the left side in mobile mode. Also can change the style of newsletter form like below image? Is it possible?
This is an accepted solution.
Please add this code to theme.liquid file, after <head> in Online Store > Themes > Edit code
<style>
@media (min-width: 750px) {
html .footer__content-top {
display: grid;
grid-template-columns: 4fr auto;
grid-template-rows: 1fr;
}
html .footer__content-top .footer-block--newsletter {
align-items: flex-start;
margin-top: 0px;
}
}
</style>
- Helpful? Like and Accept solution! Or Support me: Buy Coffee
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Wow Great. It worked. Thank you So much. The newsletter form can be placed on the left side in mobile mode. Also can change the style of newsletter form like below image? Is it possible?
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024