Mettre en page le formulaire du customizer et le prévisualiser

Choisissez Une page ou Étapes, configurez sa structure, réordonnez les champs et essayez le formulaire dans le volet de l'éditeur.

Sur cette page

Ce guide vous montre comment contrôler le customizer que voit le client pour un produit. Vous choisirez la mise en page du formulaire, l’ordre d’apparition de vos champs, et vous prévisualiserez le vrai customizer directement dans le Design Studio. Il s’adresse aux marchands qui ont déjà rendu certains champs modifiables par le client et veulent façonner l’impression que donne le formulaire.

Si vous n’avez encore rendu aucun champ modifiable, commencez par rendre des champs modifiables par les clients. Le formulaire n’affiche que les champs que vous avez ouverts aux clients.

Choisir une mise en page de formulaire

Ouvrez le panneau Customizer depuis la barre de gauche pour définir comment les clients passent d’un champ à l’autre. Sous Mise en page, basculez entre Une page et Étapes. Étapes montre ensuite l’aspect que peuvent prendre les étapes, chacun sous forme de petite image : Indicateur d’étapes, Accordéon ou Onglets, les choix plus fins, comme le style de progression et l’endroit où le prix s’affiche, se trouvant sous Plus. L’aperçu dans le volet de droite suit ce que vous choisissez.

Voici ce que fait chacun :

  • Une page garde les champs dans un seul formulaire.
  • Étapes / Indicateur d’étapes organise les champs en étapes successives.
  • Étapes / Accordéon regroupe les champs dans des sections dépliables.
  • Étapes / Onglets affiche une étape à la fois, avec les étapes sous forme d’onglets au-dessus.

Ouvrir les réglages du formulaire

Dans le Design Studio, cliquez sur Customizer dans la barre de gauche. Les réglages du formulaire s’ouvrent dans le panneau.

Choisir votre mise en page

Sous Mise en page, choisissez Une page ou Étapes, et choisissez la structure si nécessaire. Enregistrez vos modifications et mettez à jour la publication concernée avant de vérifier le parcours du client.

Tableau de bordAncien sélecteur de mise en page avec les contrôles Simple, Assistant et Onglets
Anciens contrôles de mise en page. Le panneau Customizer bascule désormais entre Une page et Étapes, avec l'aspect des étapes sous Étapes.

Réordonner les champs et prévisualiser

Le volet de droite utilise des composants de formulaire partagés avec les réglages actuels de l’éditeur. Il est utile pour vérifier les champs et l’apparence, mais la page publiée côté client doit quand même être vérifiée séparément. Basculez le volet entre Modifier et Aperçu en haut.

Dans Modifier, vous organisez le formulaire. Pointez un champ et une petite poignée et un crayon apparaissent : faites glisser la poignée pour changer l’ordre du champ, et cliquez sur le crayon pour accéder directement aux réglages de ce champ dans l’éditeur. Le panneau Customizer de la barre de gauche liste les mêmes champs, et vous pouvez aussi les réordonner là.

En mode Aperçu, vous agissez comme un client. Vous saisissez dans les champs et regardez le canevas se mettre à jour en direct, pour vérifier que la création réagit comme prévu.

Ouvrir le volet du customizer

Cliquez sur le volet du customizer sur le bord droit du Design Studio. Il s’ouvre avec le sélecteur Modifier / Aperçu en haut.

Tableau de bordAncien volet du formulaire client avec un sélecteur Modifier et Aperçu et les champs du client
Ancienne disposition du volet avec le sélecteur Modifier et Aperçu ; le volet utilise votre modèle, vos couleurs et vos polices enregistrés.

Réordonner les champs dans Modifier

Avec le sélecteur sur Modifier, pointez un champ et faites-le glisser vers le haut ou le bas par sa poignée pour changer sa position. L’ordre que vous définissez ici est l’ordre que voient les clients. Cela réécrit l’ordre des champs pour tout le produit, pas seulement pour cette vue.

Accéder à l'élément d'un champ

Toujours dans Modifier, pointez un champ et cliquez sur son crayon. Composerie sélectionne l’élément de ce champ et ouvre ses propriétés, pour que vous puissiez ajuster le texte, l’image ou les autres réglages qui s’y rattachent.

Passer à Aperçu et saisir du texte

Cliquez sur Aperçu dans le sélecteur. Saisissez dans les champs comme le ferait un client. Le canevas se met à jour en direct pendant la saisie, pour que vous puissiez confirmer que la création réagit correctement avant de publier.

Avec Étapes, la liste des champs montre chaque étape avec ses champs en dessous. Ajouter une étape en ajoute une vide ; une étape sans champ est ignorée pour les clients. Les champs qui ne sont encore dans aucune étape se placent à la fin sous Options, la dernière étape que voient les clients. Faites glisser un champ dans une étape, ou utilisez Déplacer vers sur lui pour le placer à la fin d’une étape.

Si le produit a plusieurs faces, comme un recto et un verso, n’oubliez pas que le formulaire couvre les champs de toutes les faces. Consultez gérer les faces d’un produit pour les configurer.

Questions fréquentes

Réordonner dans le volet change-t-il l'ordre pour les clients ?

Cela change l'ordre des champs de l'éditeur. Enregistrez et mettez à jour la publication concernée, puis vérifiez la vraie page client.

Pourquoi les boutons Ajouter au panier et Partager sont-ils grisés ?

Le volet est un aperçu, pas un vrai panier. Ces boutons restent désactivés pour que vous ne puissiez pas passer de commande test depuis celui-ci.

L'aperçu correspondra-t-il à ce que voient vraiment les clients ?

Il utilise des composants de formulaire partagés et les réglages actuels de l'éditeur. Vérifiez séparément la page publiée pour sa configuration enregistrée, ses fonctionnalités disponibles, sa mise en page selon l'appareil et le comportement du panier.

Puis-je changer de mise en page plus tard ?

Oui. Changez la mise en page dans la vue Formulaire du volet, enregistrez la modification et mettez à jour la publication concernée. Vérifiez le nouveau parcours dans la boutique avant de vous y fier.

Suite

Pour vérifier l’expérience de bout en bout, lisez comment un client personnalise un produit.

Besoin d'un coup de main ?

Si un guide n'a pas répondu à votre question, notre équipe est là pour vous aider. La plupart des messages reçoivent une première réponse sous un jour ouvré.

Contacter le support

Articles associés