Sync a BigCommerce Signup Form to a Klaviyo List - Blueprint Themes

Overview

This guide walks through syncing your BigCommerce signup form to a Klaviyo List.

Syncing a BigCommerce Form to a Klaviyo List

First choose a list to sync, then edit the source files of your BigCommerce signup form.

  1. Select an existing list or create a new list in your Klaviyo account. Write down the List ID, as you will need this later.
  2. From your BigCommerce dashboard, navigate to Storefront > My Themes.
  3. From the Current Theme, click the Edit HTML/CSS link. This opens the web editor.
    bc_editBPtheme.png
  4. Navigate to the Other Template Files > Panels and click on the SideNewsletterBox.html file. This loads the SideNewsletterBox.html file into the web editor.
    bc_BPsideNewsletterBox.png
    The following steps will edit the code between the form tags.
  5. Replace the initial form element with the following snippet:
    <form id="k_id_embedded_subscription_form" action="https://manage.kmail-lists.com/subscriptions/subscribe" data-ajax-submit="https://manage.kmail-lists.com/ajax/subscriptions/subscribe" method="GET" target="_blank" novalidate="novalidate">
    bc_BPformElement.png
  6. Below the <input> element with value="Email", add another line with the snippet below, making sure to update "LISTID" with the id of the Klaviyo list you want to sync to.
    <input type="hidden" name="g" value="LISTID">
    bc_BPinputElement.png
  7. Click Save.
  8. Navigate to Other Template Files > Panels and click on the NewsletterJavaScript.html file. This loads the NewsletterJavaScript.html file into the web editor.
  9. Paste in the following snippet at the end of the file on a new line:
    <script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script> <script type="text/javascript"> KlaviyoSubscribe.attachToForms('#k_id_embedded_subscription_form', { hide_form_on_success: true }); 
    </script>
    bc_BPnewsletterJavaScriptPasted.png
  10. Click Save.

This completes the sync. From here you can test the sync by navigating to your store and signing up for your newsletter.

Troubleshooting

If you run into any issues with the form you can revert to the original form of your BigCommerce theme files by clicking Revert to Original.

647770

Was this article helpful?
0 out of 0 found this helpful