Monthly payment messaging

Educational modals

Educational modals are pop-up windows that offer more information about Affirm. They also provide prequalification, which allows your customers to discover how much they qualify to spend with Affirm on your site early in their shopping process. After completing the application and finishing shopping, the prequalified amount is automatically applied at checkout when they select Affirm as their payment option. There are two types of educational modals:

Site modals offer general information about Affirm and do not include pricing information. Any HTML element can trigger a site modal, though these are typically links on Affirm-related landing pages, site banners, or your home page.

Search for the theme.liquid file and add the above Affirm.js embed code to it before the closing the </head> tag

In the embed code, replace public_api_key with your public API key found in the merchant dashboard (You can also pass a session ID variable for the optional session_id to take advantage of additional analytics)

4. Add code to handle price changes

The Shopify product page (product.liquid) uses JavaScript to update the product price as the customer changes product options and variants. You can add the following code to the existing selectCallback function so to always update the monthly payment messaging:

<script>
var selectCallback = function(variant, selector) {
//Affirm Promos: Monthly Payment Messaging, dynamic pricing embed code
//
//NOTE: This Affirm embed code is only needed if you are using product variants.
//'selectCallback' might not be in your product.liquid template if product variants are not used or supported.
//If you are using product variants in your shop, use the following code to dynamically update your Monthly Payment Messaging when the customer selects a different product variant.
$('.affirm-as-low-as').attr('data-amount',variant.price);
affirm.ui.refresh();
};
</script>

The Shopify mini-cart and cart page (cart.liquid) use AJAX to keep pricing up to date. Therefore, there is no need to hook into the selectCallback JavaScript function.

Troubleshooting

Price variables

The variable that you use for product prices and cart totals may vary, based on your current Shopify theme and functionality.