Skip to main content

Merchant Help Center

 

Affirm Merchant Help Center

Shopify - Monthly Payment Price

Variables

The price variable will be different depending on what template you're editing. 

  • Product pages will use:
    • {{product.price}}
  • Cart pages use:
    • {{cart.total}}

Variant Change

Your product.liquid may contain a callback function that triggers when the user changes the product variant. You can insert a call to the 'updateAffirmAsLowAs' function within this callback so that everytime the variant price is updated, the monthly payment price also gets updated.

var selectCallback = function(variant, selector) {
    timber.productPage({
      money_format: "{{ shop.money_format }}",
      variant: variant,
      selector: selector
    });
    updateAffirmAsLowAs( variant.price ); // Add this line to dynamically update your Affirm pricing.
  };

Product or Cart Page, with a single price

Single price
  • Add the HTML placeholder
  • If product variants/price can be updated on this page, make sure the placeholder element is updated with the current price
  • The Affirm runtime code will automatically render the monthly payment messaging component

 

<a class="affirm-as-low-as" data-amount="50000" data-affirm-color="blue"></a>

Product or Cart Page, with a single price displayed in multiple places

Single price appearing multiple places on a page
  • Add multiple HTML placeholders on a single page
  • If product variants/price can be updated on this page, make sure all placeholder elements are updated with the current price
  • The Affirm runtime code will automatically render all monthly payment messaging components

<!-- First instance -->
<a id="monthlyPriceBelowMainPrice" class="affirm-as-low-as" data-amount="your_product_price_variable" data-affirm-color="blue"></a>

<!-- Second instance -->
<a id="monthlyPriceInFooter" class="affirm-as-low-as" data-amount="your_product_price_variable" data-affirm-color="blue"></a>

Category or Gallery Page, with multiple prices

Multiple products with different prices
  • One placeholder element per product grid item
  • Price of the item is reflected in its Monthly Payment Messaging placeholder

 

<!-- Product 1 -->
<div class="product-tile" id="product_1">
<p class="product-name">Product 1 Name</p>
<p class="product-price">$500</p>
<a class="affirm-as-low-as" data-amount="50000" data-affirm-color="blue"></a>
</div>

<!-- Product 2 -->
<div class="product-tile" id="product_2">
<p class="product-name">Product 2 Name</p>
<p class="product-price">$300</p>
<a class="affirm-as-low-as" data-amount="30000" data-affirm-color="blue"></a>
</div>