Blueprint promotional messaging integration

Overview

This guide walks you through integrating Affirm with your BigCommerce Blueprint platform. If you are unsure of what theme you are currently using, you can check here.

📘

Using Stencil?

Check out our integrating Affirm with BigCommerce Stencil documentation.

If you are familiar with HTML and CSS, Blueprint themes provide you with customization options to modify the structure of your BigCommerce site. This guide walks you through configuring promotional messaging on a Blueprint platform.

Step 1: Install the Affirm Marketing app

Once logged in to your BigCommerce dashboard, visit the Affirm Marketing app listing. Click "Get App" and follow the app installation steps.

Step 2: Add Affirm scripts

1. Copy the script from your Affirm marketing app - it is unique to your store but should look something like the following:

<script type="text/javascript" >
    document.onreadystatechange = function () {
        if (document.readyState === "interactive") {
            (function(d, p) {
                var h = d.getElementsByTagName("head"),
                    s1 = d.createElement('script'),
                    s2 = d.createElement('script');
 
                if (p.indexOf('/checkout') > -1) {
                    s1.setAttribute("type", "text/javascript");
                    s1.setAttribute("src", "https://cdnjs.cloudflare.com/ajax/li.../jquery.min.js");
                    h[0].appendChild(s1);
                }
 
                function defer() {
                    if (window.jQuery) {
                        s2.setAttribute("type", "text/javascript");
                        s2.setAttribute("src", "https://apps.minibc.com/bootstrap/5d5751301e024");
 
                        h[0].appendChild(s2);
                    }
                    else{
                        setTimeout(defer, 1000);
                    }
                };
                defer();
            })(document, window.location.pathname);
        }
    }
</script>

2. In BigCommerce dashboard, navigate to [Advanced Settings -> Web Analytics].(http://login.bigcommerce.com/deep-links/manage/settings/payment/manage/settings/analytics).
3. Select the Google Analytics tab and paste the Affirm script at the end of the page.
4. Click Save .

Step 3: Configure the Affirm app settings

1. Go to Apps > My Apps > Affirm Marketing > Settings.
2. Enter the Public Key from your Affirm dashboard. (If testing, use your Sandbox Public API Key).
3. Enable Sandbox Mode if testing only.
4. Click Save.

Step 4: Configure Promotional Messaging

1. Go to Apps > My Apps > Affirm Marketing > Promotional Messaging.
2. Toggle Promotional Messaging on Products to enable Affirm messaging on the product pages.
3. Toggle Promotional Messaging on Cart Page to enable Affirm messaging on the product page.
4. Optional: Toggle Promotional Messaging on Quick Cart Page and/or Promotional Messaging on Category Pages.
5. Complete the applicable fields for both product and cart page settings (and quick cart and category pages, if enabled).
6. Click Save.

Promotional messaging fields