How to add Mailchimp on Brooklyn subscribe form

Shopify Expert
97 1 17

Hi Guys,

 

Here is a quick guide on how to add Mailchimp on Subscribe now form on Brooklyn theme

I hope it helps :)

 

 

1.Login to your Shopify admin area

2. From your Dashboard, go to Online Store >> Themes.

3. Under "Actions" drop-down menu, choose "Edit code" option on your Brooklyn theme.

4.It will bring you to edit HTML/CSS page. Find /newsletter.liquid under "Sections".

5.Around line 19, you will find code  that looks something like this::

 

{% form 'customer' %}
      {{ form.errors | default_errors }}
      {% if form.posted_successfully? %}
        <div class="newsletter--form">
          <div class="note form-success">{{ 'general.newsletter_form.newsletter_confirmation' | t }}</div>
        </div>
      {% else %}
        <label for="Email" class="newsletter__label hidden-label">{{'general.newsletter_form.newsletter_email' | t }}</label>
        <input type="hidden" name="contact[tags]" value="newsletter">
        <div class="newsletter--form">
          <div class="input-group">
            <input type="email" value="{% if customer %}{{ customer.email }}{% endif %}" placeholder="{{ 'general.newsletter_form.newsletter_placeholder' | t }}" name="contact[email]" id="Email" class="input-group-field newsletter__input" autocorrect="off" autocapitalize="off">
            <span class="input-group-btn">
              <button type="submit" class="btn newsletter__submit" name="commit" id="Subscribe">
                <span class="newsletter__submit-text--large">{{ 'general.newsletter_form.submit' | t }}</span>
                <span class="newsletter__submit-text--small">
                  <span class="icon icon-arrow-right" aria-hidden="true"></span>
                </span>
              </button>
            </span>
          </div>
        </div>
      {% endif %}
    {% endform %}

Replace selected line with:

{% assign form_action = YOUR-form-action-url %}
              {{ form.errors | default_errors }}
              {% if form.posted_successfully? %}
                <div class="newsletter--form">
                  <div class="note form-success">{{ 'general.newsletter_form.newsletter_confirmation' | t }}</div>
                </div>
              {% else %}
              <form action="{{ form_action }}" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank" class="input-group" id="contact_form" class="contact-form">
                <label for="Email" class="newsletter__label hidden-label">{{ 'general.newsletter_form.newsletter_email' | t }}</label>
                <input type="email" value="{% if customer %}{{ customer.email }}{% endif %}" placeholder="{{ 'general.newsletter_form.newsletter_email' | t }}" name="EMAIL" id="mail" class="input-group-field" aria-label="{{ 'general.newsletter_form.newsletter_email' | t }}" autocorrect="off" autocapitalize="off">
                <span class="input-group-btn">
                  <button type="submit" class="btn newsletter__submit" name="commit" id="Subscribe">
                    <span class="newsletter__submit-text--large">{{ 'general.newsletter_form.submit' | t }}</span>
                    <span class="newsletter__submit-text--small">
                      <span class="icon icon-arrow-right" aria-hidden="true"></span>
                    </span>
                  </button>
                </span>
              </form>
    		  {% endif %}

 

Copy your your mailchimp action url to this line (you will find this under your Mailchimp account):
{% assign form_action = YOUR-FORM-ACTION-URL %}

 

That's it!

I hope it helps :)

Cheers!

For FREE advice or projects, please email me directly on: hamza@xperteria.com
0 Likes
New Member
1 0 0

Hi, thanks for the help on this. I tried this, but received the error 

  • Line 17 — Liquid syntax error: Unexpected character / 

My form action URL has / in the url, how can I add it so that it will save? 

0 Likes
New Member
1 0 0

Hi guys. I keep getting the same error as Sarah down here.

There must be something wrong. Could you please clarify?

 

0 Likes
Shopify Partner
24 1 1