Nous allons voir dans ce tutoriel comment rajouter des champs sur une fiche produit

Très pratique pour du POD ou des sites avec des produits qui demandent de la personnalisation.

Ce tutoriel va vous économiser l’installation d’une application bien souvent payante.

Passons à l’explication du tutoriel

Dans un 1er temps on va rajouter un champ texte simple comme ceci:

1

Installation

1 Rendez vous dans Online store – Actions – Edit Code

2 Trouvez dans le dossier Sections le fichier product-template.liquid ou si vous n’en avez pas un product.liquid (dossier layout) si vous avez un thème comme turbo il vous faudra trouver l’emplacement de product-form.liquid dans snippeds

3 Une fois sur le bon fichier faite une recherche sur {% form… ou <form vous trouvez donc le début du formulaire

4 Insérez le bout de code suivant à l’endroit souhaité entre le {% form … ou <form…> et la fermeture de celui ci …endform %} ou </form> idéalement après les balises </select>…

<p class="line-item-property__field">
 <label for="monogram">Prénom et nom</label>
 <input required id="monogram" style="width:220px; max-width:100%;" type="text" name="properties[Monogram]">
</p>

Code bien formaté pour le thème Debut 

<div class="selector-wrapper js product-form__item">
   <p class="line-item-property__field" style="display:block;clear:both;width:100%;">
      <label for="prenom-nom" style="color:#3d4246;">Champ personnalisé</label>
      <input required id="prenom-nom" placeholder="Prénom + Nom" style="width:100%; max-width:100%;" type="text" name="properties[prenom-nom]">
   </p>       
</div>

Attention ce code n’est pas contextuel, il sera donc présent sur tous vos produits ! 

Si vous souhaitez le mettre uniquement sur certains produits vous pouvez suivre le tutoriel sur comment personnaliser sa fiche produit sur shopify.

Ce champ est obligatoire c’est à dire que le ajouter au panier ne fonctionnera que si le champ est rempli afin d’éviter l’achat sans critères

Si vous souhaitez le rendre optionnel alors il vous faudra supprimer le required du code

Une fois l’achat effectué vous aurez l’information attendue dans votre order. exemple ci-dessous:

2

Le Monogram est le texte qui vous permettra d’identifier ce nouveau champ

J’en veux plus !

Je vous mets si dessous les différents codes disponibles pour créer des types de champs différents comme une image, des cases à cocher, des blocs de textes, des boutons de choix…

Bloc de texte

<p class="line-item-property__field">
<label for="custom-message">Message</label>
<textarea required id="custom-message" name="properties[Custom message]"></textarea>
</p>

Cases à cochées

<p class="line-item-property__field">
<label>Choisir des options</label>
<input type="checkbox" id="Feature-A" name="properties[Optional features - Feature A]"><label class="ep_inline_block" for="Feature-A">Feature A</label><br>
<input type="checkbox" id="Feature-B" name="properties[Optional features - Feature B]"><label class="ep_inline_block" for="Feature-B">Feature B</label><br>
<input type="checkbox" id="Feature-C" name="properties[Optional features - Feature C]"><label class="ep_inline_block" for="Feature-C">Feature C</label>
</p>

Boutons radios (choix)

<p class="line-item-property__field">
<label>Choisir une options</label><br>
<input required type="radio" name="properties[Choose an option]" value="Option 1"> <span>Option 1</span><br>
<input required type="radio" name="properties[Choose an option]" value="Option 2"> <span>Option 2</span><br>
<input required type="radio" name="properties[Choose an option]" value="Option 3"> <span>Option 3</span><br>
</p>

Sélection (style variante)

<p class="line-item-property__field">
<label class="ep_block">Sélectionner une option</label>
<select required id="choose-an-option" name="properties[Choose an option]">
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
</p>

Fichier (images, pdf etc…)

Attention: Ne fonctionne pas avec les Panier Modal, mini panier, Drawer ! Mais uniquement avec les paniers de type page 😉

<p class="line-item-property__field">
<label for="custom_photo">Photo (JPG or PNG)</label>
<input required id="custom_photo" type="file" name="properties[Photo]">
</p>

Exemple d’un fichier image reçu du client, au clic sur l’image vous la téléchargez 😉 

téléchargement

Attention je vous conseille d’effectuer des tests à 1€ pour bien vérifier le fonctionnement, vous vous rembourserez après 😉

Possible de mettre ces champs sur les produits que l’on souhaite ?

Oui c’est possible en combinant ce tuto shopify avec le tuto sur comment personnaliser sa fiche produit. Vous allez devoir repérer les identifiants de vos produits est faire des conditions d’affichages pour les champs voulus 😉

Bon tuto et n’hésitez pas à faire une petite donation afin que je puise continuer mes tutos en cliquant sur le bouton en haut de la colonne de droite.

Ce tutoriel existe aussi en vidéo

Merci et bon courage à vous.

Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 6 votes]

