Élément de champ personnalisé du produit

Qu'est-ce que l'élément de champ personnalisé du produit ?

L' Élément de champ personnalisé du produit est un outil flexible qui vous permet de recueillir des informations supplémentaires auprès des clients lors de l'achat d'un produit. Selon vos besoins, vous pouvez afficher différents types de champs, tels que des zones de texte, des cases à cocher, des listes déroulantes ou des boutons radio, pour recueillir des informations spécifiques.

Voici quelques exemples:

• Collecter des notes personnalisées ou graver du texte.
• Demander aux clients des instructions de livraison.
• Offrant des choix de personnalisation (couleur, taille, emballage).
• Capture d'informations qui ne sont pas couvertes par les options de produit par défaut de Shopify.

Toutes les données collectées via les champs personnalisés du produit seront jointes à la commande et affichées dans votre Administration Shopify > Commandes une fois la commande confirmée.

Comment ajouter un champ personnalisé de produit

Remarque : Depuis l' Champ personnalisé de produit est un élément enfant du Module produit, il doit toujours être placé à l'intérieur d'un module Produit pour fonctionner correctement.

Suivez les étapes de synthèse:

Étape 1: Dans le Tableau de bord GemPages, sélectionnez votre page sur laquelle travailler et entrez dans l'éditeur.

Étape 2: Si vous n'avez pas de Module produit, faites-en glisser un sur votre page.

Étape 3: Faites glisser et déposez l'élément de champ personnalisé à l'intérieur du module Produit, à l'emplacement de votre choix.

Une fois ajouté, cliquez sur l'élément pour ouvrir son Panneau des paramètres Dans la barre latérale gauche. Ce panneau contient deux onglets : Paramètres Avancé:

Configurer l'onglet Paramètres

1. Type

Choisissez le style de saisie. Vous pouvez choisir parmi :

• Texte:Saisie sur une seule ligne pour les notes courtes.
• Zone de texte:Boîte multiligne pour les commentaires plus longs.
• Email: Champ de saisie formaté pour les adresses e-mail.
• Case à cocher:Permet aux clients de sélectionner plusieurs choix.
• Bouton radio:Les clients ne peuvent sélectionner qu'une seule option dans un groupe.
• Déroulante:Une boîte de sélection compacte pour les options à choix unique.
• caché:Invisible pour les clients mais envoie toujours une valeur prédéfinie avec la commande.

2. Source du produit

Affiche le produit auquel appartient le champ personnalisé. Pour le modifier, ouvrez l'onglet Sélecteur de produits dans le module Produit.

3. Gestion des options

Disponible Case à cocher, radio et liste déroulante types. Ici, vous pouvez :

• Ajouter ou supprimer des options.
• Modifier les étiquettes des options.
• Réorganisez les choix pour contrôler la séquence d'affichage.

4. Taille

(Non disponible pour le type Caché)

• Largeur: Par défaut, les champs occupent 100 % du conteneur. Vous pouvez passer à Ajuster le contenu (auto) si vous préférez.
• La taille: La valeur par défaut est « automatique ». Ajustez la taille du champ de saisie si vous souhaitez qu'il soit plus grand.
• Espace entre les icônes et le texte : Contrôle l'espacement entre l'icône et le texte dans les dispositions Case à cocher ou Radio.

5. Contexte

(Non disponible pour le type Caché)
Définissez une couleur ou un motif d’arrière-plan pour votre champ de saisie.

6. Forme

(Non disponible pour le type Caché)
Ces paramètres contrôlent la forme générale et le style du champ de saisie :

• Frontière: Ajustez l'épaisseur de la bordure, le style (plein, pointillé, pointillé) et la couleur.
• Coin: Définissez le rayon de la bordure.
• Ombre: Appliquez des ombres portées pour ajouter de la profondeur et faire ressortir le champ.

7. Style de texte d'entrée

Disponible Texte, zone de texte et e-mail types. Les options incluent :

• Espace réservé: Texte par défaut affiché avant la saisie.
• De la police: Choisissez parmi les polices disponibles ou appliquez une police personnalisée.
• Taille, couleur et poids : Ajustez la typographie pour plus de lisibilité et d'image de marque.
• Hauteur de ligne et espacement des lettres : Ajustez l'espacement du texte.
• Transformation de texte : Convertissez le texte en majuscules, minuscules ou en majuscules.

Pour les champs Case à cocher, Radio et Liste déroulante, cette section personnalise les étiquettes des options.

8. Étiquette

(Non disponible pour le type Caché)
Affichez ou masquez le libellé du champ. Vous pouvez personnaliser :

• Texte du contenu.
• Police, taille, couleur, poids.
• Espacement et transformation du texte.

9. Effet de survol

Contrôler l'apparence du champ lorsqu'il est survolé :

• Couleur de l'arrière plan.
• Couleur du texte.
• Style de bordure.
• Rayon d'angle.
• Ombres.

10. Effet de mise au point

Personnaliser le style lorsqu'un champ est actif ou sélectionné :

• Contexte.
• Couleur du texte.
• Frontière.
• Rayon d'angle.
• Ombre.

11. Configuration

• Nom du champ : attribuez un identifiant pour la référence du backend.
• Requis:Activez ce commutateur pour empêcher les utilisateurs de contourner ces informations.
• Nombre seulement:Activez ce choix pour autoriser exclusivement les saisies de nombres.
• Caractère(s) min/max:Utilisez le curseur pour ajuster le nombre minimum et maximum de caractères autorisés comme vous le souhaitez.

12. Message d'erreur

Saisissez un message d'erreur personnalisé pour une entrée non valide ou des champs obligatoires manquants.

13. Aligner

Alignez le champ à gauche, au centre ou à droite dans le conteneur.

Configurer l'onglet Avancé

Pour une personnalisation plus avancée, veuillez accéder au Onglet Avancé et suivez les instructions dans cet article.