How to add ajax mailchimp subscriber or signup form in shopify store?

Step 1: Login to your shopify store

Step 2: Click on Online store > Themes

Step 3: From the Actions drop-down select Edit code.

Step 4: Add this script in your java script file that is may be named as theme.js

$(document).ready(function () {
  var $form = $('#mc-embedded-subscribe-form')
  if ($form.length > 0) {
    $('form input[type="submit"]').bind('click', function (event) {
      if (event) event.preventDefault()
      register($form)
    })
  }
})

function register($form) {
  $('#mc-embedded-subscribe').val('Sending...');
  $.ajax({
    type: $form.attr('method'),
    url: $form.attr('action'),
    data: $form.serialize(),
    cache: false,
    dataType: 'json',
    contentType: 'application/json; charset=utf-8',
    error: function (err) { alert('Could not connect to the registration server. Please try again later.') },
    success: function (data) {
      $('#mc-embedded-subscribe').val('subscribe')
      if (data.result === 'success') {
        // Yeahhhh Success
        console.log(data.msg)
        $('#mce-EMAIL').css('borderColor', '#ffffff')
        $('#subscribe-result').css('color', 'rgb(53, 114, 210)')
        $('#subscribe-result').html('<p>Thank you for subscribing. We have sent you a confirmation email.</p>')
        $('#mce-EMAIL').val('')
      } else {
        // Something went wrong, do something to notify the user.
        console.log(data.msg)
        $('#mce-EMAIL').css('borderColor', '#ff8282')
        $('#subscribe-result').css('color', '#ff8282')
        $('#subscribe-result').html('<p>' + data.msg.substring(4) + '</p>')
      }
    }
  })
};

Step 5: Now go to your mailchimp subscribe form. Your form will look like this.

<form action="https://abc.us10.list-manage.com/subscribe/post?u=d526199738db029ff28f065c2&amp;id=e0ce56b1df"
method="post" name="mc-embedded-subscribe-form"
target="_blank" class="form-inline form-default">
         <div class="form-group">
            <input type="email" name="EMAIL" class="form-control" placeholder="Enter your e-mail">
                  <button type="submit" class="btn">SUBSCRIBE</button>
         </div>
 </form>

Step 6: Now replace post with post-json before ?u

Step 7: Add &c=? after id=e0ce56b1df

Step 8: Add this line of code before </form>

 <div id="subscribe-result">

  </div>


Step 9: Save. That's it

Try Shopify for free, and explore all the tools and services you need to start, run, and grow your business.