What's your biggest current challenge? Have your say in Community Polls along the right column.

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

Solved

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

dreamtechzone_5
Shopify Partner
401 1 68

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

Accepted Solutions (2)

Dan-From-Ryviu
Shopify Partner
10344 2054 2137

This is an accepted solution.

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>

Screenshot 2024-11-01 at 14.38.49.png

- 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.

View solution in original post

DaisyVo
Shopify Partner
1080 139 154

This is an accepted solution.

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

Replies 5 (5)

DaisyVo
Shopify Partner
1080 139 154

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:

DaisyVo_0-1730446582093.png

 

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
Shopify Partner
1080 139 154

This is an accepted solution.

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
Shopify Partner
401 1 68

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.pngScreenshot 2024-11-01 143855.png

Dan-From-Ryviu
Shopify Partner
10344 2054 2137

This is an accepted solution.

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>

Screenshot 2024-11-01 at 14.38.49.png

- 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.

dreamtechzone_5
Shopify Partner
401 1 68

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