Custom Mailchimp or Awebber Sign Up Form on Checkout Page - With Native Checkbox Appearance
- Ask Shopify (Cassidy) to unlock the store’s checkout and the flags activated. Note the store must be on a paid plus plan.
- Copy the checkout page liquid from an existing store b/c the layout gets messed up when the checkout is updated.
- Generate a Mailchimp Signup Form & Paste on below main__content div.
- If using Awebber instead of Mailchimp skip the first steps and start on the Awebber section.
Create Mailchimp Signup Form
Generate a Mailchimp signup form and paste the code right inside <div class=“main__content”>
IMPORTANT Set the target attribute to open in mailchimp-iframe.
If the target attribut is not set the open in an iframe, then when a user subscribes it will open in a new tab
It should look similar to the following code:
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
</style>
<div id="mc_embed_signup">
<form action="//OneLiveMedia.us1.list-manage.com/subscribe/post?u=83280adac6bd89afc15222bc4&id=09b543cdf4" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="mailchimp-iframe" novalidate>
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">Subscribe to our mailing list</label>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_83280adac6bd89afc15222bc4_09b543cdf4" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
<script type="text/javascript">
$(document).ready(function() {
var current_page = $( ".breadcrumb__item--current .breadcrumb__text" ).text();
var continue_page = "CONTINUE CHECKING OUT";
if (current_page == "Customer information")
continue_page = "Continue to shipping method";
else if (current_page == "Shipping method")
continue_page = "Continue to payment method";
else
continue_page = "Complete Order";
// ADD VALUE FROM FORM TO MAILCHIMP.
$( document ).ready(function() {
var checkoutEmail = $("#checkout_email").val();
$('#mce-EMAIL').val($("#checkout_email").val());
});
$( "#checkout_email" ).on('keyup change', function() {
var checkoutEmail = $(this).val();
$('#mce-EMAIL').val($(this).val());
});
$(function(){
var dynamic = (' Yes, I would like to receive communication from other Sony Artists.');
$('.section--contact-information .checkbox-wrapper').after('<input class="input-checkbox" type="checkbox" value="1" checked="checked" name="checkout[buyer_accepts_sony_marketing]" id="checkout_buyer_accepts_sony_marketing"><label class="checkout_label">'+ dynamic +'</label>');
});
$('.step').after('<button name="button" type="submit" class="custom_submit-btn btn"><span class="btn__content">' + continue_page + '</span></button>');
$(".custom_submit-btn").click(function(){
if($('#checkout_buyer_accepts_sony_marketing').is(':checked')) {
$('form#mc-embedded-subscribe-form').submit();
}
setTimeout(function(){ $('form.edit_checkout').submit(); }, 3000);
});
});
</script>
Add Mailchimp Iframe, so Opens in Iframe instead of page.
This step is important or the user will not be able to checkout.
Add this code directly below {{ content_for_layout }}
<iframe name="mailchimp-iframe" style="display:none;"></iframe>
target="mailchimp-iframe"
<form action="//OneLiveMedia.us1.list-manage.com/subscribe/post?u=83280adac6bd89afc15222bc4&id=09b543cdf4" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="mailchimp-iframe" novalidate>
Styling
At the bottom of the page add the following code:
<style>
.custom_submit-btn.btn {
float: right;
}
#mc_embed_signup {
display: none;
}
.step__footer .btn {
display: none;
}
AWEBBER VERSION
USE THIS CODE IF THE SITE USES AWEBBER INSTEAD OF MAILCHIMP<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="{{ locale }}" dir="{{ direction }}" class="{{ checkout_html_classes }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height, minimum-scale=1.0, user-scalable=0">
<title>{{ shop.name }} - {{ page_title }}</title>
{{ content_for_header }}
{{ checkout_stylesheets }}
{{ checkout_scripts }}
{{ 'jquery.min.js' | asset_url | script_tag }}
</head>
<body>
{% unless settings.gtm-container-id == blank %}
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id={{ settings.gtm-container-id }}"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','{{ settings.gtm-container-id }}');</script>
<!-- End Google Tag Manager -->
{% endunless %}
<div class="banner" data-header>
<div class="wrap">
{{ content_for_logo }}
</div>
</div>
{{ order_summary_toggle }}
<div class="content" data-content>
<div class="wrap">
<div class="sidebar">
<div class="sidebar__header">
{{ content_for_logo }}
</div>
<div class="sidebar__content">
{{ content_for_order_summary }}
</div>
</div>
<div class="main" role="main">
<div class="main__header">
{{ content_for_logo }}
{{ breadcrumb }}
{{ alternative_payment_methods }}
</div>
<div class="main__content">
<!-- AWeber Web Form Generator 3.0.1 -->
<form style="display: none;" method="post" class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" target="AWeber-iframe">
<div style="display: none;">
<input type="hidden" name="meta_web_form_id" value="1000511017" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="awlist4405124" />
<input type="hidden" name="redirect" value="https://www.aweber.com/thankyou-coi.htm?m=text" id="redirect_edb767834f832049d52f13e70bdc6493" />
<input type="hidden" name="meta_adtracking" value="Disruptive_Apparel_Checkout_Signup_Form" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="email" />
<input type="hidden" name="meta_tooltip" value="" />
</div>
<div id="af-form-1000511017" class="af-form"><div id="af-header-1000511017" class="af-header"><div class="bodyText"><p> </p></div></div>
<div id="af-body-1000511017" class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-92453342">Email: </label>
<div class="af-textWrap"><input class="text" id="awf_field-92453342" type="text" name="email" value="" tabindex="500" onfocus=" if (this.value == '') { this.value = ''; }" onblur="if (this.value == '') { this.value='';} " />
</div><div class="af-clear"></div>
</div>
<div class="af-element buttonContainer">
<input name="submit" id="af-submit-image-1000511017" type="image" class="image" style="background: none; max-width: 100%;" alt="Submit Form" src="http://aweber.com/images/forms/plain/buttons/grey.png" tabindex="501" />
<div class="af-clear"></div>
</div>
</div>
<div id="af-footer-1000511017" class="af-footer"><div class="bodyText"><p> </p></div></div>
</div>
<div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=jAwMDKyMjAyM7A==" alt="" /></div>
</form>
<script type="text/javascript">
// Special handling for facebook iOS since it cannot open new windows
(function() {
if (navigator.userAgent.indexOf('FBIOS') !== -1 || navigator.userAgent.indexOf('Twitter for iPhone') !== -1) {
document.getElementById('af-form-1000511017').parentElement.removeAttribute('target');
}
})();
</script><script type="text/javascript">
<!--
(function() {
var IE = /*@cc_on!@*/false;
if (!IE) { return; }
if (document.compatMode && document.compatMode == 'BackCompat') {
if (document.getElementById("af-form-1000511017")) {
document.getElementById("af-form-1000511017").className = 'af-form af-quirksMode';
}
if (document.getElementById("af-body-1000511017")) {
document.getElementById("af-body-1000511017").className = "af-body inline af-quirksMode";
}
if (document.getElementById("af-header-1000511017")) {
document.getElementById("af-header-1000511017").className = "af-header af-quirksMode";
}
if (document.getElementById("af-footer-1000511017")) {
document.getElementById("af-footer-1000511017").className = "af-footer af-quirksMode";
}
}
})();
-->
</script>
<!-- /AWeber Web Form Generator 3.0.1 -->
{{ content_for_layout }}
<iframe name="AWeber-iframe" style="display:none;"></iframe>
</div>
<div class="main__footer" role="contentinfo">
{{ content_for_footer }}
</div>
</div>
</div>
</div>
{{ tracking_code }}
<script type="text/javascript">
$(document).ready(function() {
$('input[name="checkout[shipping_address][first_name]"]').attr('maxlength', 20);
$('input[name="checkout[shipping_address][last_name]"]').attr('maxlength', 20);
$('input[name="checkout[shipping_address][company]"]').attr('maxlength', 40);
$('input[name="checkout[shipping_address][address1]"]').attr('maxlength', 40);
$('input[name="checkout[shipping_address][address2]"]').attr('maxlength', 40);
$('input[name="checkout[shipping_address][city]"]').attr('maxlength', 30);
});
</script>
</body>
</html>
<script type="text/javascript">
$(document).ready(function() {
var current_page = $( ".breadcrumb__item--current .breadcrumb__text" ).text();
var continue_page = "CONTINUE CHECKING OUT";
if (current_page == "Customer information")
continue_page = "Continue to shipping method";
else if (current_page == "Shipping method")
continue_page = "Continue to payment method";
else
continue_page = "Complete Order";
// ADD VALUE FROM FORM TO MAILCHIMP.
$( document ).ready(function() {
var checkoutEmail = $("#checkout_email").val();
$('#mce-EMAIL, #awf_field-92453342').val($("#checkout_email").val());
});
$( "#checkout_email" ).on('keyup change', function() {
var checkoutEmail = $(this).val();
$('#mce-EMAIL, #awf_field-92453342').val($(this).val());
});
// $(function(){
// var dynamic = (' Yes, I would like to receive communication.');
// $('.section--contact-information .checkbox-wrapper').after('<input class="input-checkbox" type="checkbox" value="1" checked="checked" name="checkout[buyer_accepts_sony_marketing]" id="checkout_buyer_accepts_sony_marketing"><label class="checkout_label">'+ dynamic +'</label>');
// });
$('.step').after('<button name="button" type="submit" class="custom_submit-btn btn"><span class="btn__content">' + continue_page + '</span></button>');
$(".custom_submit-btn").click(function(){
// if($('#checkout_buyer_accepts_sony_marketing').is(':checked')) {
// }
$('form.af-form-wrapper').submit();
setTimeout(function(){ $('form.edit_checkout').submit(); }, 3000);
});
});
</script>
<style>
.custom_submit-btn.btn {
float: right;
}
#mc_embed_signup {
display: none;
}
.step__footer .btn {
display: none;
}
#af-form-1000511017 .af-body input.text, #af-form-1000511017 .af-body textarea{background-color:#FFFFFF;border-color:#D9D9D9;border-width:1px;border-style:solid;color:#C7C7C7;text-decoration:none;font-style:normal;font-weight:normal;font-size:24px;font-family:Trebuchet MS, sans-serif;}
</style>