hello, I am trying to make the arrow button on the newsletter a button with text like in the second image. How do I do this? thanks!
store: link
password: first
Topic summary
A user wants to transform their newsletter’s arrow icon into a full button with “Subscribe” text, similar to a reference image they provided.
Solution Provided:
A two-part customization was shared:
- Part 1 (Markup): Modify
footer.liquidto add “Subscribe” text and reposition the button below the input field by replacing code after<div class="field"> - Part 2 (Styling): Add CSS to
base.cssto style the button with black background, white text, proper dimensions (47px height), and spacing
Current Status:
The original poster confirmed the solution worked. However, a second user encountered difficulty locating the correct code section, finding two instances of <div class="field"> in their Dawn theme’s footer.liquid. They tried replacing both sections individually and together without success, and included screenshots showing both locations for clarification.
The discussion remains open with the second user awaiting guidance on which specific section to modify.
Hey @ascended ,
Part 1
First we will have to adjust the markup to add the “Subscribe” text and move it under the input field.
Step 1: Go to Online Store
Step 2:Edit Code
Step 3: Find footer.liquid
Step 4: Replace the existing code after
and before {%- if form.errors -%}
Approximate location for reference
Part 2:
Step 1: Find base.css and paste the following code at the bottom
.newsletter-form__field-wrapper
.newsletter-form__button.field__button {
display: flex;
position: relative;
width: 100%;
height: 47px;
background: black !important;
color: white;
margin-top: 8px;
left: 0;
gap: 8px;
}
Test result in a fresh Dawn theme
1 Like
Thank you!
Hi Maverick,
I found the section but it looks like there are 2 locations for "dv class=“field” in my dawn theme. I tried replacing both sections with your code, just the top, and just the bottom but it didn’t come out right. Any other suggestions?
Below are larger images for both sections (top)
Bottom section.
