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

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 ThemeSelect the Custom option.
HeightThe 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 TypeSelect the Affirm to show as plain text, a logo, or a symbol.
Logo ColorSelect 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.

Other helpful resources

Congrats! You have successfully set up your promotional messaging using a custom theme. Ready to get up and running? Head over to our go-live checklist. You can also checkout out our FAQ for answers to some common questions setting up custom themes in Blueprint.