Le message est arrivé un mercredi matin, avec une capture d’écran et un morceau d’ancien code en pièce jointe. Le propriétaire d’une boutique en ligne de Copenhague qui vend des valises en aluminium et des articles de voyage, que nous appellerons Havn & Co., avait vu quelque chose dans le panier d’un concurrent et le voulait aussi : un petit encadré sous les produits avec le texte Pack sécurité : protection contre la perte, le vol et les dommages, et un interrupteur que le client peut activer avant de payer.
Nous le voulons exactement comme ça, disait le message, et nous voulons modifier nous-mêmes le texte, l’image et les couleurs. Pas de nouvelle application, s’il vous plaît. Cette étude de cas montre comment nous avons construit cet interrupteur de protection de livraison Shopify : ce que fait la fonction, pourquoi chaque élément est là, la surprise découverte sur la boutique en ligne et toutes les options ajoutées à l’éditeur de thème.
À propos de cette étude de cas : elle s’appuie sur un vrai projet Shopify pour un client danois. Le nom de la boutique a été modifié et les images sont des illustrations. Les fonctions, réglages et tests sont décrits tels qu’ils ont été livrés.
Le projet en bref
| Client | Boutique en ligne danoise de valises et d’articles de voyage, prix en DKK |
| Plateforme | Shopify, thème Horizon 3.5, application de panier Upcart |
| Fonction | Interrupteur facultatif « Pack sécurité » (protection de livraison) dans le panier |
| Livré | 1 snippet, 1 script, 1 feuille de style, un nouveau groupe Safety package dans les réglages du thème et de petits ajouts dans 4 fichiers |
| Contraintes | Pas d’application de protection supplémentaire, pas de changement de thème, tout modifiable dans l’éditeur, textes en danois |
La demande : ce que voulait la boutique
À partir de la capture, de l’exemple de code et d’un court appel, nous avons résumé la demande en cinq besoins concrets :
- Un encadré de protection dans le panier, juste sous les produits, avec une icône, un titre, une courte description et un interrupteur.
- Un seul geste pour l’ajouter ou le retirer, avec un total mis à jour instantanément et sans rechargement de page.
- Un panier propre : la protection ne doit pas apparaître comme une ligne produit supplémentaire déroutante.
- Un contrôle total dans l’éditeur de thème : texte, image, tailles, couleurs et produit tarifé, sans toucher au code.
- Des textes en danois sur la boutique : Sikkerhedspakke et Beskyttelse mod tab, tyveri og skade.
Un interrupteur de protection de livraison : quoi et pourquoi
Un interrupteur de protection de livraison permet au client de choisir, à la dernière étape avant le paiement, de régler de petits frais pour être couvert si le colis est perdu, volé ou endommagé. Derrière l’interrupteur se trouve un produit Shopify classique (49 kr dans nos illustrations) ajouté au panier ou retiré.
Pour une boutique qui vend des valises à plusieurs centaines de couronnes, il remplit trois rôles à la fois :
- De la sérénité au bon moment. La question « et s’il se perd ? » trouve sa réponse à côté du bouton de paiement, là où l’hésitation apparaît.
- Plus de revenus par commande. Chaque client qui l’active ajoute les frais à la commande, et la boutique décide comment les utiliser pour couvrir les sinistres.
- Moins de demandes au service client. Si un colis disparaît, un accord clair sur ce qui est couvert existe déjà.
Une règle a façonné tout le design : dans l’UE, une option payante supplémentaire doit être choisie activement par le client. La directive sur les droits des consommateurs (2011/83/UE, article 22) interdit les cases précochées pour les paiements supplémentaires. C’est pourquoi l’interrupteur est désactivé par défaut, et le mode d’ajout automatique facultatif est clairement indiqué dans les réglages et respecte toujours le client qui le désactive.
La surprise : le panier n’était pas celui du thème
Notre première version intégrait l’encadré dans le panier latéral du thème Horizon. Le code fonctionnait, mais sur la boutique en ligne, il restait introuvable. La raison : la boutique utilise Upcart, une application qui remplace entièrement le panier du thème et dessine le sien, isolé des styles du thème.
Plutôt que de demander au client de coller du code dans l’application, nous avons inspecté la boutique en ligne, vérifié les fonctions Upcart disponibles et changé d’approche : le thème conserve tous les réglages, et un petit script place l’encadré dans le panier Upcart, le maintient en place quand Upcart se redessine et demande à Upcart de se rafraîchir après chaque changement. La version pour le panier du thème reste en réserve si la boutique retire un jour Upcart.
Les fonctions, une par une
1. Un interrupteur et un total instantané
Quoi : l’interrupteur ajoute ou retire le produit de protection via l’API panier de Shopify, puis le panier et le compteur se mettent à jour. Pourquoi : recharger la page à ce moment casse le parcours et coûte des ventes. Le client voit le nouveau total en une seconde environ.
2. Une ligne de protection masquée
Quoi : le produit de protection est masqué dans la liste des articles, dans Upcart comme dans le panier du thème. Pourquoi : une seconde « ligne produit » avec ses propres boutons de quantité déroute. L’encadré indique déjà l’état, et le prix reste compris dans le total et la commande.
3. Des règles de panier intelligentes
Quoi : après chaque changement du panier, trois règles s’exécutent automatiquement. Pourquoi : un panier ne doit jamais se retrouver dans un état étrange, par exemple avec une protection achetée seule.
- Jamais vendue seule : si le client retire le dernier vrai produit, la protection est retirée aussi.
- Toujours une quantité de 1 : les doublons ou les quantités supérieures à un sont corrigés.
- Respecte un « non » : avec l’ajout automatique actif, un client qui désactive la protection n’est plus sollicité pendant sa visite.
4. Compatible avec Upcart et avec le thème
Quoi : la même fonction tourne dans le panier Upcart, dans celui du thème Horizon et sur la page panier complète. Pourquoi : les marchands changent d’applications. L’encadré doit survivre à ce choix sans être reconstruit.
5. Un code léger, dont la boutique est propriétaire
Quoi : un petit script et une feuille de style, chargés par le thème. Pourquoi : pas d’abonnement mensuel pour une autre application de protection, pas de script tiers sur chaque page, et le code vit dans le thème du marchand.
Toutes les options ajoutées à l’éditeur de thème
Tous les réglages se trouvent dans un nouveau groupe : Boutique en ligne → Thèmes → Personnaliser → Paramètres du thème → Safety package. Le marchand peut tout modifier ci-dessous sans développeur.
| Groupe | Réglage | Rôle |
|---|---|---|
| Général | Enable safety package | Active ou désactive toute la fonction |
| Protection product | Le produit (et le prix) ajouté au panier | |
| Add automatically to cart | Ajout automatique facultatif, désactivé par défaut ; mémorise le refus du client | |
| Hide protection product in the item list | Garde le panier propre | |
| Also show on cart page | Affiche aussi l’encadré sur la page panier | |
| Contenu | Image, largeur de l’image | Votre propre image, ou l’icône intégrée carton et bouclier |
| Couleur du bouclier de l’icône | Couleur du bouclier dans l’icône intégrée | |
| Titre, description | N’importe quel texte, dans n’importe quelle langue | |
| Afficher le prix près du titre | Affiche le prix de la protection | |
| Typographie | Taille du titre, espacement, majuscules, taille de la description | S’accorde à la typographie de la boutique |
| Style de l’encadré | Couleur du texte et du fond, séparateur, épaisseur et couleur de la bordure, arrondi, marge intérieure, marge latérale dans Upcart | S’accorde au design du panier |
| Interrupteur | Couleurs activé, désactivé et bouton | Un interrupteur aux couleurs de la marque |
Comment ça marche en coulisses
Pour ceux qui construisent eux-mêmes des boutiques Shopify, en bref : le thème affiche les réglages sous forme d’un petit bloc JSON et d’un modèle HTML. Le script les lit, attend le chargement d’Upcart, puis place l’encadré sous la liste des produits d’Upcart. Un MutationObserver le remet en place chaque fois qu’Upcart se redessine. L’interrupteur appelle les points d’accès standard du panier, puis rafraîchit le panier :
// activer
await fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items: [{ id: protectionVariantId, quantity: 1 }] }),
});
// laisser Upcart redessiner le panier avec le nouveau total
window.upcartRefreshCart?.();La ligne de protection est masquée grâce à son identifiant de variante, qu’Upcart inclut dans l’identifiant de chaque ligne. Les requêtes du panier passent par une file d’attente : des appuis rapides répétés ne créent jamais de conflit.
Tests sur la boutique en ligne
Avant la livraison, nous avons testé le comportement sur la vraie boutique, dans une session de navigateur isolée et avec un produit de substitution, sans créer de vraie commande :
| Test | Résultat |
|---|---|
| Ajouter un produit et ouvrir le panier | L’encadré apparaît sous l’article, désactivé |
| Activer | Protection ajoutée, ligne masquée, total mis à jour |
| Désactiver | Protection retirée, total revenu au prix du produit |
| Activer puis supprimer le dernier vrai produit | Protection retirée automatiquement, panier vide |
Ce que le client a obtenu
- Un encadré Pack sécurité fidèle à sa référence, en danois, dans le panier que ses clients voient réellement.
- Un groupe de réglages modifiable en quelques minutes : texte, image, couleurs, tailles et produit tarifé.
- Aucun nouvel abonnement mensuel pour la fonction de protection.
- Des règles qui gardent chaque panier valide, et un choix actif conforme aux règles européennes de consommation.
- Un guide simple pour créer le produit de protection et activer la fonction.
Fonction sur mesure ou application de protection ?
| Application de protection | Interrupteur sur mesure | |
|---|---|---|
| Coût mensuel | Généralement un abonnement ou une part de chaque frais | Développement unique, puis gratuit |
| Design | Le widget de l’application, style limité | Votre design exact, réglé dans l’éditeur de thème |
| Panier | Pas toujours compatible avec toutes les applications de panier | Conçu pour votre panier (ici Upcart) et le thème |
| Gestion des sinistres | Souvent assurée par l’éditeur de l’application | Assurée par la boutique elle-même |
| Idéal pour | Les boutiques qui veulent externaliser les sinistres | Les boutiques qui veulent garder le contrôle et une expérience à leur image |
Aucune option n’est toujours la bonne. Si la boutique veut qu’un tiers gère les sinistres, une application a du sens. Si elle veut maîtriser les frais, le texte et l’apparence, un interrupteur sur mesure est plus léger et moins cher à long terme.
Que peut encore accueillir votre panier ?
Le même principe (un réglage dans l’éditeur de thème, un petit script, un produit ou un attribut de panier derrière) fonctionne pour beaucoup d’autres options qui augmentent la valeur de commande ou réduisent les questions :
- Emballage cadeau en option payante.
- Barre de progression vers la livraison gratuite qui incite à ajouter un article.
- Choix de la date de livraison enregistré dans la commande.
- Garantie prolongée par produit.
- Arrondi solidaire pour une bonne cause.
- Gravure et notes de commande avec validation.
Questions fréquentes
Est-ce compatible avec Upcart ?
Oui. L’encadré est placé dans le panier Upcart et reste synchronisé quand Upcart se redessine. Il fonctionne aussi dans le panier du thème et sur la page panier.
Peut-on ajouter la protection automatiquement dans l’UE ?
Les options payantes doivent être choisies par le client, c’est pourquoi l’interrupteur est désactivé par défaut. L’ajout automatique est facultatif ; une boutique qui l’active devrait demander son propre avis juridique.
Le prix peut-il être un pourcentage du panier ?
Par défaut, c’est un prix fixe défini sur le produit de protection. Une tarification par paliers selon la valeur du panier est possible avec plusieurs variantes et un peu de logique en plus.
Est-ce que cela ralentit la boutique ?
Non. C’est un petit script et une feuille de style, et les requêtes du panier ne s’exécutent que lorsque le client utilise l’interrupteur ou que le panier change.
Peut-on changer le texte plus tard ?
Oui. Le titre, la description, l’image et les couleurs sont des réglages du thème : ils se modifient en quelques minutes, dans n’importe quelle langue.
À retenir
- Proposez la protection là où la décision se prend : dans le panier, à côté du total.
- Faites-en un choix actif au prix clair, et respectez le client qui dit non.
- Masquez la ligne technique, gardez un total honnête.
- Vérifiez quel panier la boutique utilise réellement avant de développer.
- Placez textes, couleurs et tailles dans l’éditeur de thème, pour que le marchand en garde la maîtrise.
Vous voulez une fonction comme celle-ci dans votre boutique ? Nous créons des fonctions de panier sur mesure, des intégrations Upcart et thème, ainsi qu’un développement Shopify complet pour des boutiques dans toute l’Europe. Découvrez nos services ou parlons-en.