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.

Attention: Sur certains thèmes ou installation ces codes ne fonctionnent pas ! testez donc avant et si cela ne fonctionne pas pour vous tournez vous vers une app de custom field option sur le store shopify 😉

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 15 votes]

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Cet article a 112 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.

  19. Bonjour ! Merci beaucoup pour tes tutos !
    J’aurais une petite question, Aurais-tu une idée de comment intégrer notre image et le texte personnalisé dans notre fichier CSV lors de l’export de notre commande ?
    Merci d’avance pour ta réponse !
    Bonne journée

    1. Hello, bonne question mais je ne sais pas trop pour le coup. Etant donné que des une information de commande en l’exportant shopify devrait afficher cette information dans le CSV. Si ce n’est pas le cas alors c’est mort…

  20. Bonjour,
    Tout d´abord merci, tes tutos sont supers clairs et m´aident beaucoup.
    Aujourd`hui, je n´ai pas trouvé la solution à mon probleme, puis je ajouter une variante à ma fiche produit avec une variation de prix selon la selection ou non de cette variante?. La selection de l´accessoire en question aura un coup supplemetaire sur l´achat final.
    Aurais tu deja fait un tuto sur ce sujet?

    1. Bonjour, il faut se pencher sur des applications pour faire ce genre de chose. essayez de taper infinite options shopify sur google ça devrait faire le job 😉

  21. Bonjour Dgeo,
    Merci pour tous ces conseils !
    Je souhaiterais afficher « nouveau » sur les nouveaux produits de ma boutique, un peu comme « solde » ou « rupture », mais je n’y arrive pas 🙁 Pourriez-vous m’aider svp?

    1. Hello et merci pour le message 🙂 c’est un tuto qui est en prévision 😉

  22. Bonjour merci pour tes vidéos !
    J’ai juste un petit soucis, j’ai un seul produit sur mon site et je le mets en page d’accueil, les modifications que j’apporte s’affichent sur le page produit mais pas sur la page d’accueil. Il y’a une solution stp ?

    1. Hello et merci, oui en le mettant dans le bon fichier, généralement sections – featured-product.liquid

  23. Bonjour 🙂

    Merci pour l’astuce !
    J’ai bien réussi à créer le bouton « personnaliser » sur ma page produit mais j’aimerais ajouter un supplément de prix si le client choisi de personnaliser le produit. Savez-vous comment je peux faire celà ?

    Merci par avance !

    1. Hello, ce n’est malheureusement pas possible navré. Il faudrait créer une variante prix supplémentaire car ce type de champs personnalisés ne permet de modifier le prix d’un produit.

  24. Bonjour,

    J’ai utiliser cette astuce pour rajouter un champ dans ma page contact. Mais je ne trouve pas comment rajouter le texte en gris qui s’efface automatiquement lorsqu’une personne écrit un message.
    Merci pour votre réponse.

      1. Super, j’ai réussi à faire ce que je voulais. Merci, bonne journée.

        1. Super, bravo 🙂

    1. Hello et merci pour le message 🙂 le champ n’est pas collé au bon endroit il doit être dans le formulaire donc trouver une balise fom et le mettre après 😉

  25. Merci beaucoup 🙂 Je crois que j’ai réussi. Verdict à la prochaine commande 😉

  26. Bonjour et bravo pour vos tutos qui m’ont bien servi, j’ai vu que vous avez mis les codes pour des options à cocher,
    peut on les mettre dans la fiche panier et que ces options soient payantes une fois cochées

    merci à vous et j’attend avec impatience vos nouvelles videos

    1. Hello et merci pour le message 🙂 non malheureusement ce n’est pas possible

  27. Bonjour! Merci pour ce tuto c’est pile ce que je cherchais, j’ai pu ajouter un champs pour que mes clients laissent leur nom afin de personnaliser leur produit. Sur mon produit la personnalisation une option, y-a-t’il un moyen de rendre ce champs « grisé » ou « bloqué » tant que mes clients n’ont pas préalablement sélectionné la « variante personnalisée » ? Car pour le moment le champs est disponible pour toutes les variantes de mon produit, personnalisées ou non. Merci d’avance!

    1. Hello, hum la c’est assez complexe et nécessiterai un développement sur mesure ou une application.

  28. Bonjour,
    Merci pour ce super tuto!
    Comment mettre la partie « choisir un fichier » et « aucun fichier choisi en anglais »

    Merci d’avance

    1. Hello, c’est non modifiable c’est la langue du navigateur qui le gère 😉

  29. Bonjour,
    merci pour le tuto, top et j’ai réussi à faire ce que je souhaitais !
    deux petits soucis toutefois :
    1/ on peut ajouter au panier sans renseigner le champs, je n’ai pas supprimé le required du code
    2/ lorsque j’exporte le csv des commandes, je ne retrouve pas cette info et je n’ai pas trouver comment paramétrer l’export

    une idée pour ces deux points ?
    Merci beaucoup
    PL

    1. Hello,
      1. le champ est surement au mauvais endroit il faut le mettre entre la balise form
      2. la c’est normal shopify ne le comprend pas il faudra surement mettre une application d’export plus évoluée

  30. Bonjour, j’ai un champs personnalisé mais un trait s’affiche alors que j’aimerais un encadré, savez-vous ce que je dois ajouter dans mon code ? merci beaucoup

    1. Hello, il faut voir avec le support de votre thème 😉

  31. Bonjour, déjà un grand merci pour les tutos que vous faites ! Ils sont très bien expliqués.
    Je suis avec le thème Début et j’ai une question par rapport à un seul produit que je souhaite vendre avec 2 options :
    -« non-personnalisé » (prix de base sans gravure);
    -« personnalisé » (pour graver un message dessus que le client choisi, à 1€ de plus);
    Comment puis-je rajouter un champ texte (jusqu’à 6 mots) pour mon option 2 s’il vous plait ?

    Pourriez vous m’aider s’il vous plait ?

    Un grand merci !

    1. Bonjour et merci pour le message 🙂 c’est assez complexe et je pense qu’il faut vous tourner vers une application car un thème n’aura pas la possibilité de le faire

  32. Bonsoir et merci pour ce tuto très clair qui m’a bien aidée!! (je debute!)
    Est ce possible de rendre le remplissage de champs personnalisé obligatoire? Et comment faire? (dans mon cas ce sont des boutons radio)
    merci beaucoup

    1. Hello 🙂 il suffit dans le input un required comme sur les autres modèles

  33. Hello, merci pour ce tuto, jai effectuer un achat pour tester , mais l’image que jai ajouter apparait pas dans la base de donné, comment faire pour qu ellles y soit svp ?

    1. Hello, navré il semblerait que shopify n’autorise plus ce fonctionnement. Il faudra passer par une application de custom field 🙂

  34. Bonjour, tout cela fonctionne t’il toujours ? car j’effectue la même opération et je n’arrive pas à obtenir mon champs personnalisé. Ou peut-être que je m’y prend mal :). Merci pour pour tout ces tutos au passage 🙂

    1. Hello, malheureusement non ce tuto ne fonctionne plus suite aux mises à jour de Shopify

  35. Bonjour !
    Avant toute chose : MERCI \o/ : supers tutos, et en plus tu réponds aux commentaires… TOP !

    J’ai implémenté ton code dans mon product-template (thème Simple) avec des conditions selon les types de produits (d’une pierre 2 coups d’ailleurs, ça m’a permis de contourner mon problème de gestion de stock des produits que je reconditionne différemment selon les demandes clients (mouture pour les cafés en grains : https://www.confiseriedesarcades.fr/search?q=caf%C3%A9s+en+grains).

    Mais j’ai un soucis avec le « retour » des champs perosnnalisés sur une autre fiche produit : https://www.confiseriedesarcades.fr/products/ballotin-personnalise-excellence
    Le récap dans le panier n’est pas très clair :
    250g (environ 25 chocolats)
    contient choc noir: on
    contient choc lait: on
    alcool: avec
    praliné: on
    pâte d’amande: on
    Custom message: test message
    Paquet cadeau: séparément

    Y a-t-il moyen de modifier ça ?

    1. Hello et merci pour le message 🙂 c’est shopify qui gère les champs de sortie et le on veut dire que la sélection est activée. On ne peut rien y faire malheureusement à moins de leur demander conseil

      1. Ah ok, merci ! Je vais voir avec eux.
        Question subsidiaire : tu saurais comment faire apparaître les options (celles qui apparaissent dans mon panier, présentées dans mon commentaire) sur le mail de notification de commande par hasard ? et sur celui destiné à mon client tant qu’à y être ? stp 😉

        1. Hello, c’est assez délicat… cela demande un développement sur mesure 🙂

  36. Bonjour, j’ai voulu mettre plusieurs menus déroulants pour un produit spécifique, et tout est bien affiché. Merci pour ça.
    Mais les options ne sont pas obligatoire, et quand on en sélectionne elles n’apparaissent pas dans le récap du panier, je ne sais pas quoi faire…

    Voici le code :

    Parfum 1

    Cliquez ici pour choisir un parfum
    Option 2
    Option 3
    Option 4
    Option 5
    Option 6
    Option 7
    Option 8
    Option 9
    Option 10
    Option 11
    Option 12
    Option 13

    Merci pour ton aide !

    1. Bonjour, vous pouvez essayer de mettre ce code dans sections – cart-template.liquid


      {% assign property_size = item.properties | size %}
      {% if property_size > 0 %}
      {% for p in item.properties %}
      {% assign first_character_in_key = p.first | truncate: 1, '' %}
      {% unless p.last == blank or first_character_in_key == '_' %}
      {{ p.first }}:
      {% if p.last contains '/uploads/' %}
      <a class="lightbox data-meta" data-title="{{ item.product.title }}" data-meta="{{ p.last }}" href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
      {% else %}
      {{ p.last }}
      {% endif %}

      <br>
      {% endunless %}
      {% endfor %}
      {% endif %}
      </div>

      Si cela ne fonctionne pas faudra demander au support de votre thème de vous aider ou passer par une app 🙂

  37. bonjour
    jai voulu ajouter pour un produit seulement que les client ajoute une photo jai suivi tes 2 tuto et cela fonctionne mais la photo ne ce rend pas dans le panier quelque chose manque ?

    1. Bonjour, oui suite à la dernière mise à jour de shopify ce tuto ne fonctionne plus, il faudra passe par une application

  38. Bonsoir ! Merci beaucoup pour le super tuto. J’ai enfin reussi avec ton aide !

    J’ai bien revérifié l’endroit ou j’ai mit le code mais malheureusement la case à remplir n’est toujours pas obliagtoire et je n’ai pas enlever le required dans le code. Au secours !

    Merci !

    1. Hello, essaie de déplacer la portion du code un peu plus haut ou plus bas en restant à l’intérieur de la balise <form>....</form> sinon faudrait voir du côté du thème, y a peut être un conflit avec

  39. Bonjour, merci beaucoup pour ce tutoriel, cela fonctionne très bien par collection.
    Par contre lorsque l’on passe par la recherche et que l’on clique sur la fiche produit via les résultats de la recherche, le champ de personnalisation n’apparaît plus sur la fiche :/
    Ya t’il moyen d’ajouter un code pour remédier à cela ?
    Merci d’avance !

  40. Bonjour, merci beaucoup pour ce tuto.

    Je cherche à mettre ma description en dessous des photos afin que le rendu soit plus jolie !
    Sauf que lorsque j’ajoute mes lignes de code dans cette ligne :

    {{ product.description }}

    La possibilité de personnaliser existe encore mais celle-ci ne s’ajoute pas au panier.
    Ou alors que je fais attention de coller le complet cela s’ajoute au panier mais la configuration de la page ne change pas et reste à droite des photos.

    Cela fait pas mal de temps que je cherche mais en vain.
    Est-il possible de trouver une solution ?

    Merci !

    1. Ou alors que je fais attention de coller la balise …. complet cela s’ajoute au panier mais la configuration de la page ne change pas et reste à droite des photos.

      1. Bonjour, je pense qu’a ce stade il faudrait demander directement à un développeur de vous faire cela.

  41. Bonjour, merci pour votre travail et votre réactivité face aux commentaires.
    J’ai une question qui est peut-être bête. Elle concerne le dépôt de photo. En effet, lorsque je dépose une photo, dans le panier + le payement, il est écrit le chemin qui mène vers cette photo (donc depuis le PC de celui qui pose la photo), je crois que ca fonctionne comme ca.
    Cependant, en tant que vendeur, je veux logiquement télécharger cette photo afin de pouvoir l’appliquer à un vêtement par exemple. Je ne sais pas si cela est possible avec vos codes présents sur cette page. Merci d’avance.

    1. Bonjour, oui je vois, c’est un peu délicat, j’essaierai de voir cela dés que j’ai un peu plus de temps 🙂 bonne journée

  42. wow merveilleux tuto merciiii 🙂

  43. Bonjour, merci beaucoup pour ce tutoriel,

    Je voulais savoir s’il était possible d’ajouter un champ à cocher.

    Exemple c’est un site de gravure, j’ai deux champs

    – gravure recto offerte

    – gravure verso (facturé 4€ qui s’ajoute au montant final)

    Donc, je souhaiterais savoir s’il est possible de généré ça ?

    Merci d’avance pour ta réponse 😉

    1. Bonjour, malheureusement pour rajouter des montants ce tuto ne suffira pas, il vous faut une application

  44. Bonjours ,
    J aimerais savoir comment rendre le champ des notes de la page panier obligatoire avant le paiement ? 🙂 Merci d avance

  45. Bonjour Geoffrey,

    Merci pour tous les tutos, toujours au top !

    J’ai suivi celui ci sur l’ajout d’un onglet personnalisation.

    Mais comment limiter à seulement 4 caractères et uniquement des lettres ou chiffres ?

    Pour mieux comprendre ma demande, nous proposons de la maroquinerie personnalisable avec les initiales du client, mais nous sommes limités à 4 lettres de l’alphabet en majuscules de A à Z et de 1 à 10 pour les chiffres.

    1. Bonjour et merci pour le commentaire. A vrai dire c’est assez chaud à coder… il faudrait faire un contrôle des caractères (Regex) en Javascript et interdire l’achat si les caractères souhaités ne sont pas présent. Cela demande dans tous les cas un développement spécifique ou une application plus poussée 🙂

  46. Bonjour,

    je suis avec le thème début.
    Le tout fonctionne très bien, par contre …
    Je viens de remarquer que lorsque j’ai deux variantes (tailles + couleurs) les champs personnalisés se répète deux fois.
    Une fois pour chaque variante.
    Vous savez comment je pourrais régler ça ?

    Merci

    1. Hello, il faudrait voir pour déplacer le code un peu plus bas car il doit être placé trop proche des selects (variantes)

  47. Merci de votre réponse, je vais essayer et vous reviens 🙂

  48. Merci ça fonctionne super bien, j’ai descendu le code comme vous avez mentionné ! Tout est super !

  49. Bonjour, tout d’abord merci pour vos tutoriels, je n’ai jamais fait de code et tout est vraiment très clair et fonctionne très bien sauf un détail.
    J’ai ajouter la ligne de code pour dans mon cas avoir une case « marque et modèle » mais bizarrement je peux valider mon panier sans même avoir besoin de la remplir.
    Je n’ai pas enlevé le « required »

    (Petite question bête sans doute, sur mon interface pour modifier le code chez vous exemple: votre <input le input est rouge chez moi non c'est pareil dans toute mon écriture, les début de phrases n'ont pas de couleur, la suite oui)

    Merci pour votre aide et à bientôt
    Marie

  50. Salut à tous j’ai un petit souci concernant ma boutique shopify J’ai un champ texte personnalisé pour que le client puisse customisés son produit le problème c’est que lorsqu’il passe commande je n’ai aucune trace du mot qu’il a écrit

Laisser un commentaire

Fermer le menu

Envie d'apprendre à Coder et Maitriser ton Thème Shopify  ?

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

S'abonner à la chaine