DAWN THEME: Adding text beneath newsletter

[VictorCardenau]

Hi Shopify community! 

I need a helping hand with creating a text box underneath the newsletter signup in the footer. The text needs to be similar in size and alignment to the two other boxes. 

I really appreciate any help you can provide. 

/Victor

Info:

STORE URL: https://www.cardenau.dk/

PW: aotatu

[BSS-Commerce]

Hi @VictorCardenau 

I would like to give you the solution 

- Step 1: From the admin page, you go to Sale channel -> Online Store -> Edit code -> footer.liquid

- Step 2: Find the key : "{%- if form.errors -%}" and add the code before this line:

<div class="field" style="margin-top: 5%">
                  <input
                    id="{{ section.id }}"
                    class="field__input"
                    value=""
                    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 }}">
                    input name
                  </label>
                 
</div>

- Step 3: The input will appear in the store. If you want to change the label name, just replace "input name" with your label

- Step 4: Enjoy

Here is the video link so you can refer to how to implement: https://www.loom.com/share/577bbed843424e76b4492051e37a69fd

I hope that it's useful for you.

[VictorCardenau]

Hi BSS Commerce

Sorry for my unclear instructions. I attached a photo of how it would be optimal. 

 

Thanks for the reply!

[BSS-Commerce]

Hi @VictorCardenau 

I would like to give you a suggestion below. If it still doesn't meet your requirement, can you kindly give us an example link? 

Firstly, please follow these steps:

- Step 1: From the admin page, go to Sale channel -> Online Store -> Edit code -> footer.liquid

- Step 2: Find the key: " {%- form 'customer', id: 'ContactFooter', class: 'footer__newsletter newsletter-form' -%}" and replace the code from this line to the nearest line have the key "{%- endform -%}"

{%- form 'customer', id: 'ContactFooter', class: 'footer__newsletter newsletter-form' -%}
              <input type="hidden" name="contact[tags]" value="newsletter">
              <div class="newsletter-form__field-wrapper">
                <div class="field">
                  <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>
               <div class="field" style="margin-top: 2%">
                  <input
                    id="{{ section.id }}"
                    class="field__input"
                    value=""
                    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 }}">
                    Name
                  </label>
                 
                </div>
                <button type="submit" name="commit" id="Subscribe" aria-label="{{ 'newsletter.button_label' | t }}" style="background: black;padding: 8px 20px;color: white;margin-top: 2%;cursor:pointer">
                    Register
                  </button>
                {%- if form.errors -%}
                  <small class="newsletter-form__message form__message" id="ContactFooter-error">{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</small>
                {%- endif -%}
              </div>
              {%- if form.posted_successfully? -%}
                <h3 class="newsletter-form__message newsletter-form__message--success form__message" id="ContactFooter-success" tabindex="-1" autofocus>{% render 'icon-success' %}{{ 'newsletter.success' | t }}</h3>
              {%- endif -%}
            {%- endform -%}

The result is:

I hope that it's useful for you.