Need help moving email subscription form in the footer section of the Dawn Theme.

Solved

Need help moving email subscription form in the footer section of the Dawn Theme.

404virtues
Excursionist
22 0 4

Hi there,

I would like to make my email subscription form significantly smaller, and I'm essentially trying to emulate this store here.

(https://wkwclub.com/)

404virtues_0-1718558227446.png

 

The email form with the (subscribe button next to it) is set to the complete right of the footer section, and if possible a directory message on the left.

I currently have the email subscription at it's default setting.

https://404virtues.com/

404virtues_1-1718558438809.png


Could you suggest what I should do?

Accepted Solution (1)

Kyle_liu
Shopify Partner
101 14 17

This is an accepted solution.

Hi @404virtues ,

1、You can customize theme and uncheck Show email signup

 

Kyle_liu_0-1718672392945.png

 

2、Edit code and edit header.liquid,add the following code under</header>

 

<div style="display: flex; width: 100%; font-weight: bold; height: 50px; background-color: #eac039">
    {%- form 'customer', id: 'ContactFooter', style: 'width: 100%; height: 50px; line-height: 50px;' -%}
      <input type="hidden" name="contact[tags]" value="newsletter">
      <div style="display: flex; width: 100%; font-weight: bold;">
        <div style="margin-left: 26px;">SUBSCRIBE TO THE MAILING LIST FOR EXCLUSIVE OFFERS AND SAMPLES</div>
        <div style="display: flex; position: absolute;float: right;right: 0;width: 312px;">
          <div style="width: 150px;margin-right: 10px;">
            <input
              id="NewsletterForm--{{ section.id }}"
              type="email"
              name="contact[email]"
              class="field__input"
              style="border-bottom: 1px solid; height: 45px; background-color: #eac039; outline: none;"
              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="Email address"
              required
            >
            <label class="field__label" for="NewsletterForm--{{ section.id }}">
              Email address
            </label>
          </div>
          <div style="width: 121px;">
            <button
              type="submit"
              name="commit"
              id="Subscribe"
              style="border: none; border-bottom: 1px solid; height: 45px; background: none; font-weight: bold;"
            >
              SUBSCRIPT {% render 'icon-arrow' %}
          </button></div>
        </div>
        {%- 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 -%}
  </div>

 

 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to contact me on (liushuaicc@shinetechsoftware.com)

View solution in original post

Reply 1 (1)

Kyle_liu
Shopify Partner
101 14 17

This is an accepted solution.

Hi @404virtues ,

1、You can customize theme and uncheck Show email signup

 

Kyle_liu_0-1718672392945.png

 

2、Edit code and edit header.liquid,add the following code under</header>

 

<div style="display: flex; width: 100%; font-weight: bold; height: 50px; background-color: #eac039">
    {%- form 'customer', id: 'ContactFooter', style: 'width: 100%; height: 50px; line-height: 50px;' -%}
      <input type="hidden" name="contact[tags]" value="newsletter">
      <div style="display: flex; width: 100%; font-weight: bold;">
        <div style="margin-left: 26px;">SUBSCRIBE TO THE MAILING LIST FOR EXCLUSIVE OFFERS AND SAMPLES</div>
        <div style="display: flex; position: absolute;float: right;right: 0;width: 312px;">
          <div style="width: 150px;margin-right: 10px;">
            <input
              id="NewsletterForm--{{ section.id }}"
              type="email"
              name="contact[email]"
              class="field__input"
              style="border-bottom: 1px solid; height: 45px; background-color: #eac039; outline: none;"
              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="Email address"
              required
            >
            <label class="field__label" for="NewsletterForm--{{ section.id }}">
              Email address
            </label>
          </div>
          <div style="width: 121px;">
            <button
              type="submit"
              name="commit"
              id="Subscribe"
              style="border: none; border-bottom: 1px solid; height: 45px; background: none; font-weight: bold;"
            >
              SUBSCRIPT {% render 'icon-arrow' %}
          </button></div>
        </div>
        {%- 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 -%}
  </div>

 

 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to contact me on (liushuaicc@shinetechsoftware.com)