Informez vos clients avec le badge Alma

Informez vos clients de la disponibilité d'Alma sur vos fiches produit et le panier.

À date, Shopify ne fournit pas de moyen simple d'afficher le badge Alma ("mini échéancier") sur les fiches produit ou le panier des marchands utilisant Shopify.

La procédure ci-dessous vous permet néanmoins de le faire.

Ajouter le snippet “alma-badge.liquid” au thème

  1. Depuis l’admin de Shopify, aller dans “Boutique en ligne” sous “Canaux de vente” et cliquer sur le menu Action > Modifier le code.
  1. Dans la liste des fichiers du thème, descendre jusqu’à la catégorie “Snippets”, cliquer “Ajouter un nouveau snippet" et saisir "alma-badge". Le fichier alma-badge.liquid, vide, s’ouvre dans l’éditeur.
  1. Copier-coller le code ci-dessous dans le fichier alma-badge.liquid :
{% comment %}
    Renders an Alma badge
    Accompanies product forms and meant to be updated dynamically
    Accepts:
    - variant: {Object} Variant Liquid object (optional)
    - product: {Object} Product Liquid object (optional)

    Usage:

   In product template:
    {% render 'alma-badge', variant: current_variant, product: product %}

   In cart template:
   {% render 'alma-badge' %}

   If you need to adapt the containers width, positionning, margins (...)
   then you can provide some custom styles directly to the snippet:

   {% render 'alma-badge' style: "max-width: 400px; margin 20px 0" %}
{% endcomment %}
{%- liquid
  if variant
    assign price = variant.price
  elsif product
    assign price = product.price
  else
    assign price = cart.total_price
  endif
-%}

<div id="alma-badge" {% if style %}style="{{ style }}"{% endif %}></div>

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@alma/[email protected]/dist/alma-widgets.min.css"/>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@alma/[email protected]/dist/alma-widgets.umd.js"></script>
<script>
  ;(function() {
    var widgets = Alma.Widgets.initialize(
      '<INSERER MERCHANT ID ICI>',
      Alma.ApiMode.LIVE,
    );

      widgets.add(Alma.Widgets.PaymentPlans, {
        container: '#alma-badge',
        purchaseAmount: {{ price }},
      });

    widgets.render();
  })()
</script>
  1. À la 39ème ligne du fichier, remplacer le texte <INSERER MERCHANT ID ICI> par l’ID marchand fourni sur le dashboard Alma.

❗️

Attention : veillez à copier-coller votre ID marchand et non votre clef d’API.

  1. Enregistrer le fichier.

Appeler le snippet depuis le thème

Le snippet alma-badge peut maintenant être appelé depuis n'importe quel template du thème pour y insérer un badge Alma qui affichera les différents échéanciers disponibles pour le montant voulu : soit celui d’un produit, soit celui du panier.

Il sera typiquement inséré sur une fiche produit ou sur la page du panier.

📘

Chaque thème de boutique étant différent, ils nous est impossible de fournir un emplacement précis à la ligne de code près où insérer le code d'inclusion du badge.

