Help with Customizing Email Section in Shopify (Dawn Theme)

Hi, I need help with two things in the Email Section of my Shopify store (using the Dawn theme):

  1. Replace the arrow in the input field with a “Sign Up” button that has a white background and readable text.

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

  1. Go to Online Store > Themes > … > Edit Code.

  2. Locate the file:
    sections/newsletter.liquid or sections/newsletter-signup.liquid.

  3. Find the form that contains the input field and the arrow SVG (typically inside a ).

  4. Replace the arrow button with the following HTML:

Sign Up

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

no longer needed thanks!

You are most Welcome :blush: