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

Solved

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

admintb
Navigator
346 6 57

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:

 

Bildschirmfoto 2023-04-04 um 4.02.59 PM.png

And I want this layout:

Bildschirmfoto 2023-04-04 um 4.02.46 PM.png

 

Accepted Solution (1)

DavidEKim
Shopify Partner
392 131 193

This is an 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.

20230405_013712.png

 

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

Hope it helps.

 

 

 

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner

View solution in original post

Replies 7 (7)

DavidEKim
Shopify Partner
392 131 193

This is an 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.

20230405_013712.png

 

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

Hope it helps.

 

 

 

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner
admintb
Navigator
346 6 57

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
Shopify Partner
392 131 193

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>
If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner
admintb
Navigator
346 6 57

Dear @DavidEKim 

I have done this, but nothing changes.

What is the reason for this?

admintb
Navigator
346 6 57

Dear @DavidEKim 

 

I have done this, but nothing changes.

What is the reason for this?

FreshNatural
Visitor
2 0 0

Hey David how can I contact you?

admintb
Navigator
346 6 57

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!