Insertion sur la fiche produit

  1. Dans l'éditeur de thème, ouvrir le fichier product-template.liquid qui se trouve dans la catégorie "Sections".

  2. Nous recommandons d'insérer le badge juste en-dessous du prix du produit. Pour cela, rechercher la ligne contenant include 'product-price', qui servira de repère.

  1. En-dessous des informations de prix (et éventuellement de taxes, comme dans l'exemple ci-dessus), insérer le code suivant :
{% render 'alma-badge', variant: current_variant, product: product %}

📘

Note : include et render sont équivalents, mais ce dernier est recommandé par Shopify.

  1. Enregistrer le fichier

Un badge Alma apparaît désormais sur toutes les pages produit :

Personnaliser les options du badge

Styles CSS

Pour une meilleure intégration dans le thème de la boutique, il peut être nécessaire de faire des ajustements de taille, de marge, de positionnement (...) du badge.

À titre d'exemple, l'insertion "brute" du badge dans la page du panier du thème par défaut de Shopify n'est pas satisfaisante :

Pour remédier à cela, il est possible :

  • d'entourer le code d'insertion du badge de balise HTML dont le style CSS pourra permettre de faire les ajustements nécessaires
  • de passer directement au code d'insertion un paramètre style qui sera appliqué à l'élément HTML du badge lui-même.

Par exemple :

<div style="display: flex; justify-content: flex-end; margin-bottom: 20px">
    {% render 'alma-badge', style: "max-width: 400px" %}
</div>

📘

Ces adaptations étant spécifiques à chaque thème / page, Alma n'est pas en mesure de fournir des adaptations sur mesure.
Rapprochez-vous de votre développeur ou de votre agence pour effectuer les modifications qui conviendront à votre thème.

Échéances, montants mini/maxi

Afin d'éviter des frustrations à vos clients, il est important que les badges Alma reflètent les véritables conditions d'éligibilité au paiement en plusieurs fois pour votre boutique.

Nombre d'échéances

Par défaut, le badge affiche les informations pour les nombres d'échéances que vous avez paramétrées sur votre dashboard à la page Conditions.

Toutefois il se peut que vous n'ayez pas activé, dans les méthodes de paiement de Shopify, l'intégralité des options activées sur votre dashboard.

Pour l'exemple ci-après, nous suivrons l'hypothèse que les paiements en 2, 3 et 4 fois sont activés sur votre dashboard, mais que vous n'avez installé que les méthodes Alma en 3 et 4 fois sur votre boutique :

  1. Dans l'éditeur de thème, ouvrir le fichier alma-badge.liquid, dans la section "Snippets".
  2. Repérer vers la fin du fichier le code qui initialise le badge :
widgets.add(Alma.Widgets.PaymentPlans, {
  container: '#alma-badge',
  purchaseAmount: {{ price }},
});
  1. En-dessous de la ligne commençant par purchaseAmount, il faut insérer une option plans qui listera les nombres d'échéances devant être affichés :
widgets.add(Alma.Widgets.PaymentPlans, {
  container: '#alma-badge',
  purchaseAmount: {{ price }},
  plans: [{ installmentsCount: 3 }, { installmentsCount: 4 }],
});
  1. Si vous souhaitez également personnaliser les montants minimums et maximums affichés, il est possible d'impacter cela pour chaque "nombre d'échéances" configuré :
widgets.add(Alma.Widgets.PaymentPlans, {
        container: '#alma-badge',
        purchaseAmount: {{ price }},
        plans: [
          { installmentsCount: 3, minAmount: 7500, maxAmount: 200000 },
          { installmentsCount: 4, minAmount: 10000, maxAmount: 200000 }
        ]
});
  1. Enregistrer le fichier

Montants minimum et maximum

Pour chaque nombre d'échéances, les montants minimum et maximum autorisés utilisés par le badge sont dictés par la configuration faite sur votre compte marchand par Alma.

Si vous souhaitez que ces bornes soient modifiées, parlez-en à votre contact chez Alma ou à notre support : [email protected]

Opérations marketing

Plus de 3500 marchands utilisent le paiement en plusieurs fois comme un outil marketing avec succès. Plus les visiteurs verront Alma en amont de votre tunnel d'achat, plus votre taux de conversion sera élevé !

N'hésitez donc pas à :

  • Mentionner la disponibilité d'Alma sur votre page d'accueil.
  • Ajouter une bannière informant de la disponibilité du paiement en plusieurs fois, ou un fin bandeau en haut de page.
  • Envoyer une newsletter à vos clients/prospects pour les informer de cette nouvelle méthode de paiement.
  • Relancer les paniers abandonnés en leur proposant de régler en plusieurs fois.

Pour aller plus loin
Did this page help you?