make newsletter arrow a button

[ascended]

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

[ascended]

https://ctrl7.com/

[MaverickStudio · Accepted solution]

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 <div class="field"> and before {%- if form.errors -%}

                    <input
                      id="NewsletterForm--{{ section.id }}"
                      type="email"
                      name="contact[email]"
                      class="field__input"
                      value="{{ form.email }}"
                      aria-required="true"
                      autocorrect="off"
                      autocapitalize="off"
                      autocomplete="email"
                      {% if form.errors %}
                        autofocus
                        aria-invalid="true"
                        aria-describedby="ContactFooter-error"
                      {% elsif form.posted_successfully? %}
                        aria-describedby="ContactFooter-success"
                      {% endif %}
                      placeholder="{{ 'newsletter.label' | t }}"
                      required
                    >
                    <label class="field__label" for="NewsletterForm--{{ section.id }}">
                      {{ 'newsletter.label' | t }}
                    </label>
                  </div>
                  <button
                    type="submit"
                    class="newsletter-form__button field__button"
                    name="commit"
                    id="Subscribe"
                    aria-label="{{ 'newsletter.button_label' | t }}"
                  >
                    Subscribe
                    {% render 'icon-arrow' %}
                  </button>

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

[ascended]

Thank you!

[ByronYeeHaw]

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.