add text under newsletter sign up box

[yanniksch]

Hello guys,

i want to place a text under the newsletter sign up bar.

i already found two solutions, but both did not work for me. the first one was from Page-Fly Victor, i tried and it just but a text somewhere else. the second was from Ujjaval, when i tried his solution, the frame around the signup box just disappeard.

is there any other solution for my problem?

I am using the dawn theme

[Angel95 · Accepted solution]

Hello,

Go to your Theme > Edit code > Sections > Open newletter.liquid and replace the code in this file with the following code. 

{{ 'component-newsletter.css' | asset_url | stylesheet_tag }}

{{ 'newsletter-section.css' | asset_url | stylesheet_tag }}

<div class="newsletter center{% if section.settings.full_width == false %} newsletter--narrow page-width{% endif%}">

  <div class="newsletter__wrapper color-{{ section.settings.color_scheme }} gradient">

    {%- for block in section.blocks -%}

      {%- case block.type -%}

        {%- when '@app' -%}

          {% render block %}

        {%- when 'heading' -%}

          <h2 class="h1" {{ block.shopify_attributes }}>{{ block.settings.heading | escape }}</h2>

        {%- when 'paragraph' -%}

          <div class="newsletter__subheading rte" {{ block.shopify_attributes }}>{{ block.settings.text }}</div>

        {%- when 'email_form' -%}

          <div {{ block.shopify_attributes }}>

            {% form 'customer', class: 'newsletter-form' %}

            <input type="hidden" name="contact[tags]" value="newsletter">

              <div class="newsletter-form__field-wrapper">

                <div class="field">

<input class="field__input" autocomplete="name" type="text" id="ContactForm-first_name" name="contact[first_name]" value="" aria-required="true" placeholder="First Name" required>

<label class="field__label" for="ContactForm-first_name">{{ 'customer.register.first_name' | t }}</label>

</div>

<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="Newsletter-error--{{ section.id }}"

                    {% elsif form.posted_successfully? %}

                      aria-describedby="Newsletter-success--{{ section.id }}"

                    {% endif %}

                    placeholder="{{ 'newsletter.label' | t }}"

                    required

                  >

                  <label class="field__label" for="NewsletterForm--{{ section.id }}">

                    {{ 'newsletter.label' | t }}

                  </label>

                  <button type="submit" class="newsletter-form__button field__button" name="commit" id="Subscribe" aria-label="{{ 'newsletter.button_label' | t }}">

                    {% render 'icon-arrow' %}

                  </button>

                </div>

                {%- if form.errors -%}

                  <small class="newsletter-form__message form__message" id="Newsletter-error--{{ section.id }}">{% 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="Newsletter-success--{{ section.id }}" tabindex="-1" autofocus>{% render 'icon-success' %}{{ 'newsletter.success' | t }}</h3>

              {%- endif -%}

            {% endform %}

          </div>

      {%- endcase -%}

    {%- endfor -%}

  </div>

</div>

{% schema %}

{

  "name": "t:sections.newsletter.name",

  "tag": "section",

  "class": "spaced-section spaced-section--full-width",

  "settings": [

    {

      "type": "select",

      "id": "color_scheme",

      "options": [

        {

          "value": "accent-1",

          "label": "t:sections.newsletter.settings.color_scheme.options__1.label"

        },

        {

          "value": "accent-2",

          "label": "t:sections.newsletter.settings.color_scheme.options__2.label"

        },

        {

          "value": "background-1",

          "label": "t:sections.newsletter.settings.color_scheme.options__3.label"

        },

        {

          "value": "background-2",

          "label": "t:sections.newsletter.settings.color_scheme.options__4.label"

        },

        {

          "value": "inverse",

          "label": "t:sections.newsletter.settings.color_scheme.options__5.label"

        }

      ],

      "default": "background-1",

      "label": "t:sections.newsletter.settings.color_scheme.label"

    },

    {

      "type": "checkbox",

      "id": "full_width",

      "default": true,

      "label": "t:sections.newsletter.settings.full_width.label"

    },

    {

      "type": "paragraph",

      "content": "t:sections.newsletter.settings.paragraph.content"

    }

  ],

  "blocks": [

    {

      "type": "heading",

      "name": "t:sections.newsletter.blocks.heading.name",

      "limit": 1,

      "settings": [

        {

          "type": "text",

          "id": "heading",

          "default": "Subscribe to our emails",

          "label": "t:sections.newsletter.blocks.heading.settings.heading.label"

        }

      ]

    },

    {

      "type": "paragraph",

      "name": "t:sections.newsletter.blocks.paragraph.name",

      "limit": 1,

      "settings": [

        {

          "type": "richtext",

          "id": "text",

          "default": "<p>Be the first to know about new collections and exclusive offers.</p>",

          "label": "t:sections.newsletter.blocks.paragraph.settings.paragraph.label"

        }

      ]

    },

    {

      "type": "email_form",

      "name": "t:sections.newsletter.blocks.email_form.name",

      "limit": 1

    },

    {

      "type": "@app"

    }

  ],

  "presets": [

    {

      "name": "t:sections.newsletter.presets.name",

      "blocks": [

        {

          "type": "heading"

        },

        {

          "type": "paragraph"

        },

        {

          "type": "email_form"

        }

      ]

    }

  ]

}

{% endschema %}
Once done, go to your Theme > Customize > Homepage > Add section > Search for Email Signup > Add Email Sign up.

Now you will have a sign-up form with First Name and Email. 

[yanniksch]

Thank you very much, exactly what i wanted. Great solution

[Made4uo-Ribe]

Hi @yanniksch 

Can we take a look? Would you mind to share your Store URL website? with password if its protected. Thanks!