Le deuxième message de la marque de soins pour hommes que nous appelons Kestrel est arrivé quelques semaines après le projet de sections personnalisées. Une seule capture d’écran : la fiche produit d’un bijoutier avec une rangée de cartes sous le bouton d’ajout au panier, 1 acheté, 1 offert, choisissez votre deuxième pièce. En dessous, une question courte : peut-on avoir ça sur nos fiches produit ?
Une offre Shopify un acheté, un offert s’active en quelques minutes dans l’administration. Le plus dur est que les clients l’utilisent. Cette étude de cas montre comment nous avons construit le sélecteur, pourquoi nous n’avons pas copié le code de la boutique de référence, et le seul réglage Shopify qui rend le second produit gratuit.
À propos de cette étude de cas : il s’agit d’un récit composite fondé sur de vrais projets Shopify. Le nom de la marque, les photos de produits et certains détails ont été modifiés, et les images de produits sont des illustrations. Les schémas de code, les problèmes et les corrections sont exactement ceux que nous avons traités.
Le projet en bref
| Client | Marque de soins pour hommes en vente directe, Pays-Bas (boutique en néerlandais, EUR) |
| Plateforme | Shopify Online Store 2.0, thème premium existant conservé |
| Périmètre | 1 snippet, 1 feuille de style, 1 script, 1 nouveau bloc de fiche produit, aucune application |
| Remise | Remise automatique native de Shopify (Achetez X, obtenez Y) |
| Livraison | Installé par le marchand dans l’éditeur de code du thème, fichier par fichier |
Pourquoi une remise BOGO native ne suffit pas
Shopify propose les remises « Achetez X, obtenez Y » depuis des années. Une fois créée, la remise s’applique dès que les bons produits sont dans le panier. Tout le problème est dans ce dès que. Le client doit savoir que l’offre existe, quitter la fiche, trouver un produit éligible, l’ajouter et revenir. La plupart ne le font pas. Une bannière « 1+1 offert » sans moyen d’agir produit surtout des e-mails demandant pourquoi la remise n’a pas fonctionné.
La boutique de référence avait résolu cela avec un sélecteur : les produits éligibles affichés là où se prend la décision d’achat, un geste pour choisir, et le bouton principal qui devient Ajouter 2 produits au panier. C’est l’expérience que Kestrel voulait.
Lire la référence, puis la mettre de côté
Le marchand nous a transmis le CSS, le JavaScript et le HTML de la boutique de référence. C’était un travail soigné : environ 400 lignes avec des panneaux du bas, une couche « tout voir », une détection de la couleur de fond des photos et sa propre requête d’ajout au panier. Il était aussi écrit pour un autre thème, un autre formulaire et un autre tiroir panier, et il appartenait à quelqu’un d’autre.
Nous l’avons donc utilisé comme description du comportement, pas comme code. Avant d’écrire quoi que ce soit, nous avons lu le formulaire produit du thème de Kestrel. Ce fut l’heure la plus utile du projet.
La découverte : le thème savait déjà ajouter deux produits
L’élément product-form du thème possède une fonction pour les cases « souvent achetés ensemble ». À l’envoi, il rassemble chaque input[name="bundles"] coché dans un élément lié au formulaire et l’envoie à /cart/add.js avec le produit principal. Il gère aussi le tiroir panier, le mode page panier, les messages d’erreur et le bouton d’ajout au panier fixe.
Le sélecteur n’avait donc besoin d’aucune requête panier propre. Chaque carte contient une case cachée nommée bundles, et l’élément sélecteur porte l’identifiant du formulaire :
<bogo-picker form="{{ product_form_id }}">
<label class="bogo-card__btn">
<input type="checkbox" name="bundles" value="{{ variant.id }}" class="sr-only">
<span>Choose</span>
</label>
</bogo-picker>Choisir une carte coche sa case. Un appui sur le bouton principal, et le thème ajoute les deux produits en une seule requête, ouvre son propre tiroir panier et met à jour le compteur, exactement comme pour tout autre produit. Notre JavaScript fait une centaine de lignes, et aucune ne touche au panier.
Les détails qui le rendent natif
- Un seul produit offert à la fois. Choisir une carte décoche les autres, personne n’ajoute trois cadeaux par erreur.
- Un bouton qui dit ce qui va se passer. Quand une carte est choisie, le texte devient « Ajouter 2 produits au panier ». Le thème réinitialise ce texte à chaque changement de variante, alors un petit
MutationObserverle rétablit. - Variantes sur la carte. Les produits à plusieurs variantes affichent un menu déroulant compact, et la valeur de la case le suit.
- Cartes alignées. Les cartes partagent des rangées grâce au subgrid CSS : noms, prix et boutons restent alignés même si un nom passe sur deux lignes.
- Mobile d’abord. Sur téléphone, 2,3 cartes sont visibles et la suivante dépasse du bord ; sur ordinateur, trois cartes avec des flèches.
- Réinitialisation propre. Après un ajout réussi, le sélecteur écoute l’événement
cartUpdatedu thème et efface le choix.
Le bloc s’ajoute dans l’éditeur de thème comme n’importe quel bloc de fiche produit. Le marchand choisit une collection de produits éligibles, ou un métachamp liste de produits pour des offres propres à un produit. Les textes « Offert », « Choisir » et celui du bouton sont des réglages. Le produit consulté et les produits épuisés sont exclus automatiquement.
Rendre le second produit vraiment gratuit
Le sélecteur ne fait que mettre deux produits dans le panier. Le prix est géré par Shopify, avec une remise automatique :
- Créez une collection des produits qui peuvent être offerts, par exemple « BOGO Offert ».
- Dans Réductions, créez une réduction Achetez X, obtenez Y avec la méthode Automatique.
- Le client achète : quantité minimum 1 dans une collection qui contient tous les produits payants.
- Le client obtient : quantité 1 dans « BOGO Offert », à la valeur Gratuit.
- Cochez Définir un nombre maximal d’utilisations par commande et indiquez 1, sinon trois achats donnent trois produits offerts.
Shopify n’a pas d’option « tous les produits » dans le champ Le client achète, il faut donc une collection. Une collection automatisée avec la condition « le prix est supérieur à 0 » se tient à jour toute seule. Un cas particulier mérite d’être connu : si les produits offerts sont aussi dans cette collection, acheter deux articles de « BOGO Offert » en rend un gratuit. Pour la plupart des boutiques, c’est acceptable. Sinon, étiquetez les produits BOGO et excluez l’étiquette dans les conditions de la collection.
Installer sans téléverser de thème
Le thème en ligne de Kestrel contenait d’autres modifications non publiées, téléverser une nouvelle version du thème n’était donc pas possible. Nous avons livré la fonction en cinq étapes précises pour l’éditeur de code : trois nouveaux fichiers (un snippet, une feuille de style et un script) et deux petits ajouts dans la section produit, une ligne de rendu et une entrée de bloc dans le schéma. Chaque étape indiquait la ligne à chercher et ce qu’il fallait coller au-dessus. Comme chaque changement ne fait qu’ajouter, il survit à la prochaine mise à jour du thème en quelques minutes.
Nous avons aussi créé une vignette simple pour la collection « BOGO Offert », pour qu’elle ait l’air terminée partout où le thème l’affiche.
Ce que nous dirions à toute boutique qui envisage le BOGO
- Placez le choix là où se prend la décision. Une offre que le client doit assembler seul est une offre que la plupart ignorent.
- Lisez votre thème avant d’écrire du code. La meilleure ligne de ce projet est celle que nous n’avons pas eu à écrire, car le thème savait déjà ajouter des lots au panier.
- Laissez la logique de prix dans Shopify. Une remise automatique native fonctionne dans le panier, au paiement et dans tous les rapports, et peut être suspendue sans toucher au thème.
- Limitez les utilisations par commande dès le premier jour.
Vous voulez un sélecteur de cadeau, un créateur de lots ou une autre fonction sur mesure pour vos fiches produit ? Découvrez notre service de développement de thèmes Shopify ou parlez-nous de votre boutique.
Questions fréquentes
Shopify permet-il « un acheté, un offert » sans application ?
Oui. Les remises automatiques « Achetez X, obtenez Y » sont intégrées à Shopify. Ce qui manque, c’est un moyen de choisir le produit offert sur la fiche produit, et c’est ce qu’apporte le sélecteur.
Le sélecteur fonctionnera-t-il avec mon thème ?
L’idée fonctionne avec tout thème Online Store 2.0. La mise en œuvre dépend de la façon dont le formulaire produit de votre thème ajoute au panier. Ici, nous avons réutilisé sa fonction de lots ; dans d’autres thèmes, nous ajoutons les deux articles en une seule requête à l’API Cart.
Le produit offert peut-il avoir des variantes ?
Oui. Les produits à plusieurs variantes affichent un petit menu déroulant sur la carte, et c’est la variante choisie qui est ajoutée.
Les clients peuvent-ils abuser de l’offre ?
C’est la remise, pas le sélecteur, qui décide de ce qui est gratuit. Avec une seule utilisation par commande, personne ne peut obtenir plus d’un produit offert par commande.
Puis-je proposer des cadeaux différents selon les produits ?
Oui. Le bloc lit une collection par défaut, et un métachamp liste de produits peut la remplacer pour chaque produit.