Simple Shopify AJAX subscriptions and marketing discounts

New client-side API Helper app for Shopify removes all the bulky frontend code from Klaviyo, Mailchimp, Omnisend, and Shopify subscriptions, also create unique Shopify discount codes on the fly.

William Belk
Sep 16 · 4 min read

I just launched a new app for Shopify called API Helper that simplifies AJAX email sign ups and discount code creation for Shopify. The app provides a secure frontend API that exposes access to important functions from Klaviyo, Mailchimp, Omnisend and Shopify that are not easily accessible in the browser due to CORS policies inside of Shopify themes. API Helper provides a simple callback and standard response structure for common actions like subscribe, unsubscribe, backinstock, discount.

API Helper also allows for plug-and-play or ‘hot swap’ customer sign-ups between Klaviyo, Mailchimp, Omnisend and Shopify. If you are a Shopify development agency or a freelancer with many clients, this could save you hours of time.

The app currently has modules for:

  • Klaviyo (subscribe, unsubscribe, backinstock, track)
  • Mailchimp (subscribe, unsubscribe)
  • Omnisend (subscribe, unsubscribe)
  • Shopify (subscribe, unsubscribe, unique discount code create)

A simple code example for Klaviyo subscribe is pasted below. Notice you can pass a standard phone field and custom properties to any API Helper module and it will automatically map your fields to the appropriate location in Klaviyo, Mailchimp or Shopify. The docs talk about these fields in more detail, like address, city, state, region, province, country, etc.

var options = {
vendor: 'klaviyo-subscribe',
action: 'subscribe',
email: 'foobar@google.co',
list_id: 'ApqWZs',
signup_location: 'newsletter overlay',
phone: '2135551212',
'Custom Property': 'foobar'
}
wb_apihelper(options, function(err, res){
if ( err ) return alert(res.message)
console.log(res)
})
API Helper— Klaviyo subscribe shown in Chrome Dev Tools console
API Helper — Shopify generate unique discount code using JQuery

This means you can now create simple jQuery forms and AJAX subscription workflows with structured callbacks for doing things after successful email submission, like generating a unique discount code or providing helpful messaging to a customer.

Current Mess of AJAX Code

Contrast this with Klaviyo’s documentation for building an AJAX subscription form, or cumbersome and fragile AJAX with json-p implementations for Mailchimp, like this one. Here is the Klaviyo example code:

<form id="email_signup" class="klaviyo_styling klaviyo_gdpr_embed_LIST_ID" action="//manage.kmail-lists.com/subscriptions/subscribe" data-ajax-submit="//manage.kmail-
lists.com/ajax/subscriptions/subscribe" method="GET"
target="_blank" novalidate="novalidate">
<input type="hidden" name="g" value="LIST_ID">
<input type="hidden" name="$fields" value="$consent">
<input type="hidden" name="$list_fields" value="$consent">
<div class="klaviyo_field_group">
<label for="k_id_email">Newsletter Signup</label>
<input class="" type="email" value="" name="email" id="k_id_email" placeholder="Your email"/>
</div>
<div class="klaviyo_messages">
<div class="success_message" style="display:none;"></div>
<div class="error_message" style="display:none;"></div>
</div>
<div class="klaviyo_form_actions">
<button type="submit" class="klaviyo_submit_button">Subscribe</button>
</div>
</form>
<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<script type="text/javascript">
KlaviyoSubscribe.attachToForms('#email_signup', {
hide_form_on_success: true,
custom_success_message: true,
extra_properties: {
$source: '$embed',
$method_type: "Klaviyo Form",
$method_id: 'embed',
$consent_version: 'Embed default text'
},
success: function ($form) {
var email = $form.find('[name="email"]').val()
_learnq.push(['identify', { $email: email }])
_learnq.push(['track', 'Signed Up for Newsletter'])
$form.hide()
}
});
</script>

On top of Klaviyo’s mess of code, with tricky field names, ids and hidden fields, their klaviyo_subscribe.js file is 25KB.

With API Helper

The js file from the API Helper app is 1.6KB and automatically injected into your shop from CDN when you install the app — and removed immediately when the app’s modules are disabled or the app is uninstalled. With API Helper, the identical functionality from the above Klaviyo example would look like below with standard jQuery. With the example below you can easily interrupt the submit function to do things like validate fields in advance, not so with Klaviyo.

<form class="the_form">
<label>Newsletter Signup</label>
<input type="text" name="email" value="" placeholder="Your email">
<button>Sign Up</button>
</form>
<script>
$(function(){
$('.the_form').submit(function(e){
e.preventDefault()
var options = {
vendor: 'klaviyo-subscribe',
action: 'subscribe',
email: $(this).find('input[name="email"]'),
list_id: 'AsSWZs',
signup_location: 'newsletter overlay',
phone: '2135551212',
'Custom Property': 'foobar'
}
wb_apihelper(options, function(err, res){
if ( err ) return alert(res.message)
console.log(res)
$(this).hide()
})
})
})
</script>

Super simple. You can reuse this code for any API Helper modules across all of your shops and themes. Just change the ‘vendor’ and ‘action’ fields and you are all set.

Here is an example of creating a unique Shopify discount code on the fly, with error and success callbacks shown:

API Helper — Shopify discount code creation

Pricing for API Helper modules starts at $2 / month. Read the docs here.

Please take a moment to check out my other Shopify apps, PageSpeed Monitor and Image Sitemap.

Follow me on Twitter. Find me on LinkedIn.

William Belk

Written by

People, software and process. https://www.imagesitemap.com — https://pagespeedmonitor.app—https://www.rocketfueledpeople.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade