How can I change my 'Subscribe' button to an arrow in Prestige theme?

[admintb]

Dear Community

I am currently using the "Prestige" theme and would like to make a change to my Newsletter Subscribe Form.

At the moment it looks like this for me:

And I want this layout:

[DavidEKim · Accepted solution]

@admintb 

Hi,

To change the newsletter form for Prestige theme, please follow the steps below.

1. Go to Edit code > Sections > Open newsletter.liquid file.

2. Go to line 51 and find the code below. (from line 51 to line 55)

            <div class="Newsletter__Inner">
              <input type="hidden" name="contact[tags]" value="newsletter">
              <input type="email" name="contact[email]" class="Form__Input" aria-label="{{ 'home_page.newsletter.input' | t }}" placeholder="{{ 'home_page.newsletter.input' | t }}" required>
              <button type="submit" class="Form__Submit Button Button--primary">{{ 'home_page.newsletter.submit' | t }}</button>
            </div>

3. Replace the above code with the code below.

            <div class="Newsletter__Inner">
              <input type="hidden" name="contact[tags]" value="newsletter">
              <input type="email" name="contact[email]" class="Form__Input" id="contact-email" aria-label="{{ 'home_page.newsletter.input' | t }}" placeholder="{{ 'home_page.newsletter.input' | t }}" required>
              {% comment %}<button type="submit" class="Form__Submit Button Button--primary">{{ 'home_page.newsletter.submit' | t }}</button>{% endcomment %}
              <button type="submit" class="Form__Submit Button-submit-arrow">{%- render 'icon' with 'arrow-right' -%}</button>
              {% style %}
                #contact-email {
                  border: none;
                  border-bottom: 1px solid;
                }
                button.Form__Submit.Button-submit-arrow {
                  margin-left: -50px;
                }
              {% endstyle %}
            </div>

4. Save the change.

It will be shown below.

The color of the text & button (arrow) can be changed from your theme editor (Customize).

Hope it helps.

[admintb]

Thanks for the feedback @DavidEKim 

It worked for a normal page or section, but in the footer it still looks the same as before.
Does it also work for the footer?

[DavidEKim]

Open footer.liquid file and replace line 57 to 59 with the code above.

                    <input type="hidden" name="contact[tags]" value="newsletter">
                    <input type="email" name="contact[email]" class="Form__Input" aria-label="{{ 'footer.newsletter.input' | t }}" placeholder="{{ 'footer.newsletter.input' | t }}" required>
                    <button type="submit" class="Form__Submit Button Button--primary">{{ 'footer.newsletter.submit' | t }}</button>

[admintb]

Dear @DavidEKim 

I have done this, but nothing changes.

What is the reason for this?

[admintb]

Dear @DavidEKim 

I have done this, but nothing changes.

What is the reason for this?

[FreshNatural]

Hey David how can I contact you?

[admintb]

Hi @DavidEKim

I am using the new version 7.0.0 of prestige and need a new css code for the same layout. Unfortunately the update did not transfer any changes from the previous version.

Do you think you can do this?

I would be very grateful!

[dlynaustin]

Can you please provide where this code is in the Studio Theme?

Thanks,

Dana