Skip to main content

Merchant Help

 

Affirm Merchant Help

Shopify Promotional Messaging

Overview

Educating customers about Affirm can increase customer conversion and average order values. Promotional messaging can be integrated into your Shopify store theme to display Monthly Payment Messaging and informational Site Modals to customers.

Integrating

Promotional messaging can be embedded on Shopify pages by modifying your page and cart templates. This involves access to your Shopify admin, customizing your Shopify store theme files, and having some basic HTML and Javascript knowledge.

  1. Customize Shopify product/cart themes
  2. Discover which price variable to use
  3. Paste in embed code
  4. Replace price variable
  5. Customize Shopify selectCallback
  6. Paste in refresh code
  7. Style new placements

Placements

Monthly Payment Messaging
Product Modal
  • PDP - Inline with monthly payment messaging. See 'product.liquid' instructions
  • Any element which needs to display a price-specific informational modal on click.
Site Modal
  • Education/Landing page
  • Home page
  • Site banner
  • Any element which needs to display an informational modal on click.

Promotional Messaging

More information about the Affirm p

HTML wrapper

Add an HTML element for each Affirm promotional messaging component that you want displayed on a page. The wrapper element's name ('p', 'span', etc.) is arbitrary, as the implementation doesn't rely on specific names. Recommended element names are shown in the examples below.

The attributes of the wrapper element determine which component will be rendered at runtime:

Attribute name Usage Value type Accepted values Notes
class Determines the type of promotional messaging component to be rendered. String "affirm-as-low-as", "affirm-product-modal", "affirm-site-modal"  
data-amount The loan amount for monthly payment calculations and messaging. Integer Product or cart price in USD cents $499.99 = 49999
data-promo-id Renders the component with different styling, messaging, or loan terms. String Promo IDs are provided by your Affirm technical contact If an invalid Promo ID is provided, the default components will be rendered.

Promo IDs

A promo ID is an optional parameter that, if present, will display customized messaging in the rendered marketing components.

  • Promo IDs are only required if you want to customize the appearance or financing terms in Affirm marketing components.
  • Promo IDs are generated by Affirm staff, and you can reach out to Affirm Merchant Help
  • Promo IDs you're provided are unique to the customizations requested.
  • You can use that same promo ID across your entire site, for all components that should share those customizations.
  • If you want to display customizations, a promo ID must be present. 
  • An invalid or missing promo ID will result in the default presentation of the marketing components.

For example, if you're using the same messaging (and offering the same financing programs) across your entire site, you will only need to utilize one promo ID for all your marketing components on all pages.

Integration

Finding your Shopify theme files

In order to add Affirm promotional messaging, you will need to edit your store's theme files. This allows you to manipulate the HTML source code of your store's page templates, and add in the Affirm promotional messaging embed code.

  1. Go to your Shopify admin portal (yourstore.myshopify.com/admin/themes)
  2. In the left-hand navigation menu, go to: 'Online Store' -> 'Themes'
  3. Your active theme should appear at the top of this page. You can either edit this theme, or you can duplicate it and then edit it if you want to avoid making changes to your production site.
  4. Click the 'Actions' menu to the right of the theme, then click 'Edit HTML/CSS
  5. A folder/file navigation menu will appear on the left side. Find and click-to-open:
    • 'product.liquid'
    • 'cart.liquid'

Modifying your Shopify theme

Once you have your cart and product page .liquid files open, you will need to add the following to each:

  1. Add Affirm JS runtime
  2. Add Affirm promo embed code
  3. Optional: Modify selectCallback function 

product.liquid

Affirm JS

Put the Affirm JS embed code at the top of the theme file:

