Dawn Theme - How to get rid of the Newsletter input border?

Store Design
, , ,

Topic summary

A user seeks to remove the border around the newsletter input field and eliminate the double border on hover, while keeping just an underline beneath the input area.

Solution Provided:

  • Add custom CSS code to the theme.liquid file before the </body> tag
  • The code targets .footer .field elements to remove borders, box-shadows, and border-radius
  • Uses pointer-events: none and positioning to override default styling

Resolution:

  • Initial code worked only for the footer newsletter section
  • User successfully adapted the solution by changing .footer to .newsletter in the CSS
  • The customization now functions correctly across all newsletter sections

Status: Resolved - User confirmed the modified CSS solution works as intended.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
2

Hello @xnyjyh

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.footer .field::after{ pointer-events: none; content: ""; position: absolute; top: var(--inputs-border-width); right: var(--inputs-border-width); bottom: var(--inputs-border-width); left: var(--inputs-border-width); border: 0.1rem solid transparent; border-radius: var(--inputs-radius); box-shadow: unset !important; transition: box-shadow var(--duration-short) ease; z-index: 1; border-bottom: 2px solid #000; } .footer .field::before{ pointer-events: none; content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: unset !important; box-shadow: unset !important; z-index: -1; } .footer .field__input:focus-visible{ box-shadow: unset !important; outline: 0; border-radius: unset !important; }