Laisser le client choisir son cadeau offert dans une fenêtre ou avec un bouton

Quand la modale cadeau apparaît

La modale cadeau est une fenêtre qui liste les cadeaux débloqués par le client. Elle sert quand un palier cadeau propose plus d’un produit ou d’une variante. Son mode d’apparition se règle dans la carte du palier, section Ajout automatique du cadeau au panier (voir cadeau offert), sauf si le design de la barre le remplace (voir plus bas) :

Option	Ce que voit le client
Afficher automatiquement la modale cadeau	La fenêtre s’ouvre d’elle-même quand le palier est atteint. Un cadeau à variante unique est simplement ajouté au panier.
Afficher le bouton « Choisir un cadeau »	Un bouton sous la barre ouvre la fenêtre. Réservé aux paliers à plusieurs cadeaux. Si les autres produits offerts sont désactivés ensuite, le bouton reste et propose le cadeau restant ; si le client le retire du panier, le bouton revient.
Afficher la liste des cadeaux dans la barre de progression	Pas de fenêtre : les cadeaux sont listés dans la barre et ajoutés en un clic.
Désactiver la modale et le bouton	Yaco Progress Bar n’ajoute rien. À utiliser quand une autre app ajoute le cadeau.

Quand deux paliers cadeaux ou plus sont atteints en même temps, une seule fenêtre s’ouvre, avec une section par palier et un seul bouton de validation.

Afficher un palier autrement dans chaque barre

Un design peut remplacer le mode du palier dans les barres qui l’utilisent. Ouvrez Design › Interface cadeau, carte Affichage des cadeaux :

Choix	Ce qu’affichent les barres qui utilisent ce design
Suivre le réglage de chaque palier (par défaut)	Le mode réglé dans la carte de chaque palier.
Liste des cadeaux dans la barre	Une fois le palier atteint, ses cadeaux sont listés sous la barre. Pas de bouton Choisir un cadeau dans cette barre.
Bouton « Choisir un cadeau »	Une fois le palier atteint, le bouton Choisir un cadeau apparaît dans la barre. Un clic ouvre la fenêtre, avec les couleurs et les textes du design de cette barre.

Exemple : le tiroir de panier utilise le design A, réglé sur Liste des cadeaux dans la barre, et la barre de la page panier utilise le design B, réglé sur Bouton « Choisir un cadeau ». Le même palier montre ses cadeaux en liste dans le tiroir et par un bouton sur la page panier. Cela reste un seul palier, une seule réduction et un seul cadeau : le choisir depuis l’une ou l’autre barre ajoute le même cadeau.

Dans la carte du palier, sous le mode, l’app liste les designs qui le remplacent et le mode que chacun impose.

Fenêtre qui s’ouvre d’elle-même. Pour un palier réglé sur Afficher automatiquement la modale cadeau, la fenêtre ne s’ouvre plus d’elle-même quand toutes les barres de la page qui affichent ce palier utilisent un design réglé sur la liste ou sur le bouton. S’il reste au moins une barre qui suit le réglage du palier, elle s’ouvre comme avant. Quand aucune barre n’est encore affichée (par exemple un tiroir panier qui se charge après l’ajout), ce sont les barres placées dans votre thème qui décident.

Limites :

• Seuls les paliers à plusieurs cadeaux sont concernés. Un palier à un seul cadeau l’ajoute toujours automatiquement ; si le client le retire, la barre affiche un bouton Remettre mon cadeau (voir plus bas).
• Quand un tel palier est atteint en même temps qu’un palier à un seul cadeau, le cadeau unique s’ajoute seul et la fenêtre ne s’ouvre pas : le client choisit l’autre cadeau dans la liste ou par le bouton de la barre. C’est aussi le cas d’un palier réglé sur la liste ou sur le bouton dans sa propre carte.
• Le mode compatibilité (Désactiver la modale et le bouton) n’est jamais remplacé : il reste fixé par le palier.
• L’option payante (Proposer les produits avant l’atteinte du palier, en option payante) reste réservée aux paliers réglés sur la liste dans leur propre carte, et ces paliers gardent leur liste dans toutes les barres : un design réglé sur le bouton ne la remplace pas. Un palier réglé sur le bouton et affiché en liste par un design ne propose pas l’option payante.

Ce qui se passe quand le client la ferme

Le bouton de refus (« No thanks » par défaut), la touche Échap ou un clic en dehors de la fenêtre la ferment pour la session de navigation en cours. Elle ne se rouvre pas d’elle-même tant qu’un nouveau palier n’est pas atteint. Le bouton Choisir un cadeau, s’il est affiché, reste disponible pour la rouvrir.

Fermer n’est pas refuser ; retirer le cadeau du panier, si. Pour rendre le choix obligatoire, cochez Masquer le bouton ‘Non merci’.

Quand le client retire un cadeau unique

Un palier à un seul cadeau, ajouté automatiquement, n’a pas de fenêtre. Quand le client retire ce cadeau du panier, l’app ne le remet pas d’elle-même, et un bouton Remettre mon cadeau apparaît sous la barre de progression, dans chaque barre qui affiche ce palier. Un clic remet le cadeau dans le panier, sans ouvrir de fenêtre.

Le bouton disparaît dès que le cadeau est revenu. Il ne s’affiche pas quand le panier est repassé sous le seuil, quand le cadeau est épuisé, ni quand un code promo non cumulable avec le cadeau le retire. Si un palier à plusieurs cadeaux a aussi un cadeau à choisir dans la même barre, le bouton propose d’abord Remettre mon cadeau ; une fois le cadeau revenu, il redevient Choisir un cadeau pour ce choix.

