Newsletter Form Issues ( Shopify Dawn Theme )

Solved

Newsletter Form Issues ( Shopify Dawn Theme )

dreamtechzone_5
Shopify Partner
483 1 89

Hello Everyone!

 

I have changed the newsletter style through coding. But the subscribe button does not look good. Also, I want to keep the corner radius of the subscribe button 4px. I have added a reference website link. I would like to keep the newsletter form as the reference website.

 

Store Url: https://delicious-fruits-vegetables.myshopify.com/

Password: Admin

 

Reference website: https://allureluxe-pastelgrid.myshopify.com/

 

Screenshot 2025-02-02 164959.png

 

 

Accepted Solution (1)

DaisyVo
Shopify Partner
3607 402 485

This is an accepted solution.

Hi @dreamtechzone_5 

This code is for your 2nd requirement, about background color and spacing

I hope you are well. You can follow our instructions below:1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for "theme.liquid" file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for </head> tag and add the following code above </head> tag: https://prnt.sc/KWtKYyZkDtYJ

Here is the code for Step 3:
{% style %}
button#Subscribe {
background: #C62222 !important;
}
.field:has(button#Subscribe) {
padding-right: 120px;
}
{% endstyle %}

DaisyVo_0-1738508873191.png

 


Please let me know if it works. Thank you!
Best,
Daisy - Avada Support Team.

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 6 (6)

CodingFifty
Shopify Partner
562 83 103

Hi @dreamtechzone_5,


Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

button#Subscribe {
    padding: 0px 10px !important;
    border-radius: 4px !important;
}
Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com
dreamtechzone_5
Shopify Partner
483 1 89

Thank you. I want to make the subscribe button a little bigger and add a hover to the subscribe button. I want to keep the space between the email and the subscribe button like the image below. I want to keep the background color of the subscribe button #C62222 and the hover color #fff.

 

Screenshot 2025-02-02 172947.png

CodingFifty
Shopify Partner
562 83 103

Hi @dreamtechzone_5,

 

.field:has(button#Subscribe) {
    padding-right: 80px !important;
}

button#Subscribe:hover {
    background: #fff !important;
    color: black !important;
}

button#Subscribe {
    padding: 0 10px !important;
    border-radius: 0 !important;
    background: #C62222 !important;
}
Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com
dreamtechzone_5
Shopify Partner
483 1 89

Thank you very much. It worked. But when I click on the email, the email field appears larger than the subscribe button. It doesn't look good.

Screenshot (36).png

DaisyVo
Shopify Partner
3607 402 485

This is an accepted solution.

Hi @dreamtechzone_5 

This code is for your 2nd requirement, about background color and spacing

I hope you are well. You can follow our instructions below:1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for "theme.liquid" file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for </head> tag and add the following code above </head> tag: https://prnt.sc/KWtKYyZkDtYJ

Here is the code for Step 3:
{% style %}
button#Subscribe {
background: #C62222 !important;
}
.field:has(button#Subscribe) {
padding-right: 120px;
}
{% endstyle %}

DaisyVo_0-1738508873191.png

 


Please let me know if it works. Thank you!
Best,
Daisy - Avada Support Team.

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
483 1 89

Thank you very much. It worked. But when I click on the email, the email field appears larger than the subscribe button. It doesn't look good.

dreamtechzone_5_0-1738567006440.png