Hi, I need help with two things in the Email Section of my Shopify store (using the Dawn theme):
-
Replace the arrow in the input field with a “Sign Up” button that has a white background and readable text.
-
Make the “Join our Newsletter” heading display on a single line (not split into two lines) in the mobile version.
Thanks in advance for any help!
1. Replace the Arrow with a “Sign Up” Button
You’ll need to customize the newsletter.liquid or newsletter-signup.liquid file depending on your Dawn theme version. Here’s how:
Steps:
-
Go to Online Store > Themes > … > Edit Code.
-
Locate the file:
sections/newsletter.liquid or sections/newsletter-signup.liquid.
-
Find the form that contains the input field and the arrow SVG (typically inside a ).
-
Replace the arrow button with the following HTML:
Sign Up
- Then add this CSS to your base.css or component-newsletter.css (depending on your structure):
css
.newsletter-button { background-color: #ffffff; color: #000000; border: 1px solid #000; padding: 10px 20px; font-weight: bold; cursor: pointer; border-radius: 4px; transition: background-color 0.3s; } .newsletter-button:hover { background-color: #f2f2f2; }
2. Keep “Join our Newsletter” on a Single Line in Mobile
This is usually a CSS issue related to font size or container width. You can force it to stay on one line with a media query.
Add this CSS to your base.css or component-newsletter.css:
css
@media screen and (max-width: 749px) { .newsletter__title { white-space: nowrap; font-size: 1.2rem; /* Adjust as needed */ } }
Make sure the heading in the newsletter.liquid file has the class newsletter__title (or whatever class is used in your theme).
Hi @user12357 ,
Could you please share your Store URL and password (if applicable) so that I can review it and provide you with the appropriate solution code?
Looking forward to your response.
Thanks!