Le bouton reprend le style du Bouton « Choisir un cadeau » du design de la barre, et son libellé se règle par design (voir plus bas). Pour que le client ne puisse pas retirer le cadeau du tout, cochez Forcer à garder le cadeau dans le panier dans la carte du palier.

Où régler son apparence et ses textes

Les réglages sont répartis en trois endroits.

1. Design › Interface cadeau (dans l’app) :

• Bouton « Choisir un cadeau » : Afficher le bouton cadeau, Permettre de modifier le cadeau après sélection (le bouton reste affiché et rouvre la fenêtre), classes CSS pour reprendre le style de bouton de votre thème, taille de police, couleurs, bordure et espacements.
• Modale cadeau : Taille de police du titre (desktop), Taille de police du titre (mobile), Titre en gras, Regrouper les variantes par produit (une carte par produit avec un menu de variantes, au lieu d’une carte par variante) et Masquer le bouton ‘Non merci’.
• Couleurs de la modale cadeau, réglées par design : fond de la fenêtre, fond et bordure des cartes cadeau (normales et choisie), texte, fond et marge verticale du bouton « Ajouter au panier », et Afficher le sous-titre. Une couleur laissée vide reprend celle de l’intégration d’application de votre thème, puis la couleur par défaut. Avec plusieurs designs, le titre de la carte indique le design modifié : changez celui qu’utilise réellement votre barre.
• Les textes par défaut de la fenêtre, réglés par design dans la carte Textes par défaut de la modale cadeau : le titre, le sous-titre, les titres de liste, les mentions « Offert » et « Épuisé », le message « cadeau plus disponible », les boutons « Choisissez votre cadeau », « Ajouter au panier » et « Non merci », le libellé du bouton « Choisir un cadeau », et le Bouton « Remettre le cadeau » (« Remettre mon cadeau » s’il est laissé vide, traduit dans chaque langue de votre boutique). L’onglet Interface cadeau s’affiche aussi quand un palier offre un seul cadeau ajouté automatiquement, sans Forcer à garder le cadeau dans le panier.
• Le style de la liste de cadeaux affichée dans la barre, et du CSS personnalisé pour la fenêtre et pour la liste.

2. La carte du palier : Texte du bouton cadeau fixe le libellé du bouton pour ce palier, et la carte Textes de la modale cadeau remplace le titre, le sous-titre et les titres de liste pour ce palier. Utilisez {price} dans le sous-titre pour le seuil du palier et {quantity} dans le titre de liste pour le nombre de cadeaux à choisir. Un texte réglé sur le palier passe avant celui du design, quand la fenêtre n’affiche que ce palier. Quand elle en regroupe plusieurs, ce sont les textes du design qui s’affichent. Un champ vide reprend aussi le texte du design. Décocher Afficher le sous-titre masque le sous-titre pour ce palier seulement ; un palier ne peut pas réafficher un sous-titre que son design masque.

3. L’éditeur de thème : dans l’admin Shopify, ouvrez Boutique en ligne › Personnaliser, puis Intégrations d’applications › Yaco Progress Bar. Sa section Gift modal (libellés en anglais) est en cours d’abandon : ses couleurs, son réglage de sous-titre et ses textes ne servent plus que quand le design n’a pas les siens, et disparaîtront plus tard. Si vous les aviez modifiés, ils ont été recopiés dans vos designs, où vous les changez désormais.

Prévisualiser la modale dans l’app

La carte Couleurs de la modale cadeau, dans Design › Interface cadeau et dans l’onglet Interface cadeau de Paliers & Réductions, a un bouton Aperçu de la modale. Il ouvre la fenêtre dans l’app, avec le design que vous modifiez et tous les paliers qui proposent un choix de cadeaux, atteints ou non. Dans l’aperçu de la barre, le bouton Choisir un cadeau l’ouvre aussi, avec les paliers atteints par le panier simulé.

Rien n’est ajouté à un panier : choisissez des cadeaux et fermez la fenêtre comme le ferait un client, rien n’est gardé. Deux différences avec votre boutique :

• une couleur laissée vide s’affiche avec la couleur par défaut, pas celle de l’intégration d’application de votre thème ;
• la fenêtre prend le design que vous modifiez, quel que soit le placement que votre thème donne à chaque palier.

Si l’app indique qu’aucun palier ne propose de choix de cadeaux, ajoutez plusieurs produits ou variantes à un palier cadeau.

Cadeaux en rupture de stock

La fenêtre revérifie le stock à chaque fois que des cadeaux sont proposés, au plus une fois par minute :

• un cadeau qui passe en rupture est marqué Sold out et ne peut plus être choisi ;
• un cadeau déjà sélectionné qui passe en rupture est retiré de la sélection, avec le message "Gift no longer available" message ;
• le nombre de cadeaux proposés suit le stock réel : un palier qui promet 2 cadeaux n’en propose qu’un s’il ne reste qu’un exemplaire, et le titre s’ajuste.

Aucune limite ne s’applique quand une variante ne suit pas son stock ou peut se vendre en rupture. Pour lire le stock, l’app demande à Shopify l’autorisation de lire l’inventaire des produits, et ne lit que les quantités de vos produits cadeaux.

Traduire la modale cadeau

Les textes d’un palier et les textes cadeau du design se traduisent depuis leurs propres champs, avec le picto de traduction au bout de chaque champ (voir traductions). Les traductions faites auparavant dans l’application Shopify Translate & Adapt ont été recopiées dans vos designs. Choisissez une langue dans le sélecteur Langue de l’aperçu pour les vérifier.

Si un cadeau n’arrive jamais dans le panier, voir cadeau non ajouté.