Affirm-developers

Blueprint promotional messaging integration

Add promotional messaging to your BigCommerce Blueprint theming engine.

Overview

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

ūüďė

Using Stencil?

Checkout out our documentation on integrating Affirm on BigCommerce Stencil.

If you're 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.

1. 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 .

2. Configure the Affirm app settings

1. Go to Apps > My Apps > Affirm Marketing > Settings
2. Enter the Live Public API Key from your Affirm dashboard.
3. Enter the Sandbox Public API Key
4. Leave Sandbox Mode enabled (for testing and development).
5. Click Save.

3. 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.
4. Complete the applicable fields for both product and cart page settings (and quick cart and category pages, if enabled).
5. Click Save.

Promotional messaging fields

FieldDescription
Selector IDWe require a Selector ID value so that Affirm promotional messaging can be easily added to the product and cart pages. See our BigCommerce Blueprint FAQ if you need help locating the Selector ID.
Site Theme Select the Custom option.
Height The height of the promotional messaging element. If unsure, leave default value.
WidthThe width of the promotional messaging element. If unsure, leave default value.
Minimum Product PriceThe minimum price to display Affirm promotional messaging on product page.
Product Page Price (Product Page settings only)Only enter a value in this field if instructed by Affirm. See our BigCommerce Blueprint FAQ if you need help locating the Product Page Price.
Product Page Options (Product Page settings only)Only enter a value in this field if instructed by Affirm. See our BigCommerce Blueprint FAQ if you need help locating the Product Page Options.
Logo Type Select the Affirm to show as plain text, a logo, or a symbol.
Logo Color select the Affirm logo/symbol to show as blue, black, or white.
Inline Pricing (Product Page and Category Pages settings only)Only toggle on if instructed by Affirm. Use if the product price is dictated by options, rather than a set base price.
Minimum Cart Total (Cart and Quick Cart settings only)The minimum cart total to display Affirm promotional messaging.
Product Container Selector (Category settings only)Only enter a value in this field if instructed by Affirm

Updated 10 months ago


Related topics

Congrats! You've successfully set up your promotional messaging using a custom theme. Ready to get up and running? Head over to our Testing page to coordinate a testing plan with us. You can also checkout out our FAQ for answers to some common questions setting up custom themes in Blueprint.

Testing & deployment
BigCommerce Blueprint FAQ

Blueprint promotional messaging integration


Add promotional messaging to your BigCommerce Blueprint theming engine.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.