How can I relocate my newsletter signup to the footer section?

[Lamyglam]

Hello everyone, my store is called Lamyglam.com, can anyone help me to move my newsletter signup to the footer section I wanna do it like the second picture?

[Sajat · Accepted solution]

Hi @Lamyglam 

To achieve this functionality, you need to add a new block on footer.liquid.

Please go to Online Store -> Themes -> Edit Code

Look for footer.liquid file.

Search for "blocks" and add the following code inside "blocks".

{
      "name":"foo_email_form",
      "type":"email_form"
    },

Then, you need to add condition to display the email form when the block is added. To achieve that, you need add a bit of code to check the condition if the block is enabled or not.

Please add the following code inside "<div class="footer__blocks-wrapper grid grid--1-col grid--2-col grid--4-col-tablet {{ footer_grid_class }}">"

{%- when 'email_form' -%}
                 <div class="footer-block__newsletter">
                    {%- if section.settings.newsletter_heading != blank -%}
                      <h2 class="footer-block__heading">{{ section.settings.newsletter_heading | escape }}</h2>
                    {%- endif -%}
                    {%- 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>
                          <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="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>
              {%- endcase -%}
            </div>
          {%- endfor -%}
        </div>
      {%- endif -%}

This should do the trick and the output should be something like this.

Please let me know if you need help on this. 

Thanks,

Sajat

------------------------------------------

Just a small favor to ask. If this helps you, then please do not forget to mark this as solution. Cheers!!!

[Lamyglam]

Hey Sajat, I have found the footer. liquid file but I still do not know where the blocks section is. I try to look for it with command f but it gives me 9 blocks section in my footer file liquid

[Sajat]

Hi @Lamyglam 

It should be somewhere near the bottom of the codes under {%  schema %}

Since I am also using Sense theme, I have attached the screenshot where i have the "blocks" section.

Hope this helped you.

Please let me know if you need any help.

Thanks,

Sajat 

------------------------------------------

Just a small favor to ask. If this helps you, then please do not forget to mark this as solution. Cheers!!!

[Lamyglam]

@Sajatand  I have found the <div class="footer__blocks-wrapper grid grid--1-col grid--2-col grid--4-col-tablet {{ footer_grid_class }}"> but I don't know where exactly I need to put the code in 

[Sajat]

Hi @Lamyglam 

Please put the code inside {%- case block.type -%}.

Just below this case will do.

Hope this helped. If you still are having problem, can you please DM me your footer.liquid file.

I will edit that file and send it back to you.

Thanks,

Sajat

------------------------------------------

Just a small favor to ask. If this helps you, then please do not forget to mark this as solution. Cheers!!!

[Lamyglam]

i have dm you

[Lamyglam]

thank you squat it worked

[mikemcart]

Hi,

I am trying to add this code to the refresh theme but I get 

• Liquid syntax error (line 170): Unknown tag 'when'

Thanks.

Mike.