Re: How to Change Newsletter Form Position in Footer Menu ( Shopify Dawn Theme )

dreamtechzone_5 · ‎11-01-2024

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

Screenshot 2024-11-01 132328.png

Dan-From-Ryviu · ‎11-01-2024

Hi @dreamtechzone_5

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 & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

DaisyVo · ‎11-01-2024

Hi @dreamtechzone_5

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

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

View solution in original post

DaisyVo · ‎11-01-2024

Hi @dreamtechzone_5

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

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

DaisyVo · ‎11-01-2024

Hi @dreamtechzone_5

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

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

dreamtechzone_5 · ‎11-01-2024

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?

Screenshot 2024-11-01 141320.png Screenshot 2024-11-01 143855.png

Dan-From-Ryviu · ‎11-01-2024

Hi @dreamtechzone_5

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 & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

dreamtechzone_5 · ‎11-01-2024

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?

Re: How to Change Newsletter Form Position in Footer Menu ( Shopify Dawn Theme )

How to Change Newsletter Form Position in Footer Menu ( Shopify Dawn Theme )

Community Blog Articles