MailChimp Integration

For a while, our theme featured default MailChimp integration for the included newsletter form. In the meantime, MailChimp changed a bit, so this integration is not easy possible now, and so, it was replaced by Shopify's default newsletter action, which registers customers into your Shopify dashboard, a feature which is present in most themes.

However, if you do wish to integrate MailChimp, you can still do this, but there is a downside - the AJAX form will not function anymore, so any user who wants to subscribe will be directed to an external page where they will have to complete all fields and double check their subscription. 

Watch the following video to see how it should be done and how it actually works:

How to:

1. Go to MailChimp and choose to generate an "Embedded Form", where the only required field is the email address. Or customize it after your desire (there are several options for style customization there).

2. When you're ready, copy your form iframe code somewhere and extract the action value from it. Only that value ("XXXXXXXXXX" from the below example):

<form action="XXXXXXXXXXXX" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><br>

3. Go into your theme editor, and choose to edit /sections.popup.liquid. Replace the original form:

{% form 'customer' %}
      {{ form.errors | default_errors }}
      <div class="input-group">
        <input type="hidden" name="contact[tags]" value="newsletter">
        <input type="email" value="{% if customer %}{{ customer.email }}{% endif %}" placeholder="{{ 'general.newsletter.email_label' | t }}" name="contact[email]" id="Email" aria-label="{{ 'general.newsletter.email_label' | t }}" autocorrect="off" autocapitalize="off">
        <input type="submit" name="commit" id="Subscribe" value="{{ 'general.newsletter.submit_button' | t }}">
      </div>
{% endform %}

With this new one:

 <form action="XXXXXXXX" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
      <div class="input-group">
        <input type="email" value="{% if customer %}{{ customer.email }}{% endif %}" placeholder="{{ 'general.newsletter.email_label' | t }}" name="EMAIL" id="mce-EMAIL" aria-label="{{ 'general.newsletter.email_label' | t }}" autocorrect="off" autocapitalize="off">
        <input type="submit" name="Subscribe" id="Subscribe" value="{{ 'general.newsletter.submit_button' | t }}">
      </div>
 </form><br>

4. Replace the action with the one you've extracted earlier. Save the file. You're done!

5. If you want to apply this change to a version lower than 2.1.3, you need to do an extra step to get it working. Please go again to the theme editor and choose to edit /assets/js_scripts.min.js .. it's complied javascript file, so it may be harder to look at it, but just search for: 

#newsletter-box form

It will give you three finds. You only need to play with the first one. Simply add a typo somewhere. Like:

#newsletterSSS-box form

And now you're done.