Add Affirm promotional messaging

Bring awareness to Affirm's flexible payment options at every phase in the shopping journey—increasing conversion and average order value for your business.

Configure Affirm promotional messaging

After enabling Affirm, follow the steps below to configure templates to display promotional messaging:

1/. From Design & Content, go to Edit Templates
2/. Open the Product Page Template and make the following edits to the html element.
3/. At the top of the element, add the Affirm.js script.

<!-- Affirm -->
 _affirm_config = {
   public_api_key:  "YOUR_PUBLIC_KEY",
   script:          ""
(function(m,g,n,d,a,e,h,c){var b=m[n]||{},k=document.createElement(e),p=document.getElementsByTagName(e)[0],l=function(a,b,c){return function(){a[b]._.push([c,arguments])}};b[d]=l(b,d,"set");var f=b[d];b[a]={};b[a]._=[];f._=[];b._=[];b[a][h]=l(b,a,h);b[c]=function(){b._.push([h,arguments])};a=0;for(c="set add save post open empty reset on off trigger ready setProduct".split(" ");a<c.length;a++)f[c[a]]=l(b,d,c[a]);a=0;for(c=["get","token","url","items"];a<c.length;a++)f[c[a]]=function(){};k.async=
!0;k.src=g[e];p.parentNode.insertBefore(k,p);delete g[e];f(g);m[n]=b})(window,_affirm_config,"affirm","checkout","ui","script","ready","jsReady");
<!-- End Affirm -->

4/. Next, search for the {include:panelPricingPanel} and insert the following elements:

  • <p class="affirm-as-low-as" data-page-type="cart" data-amount="your_price_variable"></p>
  • <p class="affirm-as-low-as" data-page-type="product" data-amount="{ns:printPriceInCents}"></p>

5/. Open the Basket Page and only insert Affirm.js at the too of the template after the comments.
6/. Open the Basket Panel Template and insert the following script beneath the {if (orderextra['type'] eq 'tax' || orderextra['type'] eq 'total')}

// Insert the following script beneath this line
{if (orderextra['type'] eq 'tax' || orderextra['type'] eq 'total')}

    nsc(document).ready(function() {
        setTimeout(function() {
nsc(".affirm-as-low-as").attr("data-amount", "{roundValue(orderextra['cost'], 1, 0)}".replace(/[^0-9]/g, ""));

7/. Next, find the line </div><!--row--> and insert the following html element above it:

<p class="affirm-as-low-as" data-page-type="cart" data-amount="your_price_variable"></p>

8/. Open the Footer Template and insert the following script above <!-- Bootstrap core JavaScript:

{if (pageproperty['pageid'] eq 'checkoutstep2')}
  <script>$("#label_checkout_pluginid_62").text("Easy monthly payments with Affirm");</script>

Congrats! With these changes Affirm should now be enabled on your store.