Upgrade Affirm promotional messaging in Shopify

This guide walks you through the following:

1. Overview
2. Add Affrim.js
3. Find your theme files
4. Delete Affirm.js from each template file
5. Update promotional messaging components
6. HTML attributes
7. Examples
8. Add code to handle price changes
9. Add the confirmation page function
10. Troubleshooting

📘

Shopify overview

You can navigate back to the Shopify documentation here.

Aperçu

Upgrading your Affirm integration allows you to take advantage of our upcoming and future releases as soon as they're available with little or no development work. Our upgraded promotional messaging includes:

• De nouveaux composants de messagerie promotionnelle qui répondent de manière dynamique à vos programmes de financement uniques, comme des termes plus longs (conditions de repaiement de 18, 24 et 36 mois) et des promotions à 0% TAEG, avec des messages personnalisables pour personnaliser le parcours du consommateur
• Notre flux de préqualification au sein des composants de messagerie promotionnelle pour débloquer le potentiel d'achat tout en minimisant le travail de développement supplémentaire pour vos équipes
• Notre bibliothèque Affirm.js mise à jour, qui comprend des analyses améliorées qui fournissent des informations sur les consommateurs et permettent des tests A/B pour garder votre site optimisé

Follow the steps below to upgrade your promotional messaging:

1. Add Affrim.js
2. Find your theme files
3. Delete Affirm.js from each template file
4. Update promotional messaging components
5. Add code to handle price changes
6. Add the confirmation page function

1. Ajouter Affirm.js

Ajoutez le code affirm.js en haut du fichier de thème dans votre magasin Shopify.

1. Create a file on your computer called Affirm_runtime_embed.js with the Affirm.js embed code below (Replace public_api_key with your public API key found in the merchant dashboard.):

<!-- Affirm -->
<script>
_affirm_config = {
   public_api_key:  "YOUR_PUBLIC_KEY",
   script:          "https://cdn1.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>
<!-- End Affirm -->

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. Trouver vos fichiers de thème Shopify

Pour ajouter le code HTML pour les messages promotionnels Affirm, vous devez modifier les fichiers de thème de votre magasin. Pour les trouver :

1. De retour sur votre page principale, accédez à Boutique en ligne > Thèmes.
2. Dans le menu à droite du thème, cliquez sur Actions.
3. Cliquez sur Modifier le code.
4. Trouvez le menu de navigation des fichiers sur le côté gauche et trouvez les fichiers de modèles suivants :

• collection.liquid
• product.liquid
• cart.liquid
• checkout.scss.liquid (Shopify Pro only)
• index.liquid
• article.liquid
• search.liquid

3. Delete Affirm.js from each template file

Delete all references to Affirm.js from each template file listed above (it may not be included on every template file).

4. Update promotional messaging components

Ajoutez un élément HTML partout où vous souhaitez afficher un composant de messagerie promotionnelle Affirm. Les attributs d'élément (voir ci-dessous) déterminent le composant qui s'affiche. Nous recommandons généralement d'ajouter des messages promotionnels à vos pages de catégorie, de produit, de panier et de paiement.

Dans chaque élément HTML, incluez le nouvel attribut data-page-type correspondant à la page où ce composant de messagerie promotionnel est placé. L'attribut data-page-type vous permet de personnaliser les messagerie à l'avenir sans travail de développement. Par défaut, la pré-admissibilité est activée pour les messages promotionnels sur les pages de produits, mais vous pouvez collaborer avec votre responsable de la réussite client pour la modifier et configurer des personnalisations supplémentaires.

You should also contact your Client Success Manager to discuss a plan to move all your Promo IDs to Page Types and eventually remove data-promo-id (or data-modal-id) from your HTML components.

HTML attributes

Classes

Ces classes déterminent le composant de messagerie promotionnelle Affirm à afficher.

Types

data-amount

integer
This is the loan amount passed to the monthly payment messaging component and is required if you want to display price specific messaging

data-page-type

string
This identifies your promotional messaging so Affirm can apply the necessary customizations based on the page they’re displayed.

Les messages mensuels de paiement (affirm-as-low-as) affichent généralement des renseignements spécifiques au prix (nécessite un data-amount) et sont généralement utilisés avec les types de pages de données suivants :

• Catégorie
• Produit
• panier
• paiement

Puisque les modaux de site (affirm-site-modal) n'affichent pas des informations spécifiques au prix, ils sont généralement utilisés avec les types de pages de données suivants :

• page d'accueil
• bannière
• atterrissage
• Recherche

Si vous ne transmettez pas le data-page-type, le composant utilisera un paramètre par défaut.

Exemples

<p class="affirm-as-low-as" data-page-type="category" data-amount="99900"></p>

<p class="affirm-as-low-as" data-page-type="product" data-amount="99900"></p>

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

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

Page du panier et du mini-panier Shopify (cart.liquid) utilisez AJAX pour maintenir les tarifs à jour. Il n'est donc pas nécessaire de se raccorder à la fonction JavaScript selectCallback.

6. Add the Confirmation Page function

Lorsqu'un client effectue son achat, vous pouvez envoyer ses renseignements de commande et de produit à Affirm pour les tests A/B, ce qui vous aidera à optimiser votre site. Envoyez ces renseignements en ajoutant la fonction Page de confirmation à votre page de confirmation de paiement. Nous n'avons besoin que du numéro de commande, du total, de l'identifiant du produit et de la quantité pour les tests A/B.

Click here for all the Confirmation Page function parameters.

To add the confirmation page function, go to Settings > Checkout > Order Processing > Additional scripts  and add the code below.  Replace public_api_key with your public API key found in the merchant dashboard.

<script>
_affirm_config = {
   public_api_key:  "YOUR_PUBLIC_KEY",
   script:          "https://cdn1.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");
 
affirm.ui.ready(function(){
affirm.analytics.trackOrderConfirmed({
    "orderId": "{{ order.id }}",
    "total": "{{ order.total_price }}"
}, [{
   {% for item in order.line_items %}
   "productId": "{{ item.sku }}",
   "quantity": "{{ item.quantity }}",
   {% endfor %}
}]);
});
</script>

Paramètres de fonction requis

Objet de commande

Objet du produit

Dépannage

Variables de prix

La variable que vous utilisez pour les prix des produits et les totaux des paniers peut varier, en fonction de votre thème Shopify actuel et de ses fonctionnalités.

Page de produit

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

{{item.price}}
{{variant.price}}

Panier

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

{{cart.total_price}}