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

La vidéo ci-dessous montre l'intégralité des 5 étapes détaillées plus loin.

  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/widgets.min.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@alma/[email protected]/dist/widgets.umd.js"></script>

<script>
  ;(function () {
    var widgets = Alma.Widgets.initialize(
       'Insert Merchant ID', // your marchant ID, not API Key 
        Alma.ApiMode.LIVE, // API mode (LIVE or TEST)
    );
    widgets.add(Alma.Widgets.PaymentPlans, {
        container: '#alma-badge',
        purchaseAmount: {{ price }},
        transitionDelay:5500, // Amount of time in between button animations in ms.
        hideIfNotEligible:false, 
        locale:'fr', // Widget language. You can use fr|en|es|it|de|nl-NL|nl-BE
    })
  })()
</script>
  1. À la 39ème ligne du fichier, remplacer le texte INSERT MERCHANT ID par l’ID marchand fourni sur le dashboard Alma.
    Vous pouvez changer à la ligne 47 la "locale" afin d'afficher le badge dans la langue de votre choix.

❗️

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

  1. Enregistrer le fichier.

🚧

Par défaut, le badge affiche les informations pour les méthodes de paiement que vous ou le support Alma a 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.

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 et différé pour votre boutique.

Rendez-vous à cette section pour personnaliser votre badge une fois installé.


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 (themes 1.0)

La vidéo ci-dessous montre l'intégralité des 4 étapes détaillées plus loin.

  1. Dans l'éditeur de thème, ouvrir le fichier product-template.liquid qui se trouve dans la catégorie "Sections". Si le fichier est introuvable, alors passer à cette section (themes 2.0) pour continuer la procédure.

  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 :


Insertion sur la fiche produit (themes 2.0)

📘

Dans le cas ou vous ne trouvez pas le fichier product-template.liquid sous la catégorie "Sections", votre thème appartient à une autre catégorie et vous devez suivre une procédure différente.

La vidéo ci-dessous montre l'intégralité des 5 étapes détaillées plus loin.

  1. Dans la section Themes, cliquer sur le bouton "Personnaliser" pour le thème concerné.
  1. Sélectionner ensuite "Products > Produit par défaut" depuis le menu déroulant du haut.
  1. Depuis le menu de gauche, sélectionner ensuite "Ajouter un bloc > Custom liquid"

Nous recommandons d'insérer le badge juste en-dessous du prix du produit, comme le montre l'image ci-dessus.

  1. Dans ce bloc "Custom liquid", ajouter le code suivant :
{% render 'alma-badge', variant: current_variant, product: product %}
  1. Enregistrer le fichier

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

📘

Toujours impossible d'installer le badge

Si votre thème ne permet pas d'installer l'alma-badge snippet en suivant une des 2 procédures ci-dessus : vous avez un thème spécifique. S'il vous plait, demandez à votre agence ou à vos développeurs. Si vous êtes toujours bloqué, contactez votre support Alma afin de vous assister.


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>

Pour insérer le badge dans la page panier, aller dans cart-template.liquid et ajouter le code. Il n'y a pas de position standard, cela dépend de votre thème. Rapprochez-vous de votre webmaster pour l'ajouter.

Méthodes de paiement, 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 et différé pour votre boutique.

Méthodes de paiement

Par défaut, le badge affiche les informations pour les méthodes de paiement que vous ou le support Alma a 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 3, 4, 10 fois et J+15 sont activés sur votre dashboard, mais que vous n'avez installé que les méthodes Alma en 4, 10 fois et J+15 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 :

📘

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.

widgets.add(Alma.Widgets.PaymentPlans, {
        container: '#alma-badge',
        purchaseAmount: {{ price }},
        transitionDelay:5500, // Amount of time in between button animations in ms.
        hideIfNotEligible:false, 
        locale:'fr', // Widget language. You can use fr|en|es|it|de|nl-NL|nl-BE
      });
  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 }},
        transitionDelay:5500, // Amount of time in between button animations in ms.
        hideIfNotEligible:false, 
        locale:'fr', // Widget language. You can use fr|en|es|it|de|nl-NL|nl-BE
        plans: [
          { installmentsCount: 4},
          { installmentsCount: 10},
          { deferredDays: 15, installmentsCount: 1}
        ]
});

👍

En spécifiant les "plans", vous donnez aussi plus d'informations à vos clients : les plans non éligibles seront visibles et grisés avec une précision sur leurs conditions d'utilisation.

  1. Si vous souhaitez également personnaliser les montants minimums et maximums affichés, il est possible d'impacter cela pour chaque méthodes de paiement configurées. Ces nouveaux min et max devront être au sein même des bornes min et max renseignées dans votre dashboard Alma :
widgets.add(Alma.Widgets.PaymentPlans, {
        container: '#alma-badge',
        purchaseAmount: {{ price }},
        plans: [
          { installmentsCount: 4, minAmount: 10000, maxAmount: 200000 },
          { installmentsCount: 10, minAmount: 15000, maxAmount: 200000 },
          { deferredDays: 15, installmentsCount: 1, minAmount: 7500, 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 et différé 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 et différé, 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 ou différé.

Pour aller plus loin
Did this page help you?