Quand un client personnalise l’un de vos produits, il choisit souvent une couleur et une police. Ce guide explique l’aspect et le comportement de ces contrôles dans votre boutique, pour que vous sachiez ce que voient vos clients. Il s’adresse aux marchands qui configurent des produits personnalisables et veulent comprendre le côté client.
Les contrôles de couleur et de police se trouvent dans le formulaire de personnalisation, à côté de l’aperçu en direct. Pour comprendre comment tout le formulaire s’articule, consultez les champs du formulaire de personnalisation.
Choisir une couleur
Un champ couleur affiche une rangée de pastilles rondes. Le client en touche une pour la sélectionner. La pastille choisie reçoit une coche, ce qui montre clairement quelle couleur est active. Le titre au-dessus des pastilles indique « Choisissez une couleur ».
Vous contrôlez les couleurs proposées. Vous pouvez lister un ensemble fixe de pastilles, de sorte que le client est limité aux couleurs que vous approuvez. Vous pouvez aussi activer un sélecteur de couleur libre, qui permet au client de choisir n’importe quelle couleur avec le sélecteur natif de son appareil. Laissez-le désactivé pour rester dans l’identité de votre marque, ou activez-le pour offrir une liberté totale.
Les champs de texte et les champs de zone de texte peuvent aussi afficher une rangée de couleurs. Quand vous l’autorisez, une rangée de pastilles « Choisissez une couleur » apparaît juste sous le champ de saisie. Un client qui saisit un prénom peut ainsi aussi choisir la couleur de ce texte au même endroit.
Dès qu’un client touche une pastille, l’aperçu en direct se met à jour avec la nouvelle couleur. Il n’y a aucune étape d’application séparée. Pour en savoir plus sur l’aperçu, consultez l’aperçu en direct.
Choisir une police
Un champ police présente ses options sous forme de vignettes, chacune avec un échantillon « Abc », sous le libellé propre au champ. Quand vous associez un choix de police à un champ de texte au lieu de lui donner son propre champ, les vignettes apparaissent sous le titre Choisissez une police, juste sous la zone de texte qu’elles concernent. Les échantillons de polices peuvent mettre un moment à se charger. Vérifiez la police sélectionnée dans l’aperçu du produit une fois le chargement terminé ; une vignette seule ne prouve pas que la police de production est prête.
Quand un champ propose plus de 12 polices, une zone de recherche apparaît au-dessus des vignettes. Son texte indicatif est « Rechercher des polices… ». Le client saisit une partie du nom d’une police pour filtrer la liste. Cela garde les longues listes de polices faciles à parcourir.
Vous décidez de la présentation des polices. Vous pouvez les afficher sous forme de vignettes, ce qui est le réglage par défaut, ou de liste déroulante pour une mise en page plus compacte. Les vignettes conviennent quand vous voulez que le client compare les styles d’un coup d’œil. Une liste déroulante économise de la place quand le formulaire est long.
Touchez une vignette pour choisir la police, puis vérifiez l’aperçu une fois la police chargée. Si la police attendue n’apparaît pas, résolvez le problème de chargement avant de vous fier à cet aperçu.
Pour choisir les polices qu’un champ propose et leur affichage, consultez choisir et charger des polices dans le Design Studio.
Pour aller plus loin : découvrez comment chaque choix apparaît sur l’image du produit dans l’aperçu en direct.