Configure Promotional Messaging on BigCommerce Blueprint

Once the Affirm app is installed, complete the following steps to finish configuring promotional messaging on a Blueprint theme:

1. Add Affirm Scripts

1. In BigCommerce dashboard, select Advanced Settings -> Web Analytics
2. Then select Google Analytics tab
3. Copy and paste the below code in the tracking code text box and save:

<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. 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[ (Shttps://sandbox.affirm.com/dashboard/signin/#/apikeys)
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 Messagingon Cart Page to enable Affirm messaging on the product page
4. Enter the following for both product and cart page settings:

  • Site theme: Custom 
  • Selector ID 
  • Width (default is "100%")
  • Promo ID (optional)
  • Minimum Product Price (optional)
  • Logo Type
  • Logo Color
  1. Click Save

Locating your Selector ID 

Where can I find the Selector ID for the product and cart page promotional messaging?

For Blueprint themes, we require a 'Selector ID' value so that Affirm promotional messaging can be easily added to the product and cart pages. You can use an existing selector ID or a class name available in your theme files. To find the selector ID, go to, Storefront > My Themes and under Advanced Options click Edit HTML/CSS.Edit_HTML_CSS_Blueprint.png

Search for product and cart related templates. Usually, the naming format for these files are product-view.html, product.html, cart.html, cart-view.html, etc. Use any existing class name or ID after which you want to add the promotional messaging. For the example below, productView-price is what should be used as the Selector ID:

<div class="productView-price">
    ......
    .....
</div>

If none of the existing classes or IDs from the product/cart templates are working, you can also add another div in your template right under the product or cart price and use this ID, customAffirmPromoContainer, as the Selector ID. Ex: <div id="customAffirmPromoContainer"></div>