Shopify themes, liquid, logos, and UX
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/
Solved! Go to the solution
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 %}
Please let me know if it works. Thank you!
Best,
Daisy - Avada Support Team.
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;
}
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.
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;
}
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.
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 %}
Please let me know if it works. Thank you!
Best,
Daisy - Avada Support Team.
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.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025