Tuto ajouter un champ sur sa fiche produit Shopify

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

14 commentaires sur “Tuto ajouter un champ sur sa fiche produit Shopify

  1. Julie

    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. Dgeo Dev

      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

    1. Dgeo Dev

      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 😉

    2. Ruddy

      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

  2. Julie

    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

  3. Antoine Libois

    Bonjour,

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

    Merci beaucoup !!

    1. Dgeo Dev

      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

  4. Ruddy

    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. Dgeo Dev

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

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*
*