<script>
  _affirm_config = {
    public_api_key:  "XXXXXXXXXXXXXXX",
    script:          "https://cdn1-sandbox.affirm.com/js/v2/affirm.js"
  };
  (function(l,g,m,e,a,f,b){var d,c=l[m]||{},h=document.createElement(f),n=document.getElementsByTagName(f)[0],k=function(a,b,c){return function(){a[b]._.push([c,arguments])}};c[e]=k(c,e,"set");d=c[e];c[a]={};c[a]._=[];d._=[];c[a][b]=k(c,a,b);a=0;for(b="set add save post open empty reset on off trigger ready setProduct".split(" ");a<b.length;a++)d[b[a]]=k(c,e,b[a]);a=0;for(b=["get","token","url","items"];a<b.length;a++)d[b[a]]=function(){};h.async=!0;h.src=g[f];n.parentNode.insertBefore(h,n);delete g[f];d(g);l[m]=c})(window,_affirm_config,"affirm","checkout","ui","script","ready");
 // Use your live public API Key and https://cdn1.affirm.com/js/v2/affirm.js script to point to Affirm production environment.
</script>

Note: replace the 'public_api_key' value with your own public API key. The API key must match the Affirm-environment you're referencing ('sandbox' or 'live').

Monthly Payment Messaging placeholder

Below your product price, you can place the following code:

<p class="affirm-as-low-as" data-promo-id="XXXXXXXXXXXXX" data-amount="{{variant.price}}"></p>

Make sure to replace the 'data-promo-id' value with the Promo ID you received from Affirm. If you have not received a Promo ID, and are not using any custom financing programs or modal designs, then you can remove the 'data-promo-id' parameter from the placeholder element or leave it blank.

Product variants

The Shopify product page uses Javascript to keep the product price updated as you change product options/variants. You can add the following code to the existing 'selectCallback' function so that the Affirm Monthly Payment Messaging is also updated:

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

cart.liquid

The Shopify mini-cart and cart page utilize AJAX to keep components up to date. Therefore, there is no need to hook into the selectCallback JS function. You can just add the Affirm JS embed and Monthly Payment Messaging placeholder.

Affirm JS

Put the Affirm JS embed code at the top of the theme file:

<script>
  _affirm_config = {
    public_api_key:  "XXXXXXXXXXXXXXX",
    script:          "https://cdn1-sandbox.affirm.com/js/v2/affirm.js"
  };
  (function(l,g,m,e,a,f,b){var d,c=l[m]||{},h=document.createElement(f),n=document.getElementsByTagName(f)[0],k=function(a,b,c){return function(){a[b]._.push([c,arguments])}};c[e]=k(c,e,"set");d=c[e];c[a]={};c[a]._=[];d._=[];c[a][b]=k(c,a,b);a=0;for(b="set add save post open empty reset on off trigger ready setProduct".split(" ");a<b.length;a++)d[b[a]]=k(c,e,b[a]);a=0;for(b=["get","token","url","items"];a<b.length;a++)d[b[a]]=function(){};h.async=!0;h.src=g[f];n.parentNode.insertBefore(h,n);delete g[f];d(g);l[m]=c})(window,_affirm_config,"affirm","checkout","ui","script","ready");
 // Use your live public API Key and https://cdn1.affirm.com/js/v2/affirm.js script to point to Affirm production environment.
</script>

Note: replace the 'public_api_key' value with your own public API key. The API key must match the Affirm-environment you're referencing ('sandbox' or 'live').

Monthly Payment Messaging placeholder

Below your cart total price, you can place the following code:

<p class="affirm-as-low-as" data-promo-id="XXXXXXXXXXXXX" data-amount="{{cart.total_price}}"></p>

Make sure to replace the 'data-promo-id' value with the Promo ID you received from Affirm. If you have not received a Promo ID, and are not using any custom financing programs or modal designs, then you can remove the 'data-promo-id' parameter from the placeholder element or leave it blank.

Troubleshooting

Price variables

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

Product page

Documentation: https://docs.shopify.com/themes/theme-development/templates/product-liquid

{{item.price}}
{{variant.price}}
Shopping cart

Documentation: https://docs.shopify.com/themes/theme-development/templates/cart-liquid

{{cart.total_price}}