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

Dans un 1er temps on va rajouter un champ texte 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>

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

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

Cet article a 25 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é ?

Laisser un commentaire

Fermer le menu
×
×

Panier