Affirm promotional messaging components---monthly payment messaging and educational modals---show your customers how they can use Affirm to finance their purchases. Our promotional messaging allows you to:
Dynamically display monthly payment pricing information.
Customize messaging and design with co-branded assets.
This guide will review Affirm promotional messaging and explain how to add it to your Shopify site.
Manually editing your theme files requires making changes to the code. We recommend using an experienced front-end developer to avoid any potential errors.
## Monthly payment messaging
Monthly payment messaging consists of concise copy that offers price-specific information and contains a link that triggers an educational product modal. Examples of monthly payment messaging include:
## 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 on 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:
Product modals provide price-specific information. Clicking the monthly payment message triggers the product modal.
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.
Review our [marketing guidelines](🔗) for specific messaging, placement and layout guidance.
## 1. Add Affirm.js
Add the `
Affirm.js` embed code at the top of the theme file in your Shopify store.
1\. Sign in to your Shopify admin page at **yourstore.myshopify.com/admin/**.
2\. From the navigation menu on the left, go to **Online Store > Themes**.
3\. On the menu to the right of the theme, click **Actions**.
4\. Click **Edit Code**.
5\. Search for the `
theme.liquid` file and add the above `
Affirm.js` embed code to it before the closing the </head> tag.
6\. In the embed code, replace `
public_api_key` with your public API key found in the [merchant dashboard](🔗).
7\. Click **Save**.
## 2. Find your Shopify theme files
To add the HTML for Affirm promotional messaging, you will need to edit your store's theme files. To find them:
1\. Back on your main page page, go to **Online Store > Themes**. 2\. On the menu to the right of the theme, click **Actions**. 3\. Click **Edit Code**. 4\. Find the file navigation menu on the left side and find the following template files:
checkout.scss.liquid (Shopify Pro only)
## 3. Add promotional messaging components
Add an HTML element everywhere you want to display an Affirm promotional messaging component.
To add promotional messaging to your product page:
Add promotional messaging to your cart page:
Learn more about promotional messaging
[Click here for more information on adding Affirm promotional messaging to your site](🔗).
## 4. Add code to handle price changes
The Shopify product page (`
selectCallback` function so to always update the monthly payment messaging:
Only use the Affirm embed code when using product variant.
The selectCallback function might not be in your product.liquid template if the product variants are not used or supported.
When 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:
The variable that you use for product prices and cart totals may vary, based on your current Shopify theme and functionality.
Learn more about product.liquid
Learn more about the `
product.liquid` file [here](🔗).
Learn more about cart.liquid
Learn more about the `
cart.liquid` file [here](🔗).