Quand un client personnalise l’un de vos produits, il remplit un petit formulaire à côté de l’aperçu en direct. Ce guide explique chaque type de champ que ce formulaire peut afficher, pour que vous sachiez ce que voient vos clients et comment chacun se comporte. Il s’adresse aux marchands qui veulent comprendre le customizer du point de vue de l’acheteur.
Vous décidez des champs qui apparaissent quand vous construisez le produit dans le Design Studio. Le customizer affiche ensuite le bon contrôle pour chacun. Voici ce que fait chaque champ.
Ils se répartissent en trois groupes : les saisies générales (texte, choix, nombres et dates), les sélecteurs (couleur et police) et les champs qui appartiennent à un élément précis de la création.
Texte et zone de texte
Un champ de texte tient sur une seule ligne. Le client y saisit un prénom, une date ou une courte phrase, qui alimente directement le texte correspondant de la création.
Une zone de texte est la version multiligne. Elle s’agrandit à mesure que le client ajoute des lignes, ce qui convient aux messages plus longs, comme une note ou un court poème.
Quand vous définissez une longueur maximale sur un champ de texte, le customizer affiche un compteur de caractères en direct sous le champ. Il se met à jour pendant la saisie, par exemple 12/30, pour que le client sache toujours combien de place il lui reste. Le compteur n’apparaît que s’il existe une limite.
Les champs de texte et de zone de texte peuvent aussi proposer des choix de police et de couleur. Quand vous les autorisez, de petites vignettes de polices et des pastilles de couleur apparaissent directement sous le champ. Le client en choisit une et le texte de la création se met à jour. Ce volet de ces champs est traité dans choisir les couleurs et les polices.
Pour un champ de texte d’une seule ligne, une règle de format configurée peut afficher une erreur « le format n’est pas valide » directement dans le champ. Les zones de texte n’offrent pas cette même vérification de format en direct. Lisez les éventuels messages de validation restants au moment de valider la création.
Choix : liste déroulante, bouton radio, case à cocher
Ces trois types de champ permettent au client de choisir parmi des options que vous définissez, plutôt que de saisir librement.
Une liste déroulante affiche une liste d’options. Jusqu’à dix options, elle reste une liste simple. Au-delà de dix, le customizer la transforme en liste filtrable par la saisie. Le client commence à taper, la liste se réduit aux options correspondantes, et une longue liste reste facile à parcourir.
Les choix radio affichent chaque option sous forme de pastille. Le client en touche une pour la sélectionner. Vous pouvez associer une petite image ou une pastille de couleur à chaque choix, de sorte que la pastille montre un aperçu à côté du libellé. C’est très utile pour un style de cadre ou une couleur de fil, par exemple.
Une case à cocher est un interrupteur oui ou non. Elle active ou désactive un calque de la création, ce qui permet au client d’ajouter ou de retirer une partie du visuel, comme un graphisme au dos d’un t-shirt ou une ligne de texte supplémentaire.
Si une liste d’options est vide, le customizer masque ce champ au client. Le champ reste invisible tant que vous n’avez pas ajouté au moins un choix dans le Design Studio.
Nombre et date
Un champ numérique comporte des boutons moins et plus autour d’une valeur modifiable. Le bouton moins s’arrête au minimum configuré et le bouton plus au maximum ; tous deux suivent le pas configuré. Les clients peuvent aussi saisir une valeur : vérifiez donc les messages de validation du champ avant de continuer.
Un champ date utilise le sélecteur de date de l’appareil. Sur téléphone, c’est la roue de dates native ; sur ordinateur, le contrôle de date du navigateur. Un champ mois du calendrier fonctionne de la même façon mais utilise le sélecteur de mois de l’appareil : le client choisit un mois plutôt qu’une date complète.
Ce que le client choisit alimente le texte correspondant de la création, comme pour un champ de texte.
Sélecteurs de couleur et de police
Un champ couleur est une rangée de pastilles sous un titre Choisissez une couleur. Les pastilles sont les couleurs que vous avez autorisées en construisant le produit : un client ne peut donc pas choisir une couleur que votre procédé d’impression ne sait pas produire. La pastille choisie reçoit une bordure d’accent.
Un champ police ouvre une liste Choisissez une police. Elle commence sur Choisir une police… et, quand la liste est longue, elle comporte une zone Rechercher des polices… qui filtre à mesure que le client tape. Seules les polices que vous avez autorisées apparaissent.
Les deux fonctionnent comme une liste déroulante du point de vue du client : il en choisit une, et la création se met à jour derrière le formulaire.
Champs liés à un élément
Certains champs ne sont pas du tout des saisies générales. Ils appartiennent à un élément précis de la création, et le customizer affiche le contrôle dont cet élément a besoin :
- Un champ photo est une zone de téléversement. Consultez téléverser une photo.
- Un champ graphisme est un sélecteur parmi vos propres visuels. Consultez laisser les clients choisir un graphisme.
- Un champ carte, itinéraire ou voyage propose une recherche de lieu, un téléversement de fichier ou une liste d’étapes.
- Un champ carte du ciel, lune ou calendrier propose une date, et parfois une heure et un lieu.
- Un champ avatar ouvre le créateur de personnages.
Ils suivent les règles que vous définissez sur cet élément plutôt qu’un type de champ générique. Chacun est traité dans les éléments intelligents.
Deux autres viennent du produit plutôt que de la création : un sélecteur de variante pour la version achetée, et un sélecteur d’add-ons pour les suppléments. Consultez les add-ons.
Champs obligatoires et validation
Vous pouvez marquer n’importe quel champ comme obligatoire. Un champ obligatoire affiche un astérisque à côté de son libellé, pour que le client sache qu’il doit le remplir.
Si un champ obligatoire est vide quand le client appuie sur Ajouter au panier, le customizer bloque l’action et nomme le champ à compléter. Le remplir résout cette erreur de champ manquant ; d’autres vérifications de validation ou de disponibilité peuvent encore demander de l’attention.
L’endroit où ce message apparaît dépend de la mise en page que vous avez choisie. Un customizer en une seule page n’a rien à refuser avant Ajouter au panier, et affiche « Veuillez renseigner » suivi du nom du champ. Un customizer étape par étape refuse plus tôt, à la limite de l’étape, et affiche « Veuillez remplir : » suivi du nom du champ ; le produit ne s’ajoute pas au panier montre ce cas.
Les limites de longueur des champs de texte et des zones de texte affichent un compteur en direct. Un champ de texte d’une seule ligne peut aussi afficher une erreur de format dans le champ pendant la saisie. Vérifiez les messages restants au moment de valider la création.
Pourquoi ma liste déroulante n'affiche-t-elle pas de zone de recherche ?
La zone de recherche n'apparaît que si la liste déroulante compte plus de dix options. Jusqu'à dix, elle reste une liste simple.
Où choisir quels champs sont obligatoires ?
Vous définissez les champs obligatoires dans le Design Studio, en construisant le produit, pas dans le customizer.
Un client peut-il dépasser la limite de caractères ?
Non. La longueur maximale que vous définissez empêche de continuer à taper, et le compteur indique à quel point il s'en approche.
Pour configurer ces champs et décider lesquels les clients peuvent modifier, consultez rendre des champs modifiables par les clients.
Pour aller plus loin : comment un client personnalise un produit.