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 vous trouvez donc le début du formulaire

4 Insérez le bout de code suivant à l’endroit souhaité entre le <form…> et la fermture de celui ci </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…)

<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 😉

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

Merci et bon courage à vous

Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 2 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 34 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 !

    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. 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 🙂

Laisser un commentaire

Fermer le menu
×
×

Panier

Tu aimes mes Tutos & mes Articles ?

Alors n'hésites pas à m'encourager à continuer ce Blog !


Je donne 1e à Dgeo Dev

Envie de Protéger le contenu de ton site ?

Speedecom te propose l'Application Shopify Speed Defender !
Elle va te permettre de protéger ton site des copieurs et protéger tes contenus, tes médias et même empêcher les raccourcis claviers et l'affichage du code source ;) !

N'hésite pas à la tester elle est Gratuite pendant 3 jours

Tester Speed Defender

Envie de Booster ton taux de conversion ?

Speedecom a créé une nouvelle Application Shopify qui devrait te plaire !
Elle va te permettre de créer des Bundles en direct checkout !
N'hésite pas à la tester elle est Gratuite pendant 7 jours

Tester Speed Bundle

Besoin d'un developpeur ?

Si tu as un besoin particulier sur ta boutique,
n'hésite pas à me contacter et à regarder mes prestations !

Consulter mes prestations