🤗 Vous souhaitez m'encourager à continuer mes Tutos ?

Cliquez sur le bouton ci-dessous pour me laisser un petit pourboire 😉

Payer un coup à Dgeo Dev

Cet article a 49 commentaires

  1. Bonjour à toi Geoffrey.

    Je suis avec admiration tes tutos depuis maintenant un peu plus d’une semaine je voulais t’en remercier.

    J’aimerais crée une ligne de séparation sur mes fiches produit j’ai pas mal cherche mais j’ai rien trouver pour cela.

    Pourrais tu m’aider ?

    1. Bonjour Julie, merci pour le gentil message 🙂

      Pour faire une ligne de séparation il te suffit de mettre le code html suivant aux endroits souhaités: < hr > (enlever les espaces entre les accolades)

      Bonne journée

  2. Bonjour Geoffrey,

    Comment faire pour afficher ce champ sur une URL précis ?
    Que ça ne le fasse pas sur tout le site ?

    Merci d’avance,
    Cdt,

    1. Salut, ca devient contextuel donc pas possible sans un développement spécifique et figé, sinon certaines apps ont le pouvoir de contextualisation que les thèmes n’ont pas 😉

      1. de mon côté j’ai ajouté

        {% if collection == plaque %}
        ..

        ..
        {% endif %}

        ça me permet de faire apparaître le code que je veux pour tous les articles de la collection plaque. Ca marche aussi avec product.id == toto par exemple.

        J’ai bidouillé ça en me baladant sur le site, merci !!

        reste à voir si c’est robuste.

        1. Hello, bravo c’est une bonne méthode 😉

        2. Oui effectivement, ça fonctionne pour moi de cette façon. Merci à tous les deux, dex et Dgeo Dev. Vous êtes géniaux ! Le seul tuto qui a réussi là où tous les autres ont échoués. Merci !

        3. Bonjour DEX, tu as mis {% if collection == ****** %} au début du code de DGEO et {% endif %} à la fin c’est bien ça ?
          Merci pour ta réponse. Nicolas.

        4. Bonjour à tous,

          cela fait plusieurs jours que je cherche comment assigner des champs à seulement certaines fiches produits.
          {% if collection == ****** %} ne fonctionne pas pour moi, mais {% if collection.id == ****** %}.

          Mon organisation de site est :

          -collection
          – sous-collection 1
          – sous-collection 2

          Je souhaite que mes champs s’affichent pour tous les produits de collection.

          Je ne sais pas pourquoi, mais le code ne fonctionne que si je mets les plus bas niveaux de collection ! Soit sous-collection1, soit sous-collection2, donc soit {% if collection.id == sous-collection1 %}, soit {% if collection.id == sous-collection2 %}. Si je mets {% if collection.id == collection %}, les champs ne s’affichent pas.

          J’ai également essayé {% if collection.id == sous-collection1 or sous-collection2 %}, cela ne fonctionne pas.
          J’ai également essayé avec {% if product.id == xxxxxxxxxxxxxx or xxxxxxxxxxxxxx or xxxxxxxxxxx %} pour lister tous les produits pour lesquels les champs doivent s’afficher, mais cela ne fonctionne pas…

          Pouvez-vous m’aider s’il vous plaît ?

          1. Hello, merci pour le message. alors c’est tout à fait normal car shopify ne gère pas les sous arborescences de collections, elles sont donc toutes au même niveau… mettre des sous collections comme vous faite reste du placement éditorial mais ne fait pas de la hiérarchisation d’appartenance. En gros lorsque l’on clic sur une url, il prendra la collection de l’url donc uniquement une seule collection sera associée à ce moment la. J’espère que c’est plus clair pour vous. Il est possible de le faire mais ca demande un développement shopify plus complexe et sur mesure 🙂 bonne journée.

          2. Bonjour et merci beaucoup pour votre réponse 🙂 !
            Je vais essayer de trouver une autre solution alors. Peut-être existe-t-il un plugin.
            Faut-il faire ce développement dans product.liquid ou ailleurs ?

          3. Merci beaucoup !

    2. Salut et si on met le code sur une page qui n’est pas une page produit, va t on avoir les champs image, des cases à cocher, des blocs de textes, des boutons de choix dans cette page ??
      merci

      1. Hello, non ca ne fonctionne que sur les fiches produits ou un form est présent.

  3. Bonjour

    Merci pour vos articles et tuto!
    Il n’est pas possible d’inclure des boutons radios ou de choix sur quelques fiches produits uniquement ?
    MERCI d’avance
    Julie

    1. Bonjour, non car le fichier est générique

  4. Hello,
    Comment on peut l’ajouter dans la notification de la commande envoyée au client ?

    1. Il faut aller dans settings – notifications – new order et rajouter le code d’affichage pour le champ personnalisé

  5. Bonjour,

    J’aimerai que cette fonctionnalité ne soit que sur certains de mes produits ( en contractualisant) . Comment faire ? Avec une apps?

    Merci beaucoup !!

    1. Hello, étant donné que les codes se mettent dans le fichier c’est générique pour une contextualisation il faut se tourner vers une app shopify. rechercher: custom field

  6. Salut,
    juste une question pour un neophite:
    y a t il moyen d’ implementer les codes dans un nouveau template que l’on appellerais « personnalisation »,une page ou l’on pourrais recueillir un fichier client, bon en bref j’ai essayé de bidouiller , jai donc creé un nouveau template sous forme de page dans le liquid :

    {% include ‘breadcrumb’ %}

    {{ page.title }}

    {{ page.content }}

    {% form ‘personalisation’ %}

    Photo (JPG or PNG)

    {% endform %}

    Bon ca n’a rien donné car quand j’ai ouvert la page ca a donné ça :

    PERSONNALISATION
    Liquid error: Invalid form type « personalisation », must be one of [[« activate_customer_password », :ActivateCustomerPasswordStrategy], [« contact », :GuestContactStrategy], [« create_customer », :CreateCustomerStrategy], [« currency », :CurrencyStrategy], [« customer », :CustomerContactStrategy], [« customer_address », :CustomerAddressStrategy], [« customer_login », :CustomerLoginStrategy], [« guest_login », :GuestLoginStrategy], [« new_comment », :NewCommentStrategy], [« recover_customer_password », :RecoverCustomerPasswordStrategy], [« reset_customer_password », :ResetCustomerPasswordStrategy], [« storefront_password », :StorefrontPasswordStrategy]]

    T’aurais pas la bonne formule ??? ???

    1. Bonjour,

      Il faut créer une page.personnalisation ca va créer un template lorsque tu vas créer une page, tu le sélectionnes et ensuite dans le fichier page.personnalisation.liquid mettre ton code mais dans le form qui ne sert à rien, mets juste le fichier (un lien href).

  7. hello

    Je viens de découvrir ton site tout d’abord merci beaucoup, c’est extrêmement utile et super bien expliqué !!

    Serais-tu comment on peut faire pour ajouter les étoiles (des rate and review) en haut de la fiche produit juste en dessous du titre de l’article. J’ai déjà une app Revyu qui me mets les avis clients en bas avec le nombre d’étoiles de mon article, mais j’aimerais également que le nombre d’étoiles de l’article apparaisse sous le titre du produit ?

    j’espère avoir été claire ^^

    merci encore pour ton travail !

    1. Bonsoir, merci 🙂 selon l’app utilisée il y a un code spécifique à mettre bien souvent c’est disponible dans les settings. Le plus facile et de demander à leur support de l’implanter.

  8. Super tuto ! Comme beaucoup de monde je cherche à ne proposer la personnalisation que sur quelques articles seulement. J’ai bien compris que c’est un peu plus spécifique, si jamais tu fais un tuto pour ça je suis preneur 🙂

  9. Bonjour 🙂

    Lorsque j’ajoute le code suivant sous , il ne m’est plus possible d’ajouter mon article au panier, une idée ? 🙂

    Logo central

    1. Hello, oula surement un conflit de code, je conseille donc de ne pas faire ce tuto pour éviter de perturber le bon fonctionnement du thème

  10. Bonjour,

    J’ai réussi à mettre le bout de code concernant le champs personnaliser, c’est pour vendre des goodies avec des prénoms mais par contre quand je reçois la commande en étant vendeur je ne vois nulle part le prénom.

    Merci

    1. Bonjour, c’est étrange en effet. Quel est le thème utilisé ?

      1. Bonjour ! J’ai le même problème et j’utilise le thème Fastlane… une idéee d’où viendrais le problème ou pas du tout ? :/

        1. Bonjour, aucune idée, le mieux est de demander directement au support du thème Fastlane 🙂

  11. Bonjour,

    J’utilise le thème SpeedFly https://www.speedfly-theme.eu et je ne vois pas sur le back office de mon site lorsque je reçois la commande, je ne vois pas les informations qui sont complétés dans le champs.

    Merci.

    1. Hello, étonnant il faut afficher le order et c’est indiqué dans de nouveaux champs en principe

  12. Bonjour,

    J’ai le même problème, ca s’affiche pas dans mes order avec theme prestige qui eux me disent ne savoir rien faire.

    Une astuce?

    1. Hello, aucune idée navré 🙁

  13. Très utile comme tuto, merci beaucoup !

  14. Bonjour, merci beaucoup pour vos tutos, ils sont très utiles. Cependant lorsque je met le code pour le texte j’ai bien l’apercu dans le panier, mais pas pour celui d’une image, en effet quand je l’ajoute aux panier rien est inscrit pourtant j’ai télécharger la photo.
    Merci bcp

    1. Hello, tout dépend du thème je pense. Sur Speedfly cela fonctionne par exemple 🙂

    2. Assurez-vous également que vous avez une type de panier Page et non un mini-panier, un popup panier (modal) ou un panier Drawer 😉

  15. Bonjour,
    Je ne m’y connais pas du tout en codage et je ne comprends pas un point: où doit-on mettre les codes? Vous dites que c’est entre le et la fermeture de celui ci , idéalement après les balises , mais je ne vois pas de balises , j’utilise le thème Debut.
    Merci

    1. Bonjour, sur le thème début il faut trouver le {% form … 🙂

  16. Bonjour, merci beaucoup pour votre article je recherchais ça depuis un moment !
    J’aimerai seulement savoir comment adapter les codes au thème « Debut » comme vous avez fait pour le nom + prénom ? J’aurai besoin d’utiliser les fichiers et la sélection (style variante), cependant j’ai essayé de les reproduire de manière similaire au nom + prénom mais je me suis retrouvée avec des choses tout en bas, bref un raté.
    Merci d’avance ! 🙂

  17. Bonjour, super tuto !!
    J’ai plusieurs variantes sur mes produits et le champ « prénom » va venir s’afficher sur chaque variante
    Y’a t’il un moyen pour qu’il ne s’affiche qu’une seule fois par produit ?

  18. j’ai pa trouve le data sur order (((

    1. Bonjour, il faudrait vérifier que le code est bien collé et ajouté. Attention aussi si c’est une image…. parfois cela ne fonctionne pas selon les thèmes.

Laisser un commentaire

Fermer le menu

formation seo gratuite shopify

Une formation Gratuite SEO sur Shopify ça te tente ?

Alors abonne-toi à la chaine et active la cloche pour ne pas louper l'arrivée des prochains modules !

Commencer la formation