Aujourd’hui, suite de la personnalisation de Shopify via l’édition de son code, dans ce premier focus consacré à la communication avec vos clients.

Je vais vous y parler du formulaire de contact et de commande.

Il est en effet intéressant de pouvoir personnaliser la façon dont vous échangez avec eux, qu’il s’agisse de recevoir certains types d’informations dans les messages de contact classiques ou d’enrichir vos formulaires avec des éléments de feed-back particulier.

 

1/ Ajouter un formulaire de contact dans votre boutique

 

La plupart des thèmes ont désormais un formulaire de contact préintégré dans les fonctions du « Theme editor », mais si votre thème est plus ancien et que cette possibilité ne vous est pas offerte, il est possible de contourner le problème en codant votre formulaire directement.

Pour obtenir ce résultat, vous allez devoir suivre les 6 étapes détaillées ci-dessous.

 

  • 1- Créez une page de contact

Vous pouvez créer dans votre boutique une page qui va afficher votre formulaire et que vos clients utiliseront pour vous envoyer des messages.

Vous pouvez aussi profiter de cette page pour y inclure toutes vos informations de contact et indiquer à vos visiteurs par quels moyens complémentaires ils peuvent vous joindre (email, téléphone, messages privés ou groupe de discussion sur Facebook, etc.)

Pour la création de cette page, je vous renvoie vers le tuto de cette série qui explique les manipulations dans le détail.

Dans ce cas précis, notez simplement que vous n’êtes pas obligé de saisir du contenu dans la zone de texte, même si vous conseille de mettre un petit mot sympa, comme « Posez-nous vos questions ! » ou « Donnez-nous de vos nouvelles ! », selon le ton général de votre boutique.

 

  • 2- Vérifiez si votre thème comporte un template pour le formulaire de contact

De nombreux thèmes possèdent par défaut un template « page.contact.liquid » (à vérifier dans la section « Templates » de la page HTML/CSS de votre thème actif).

Ce modèle permet à n’importe quelle page d’une boutique Shopify d’afficher un formulaire de contact.

Si vous êtes dans ce cas, c’est parfait, vous pouvez sauter l’étape suivante.

Sinon, vous allez d’abord suivre l’étape 3 pour en créer un.

 

  • 3- Créez un template pour le formulaire de contact

Pour mettre en place votre template, si votre thème n’en inclut pas, suivez ces étapes :

    • Rendez-vous sur votre page HTML/CSS, dans votre thème actif.
    • Ouvrez la catégorie « Templates » et cliquez sur « Add a new template ».
    • Dans la boîte de dialogue, choisissez « page » dans le menu déroulant et nommez votre template « contact » (sans les guillemets), comme sur l’image qui suit.
    • Cliquez sur « Create template ». Ceci créera une copie de votre fichier « page.liquid », sous le nom « page.contact.liquid ».
    • Ce nouveau template s’ouvre automatiquement dans l’éditeur de code.
    • Dedans, trouvez le code suivant :

{{ page.content }}

    • Sur une nouvelle ligne juste en dessous, collez le code suivant :

{% form ‘contact’ %}

 

  {% if form.posted_successfully? %}

    <div class= »successForm feedback »>

      {{ ‘contact.form.post_success’ | t }}

    </div>

  {% endif %}

 

  {% if form.errors %}

  <div class= »errorForm feed-back »>

    <!– {{ form.errors.size }} or {{ form.errors | size }} –>

   

Your contact form

has {{ form.errors | size | pluralize: « an error », « a few errors » }}. To submit your form, make the following changes and try again:

 

    {% for field in form.errors %}

      <p>The {{ field | capitalize | replace: ‘Body’, ‘Message’ }} field {{ form.errors.messages[field] }}.

 

    {% endfor %}

  </div>

  {% endif %}

 

  <div id= »contactFormWrapper »>

    <p>

      <label>{{ ‘contact.form.name’ | t }}</label>

      <input type= »text » required id= »contactFormName » name= »contact[name] »>

    </p>

    <p>

      <label>{{ ‘contact.form.email’ | t }}</label>

      <input type= »email » required id= »contactFormEmail » name= »contact[email] »>

    </p>

    <p>

      <label>{{ ‘contact.form.phone’ | t }}</label>

      <input type= »telephone » id= »contactFormTelephone » name= »contact[phone] »>

    </p>

    <p>

      <label>{{ ‘contact.form.message’ | t }}</label>

      <textarea required rows= »10″ id= »contactFormMessage » name= »contact[body] »>

    </p>

    <p>

      <input type= »submit » id= »contactFormSubmit » value= »{{ ‘contact.form.send’ | t }} » />

    </p>

  </div>

 

  {% endform %}

 

  <style>

  .contact-form {margin:1em 0}

  .feedback {padding:0.5em 0.7em;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px}

  .feedback p {padding:0.5em 0 !important;margin:0 !important}

  .successForm {background:#bde0a8;color:green}

  .errorForm {background:#eebdbd;color:red}

  </style>

    • Sauvegardez vos changements.

 

  • 4- Configurez la page de contact pour qu’elle utilise le bon template

Une fois que votre page de contact et votre template sont prêts, il ne vous reste plus qu’à les faire communiquer : vous devez indiquer à la page que c’est ce template qu’elle doit utiliser pour s’afficher.

Pour cela :

    • Rouvrez la page créée, côté administration.
    • Dans la section « Template » (à droite), choisissez le template « page.contact » dans le menu déroulant.
    • Sauvegardez.
    • Normalement, le formulaire de contact devrait maintenant être visible sur la page de contact.
    • Si vous souhaitez le rendre facilement accessible, pensez à ajouter un lien vers cette page dans votre menu de navigation principal.

 

  • 5- Vérifiez les soumissions de formulaire reçues

Votre formulaire de contact envoie toutes les soumissions à l’adresse indiquée dans la section « Customer email » de votre page « Settings/General ».

Si vous souhaitez recevoir ces emails à une autre adresse que votre adresse d’administration principale, pensez à bien vérifier ce réglage.

Si vous voulez vous servir d’une adresse tierce de réception, il vous faudra utiliser un service externe, comme Wufoo or Jotform, et intégrer le formulaire créé via ce service dans votre page de contact, au lieu d’utiliser le template de Shopify.

Attention, vous ne pouvez pas modifier l’objet des emails automatiques reçus via le formulaire.

Pour être sûr de bien recevoir les messages provenant du formulant, assurez-vous d’avoir ajouté l’adresse mailer@shopify.com à la liste d’adresses autorisées par votre logiciel de réception des emails.

 

  • 6- À propos du filtrage du spam

Shopify analyse les données saisies par vos visiteurs dans le formulaire, en vérifiant le contenu de la section [body] (le corps principal du message).

S’il estime que ce contenu est potentiellement du spam, il vous enverra quand même l’email, mais en faisant précéder l’objet de l’email par la mention [spam], pour vous alerter.

Afin de bien recevoir tous ces emails signalés, assurez-vous que vous avez créé un filtre de réception, dans votre logiciel de courrier, qui permet de mettre de côté tous les emails dont l’objet commence par [spam], ceci afin de pouvoir les vérifier manuellement.

 

2/ Ajouter des champs à votre formulaire de contact

 

Une fois que votre page de contact est en place et que tout fonctionne bien, vous aurez peut-être envie de l’enrichir pour obtenir plus d’informations de la part de vos visiteurs.

C’est une fonction assez simple à mettre en place, à partir du moment où vous n’oubliez pas que l’ajout de champs à un formulaire Liquid repose sur un élément essentiel : l’attribut du champ.

 

  • L’attribut, c’est quoi et à quoi ça sert ?

Il s’agit d’un intitulé qui permet à chaque information d’être compilée au bon endroit lorsque la saisie dans le formulaire est transformée en email pour vous être envoyée.

Le nom d’un champ, dans le cadre d’un formulaire Liquid de Shopify, ressemble toujours à ça :

name= »contact[___] »

La seule variable ici est le contenu qui va apparaître entre les crochets.

Donc, si l’on veut que l’intitulé dans l’email soit « Couleur cheveux », on va saisir :

name= »contact[couleur cheveux] »

Les majuscules sont rajoutées d’elles-mêmes à chaque début de mot et le texte sera labellisé sous la forme « Couleur Cheveux ».

 

  • Précision côté client

Vos visiteurs doivent toujours au moins remplir les champs « contact[email] » et « contact[body] » (leur propre adresse et le corps du message).

Si ces champs sont laissés vides, le message ne sera pas envoyé.

Pour mettre en place un champ supplémentaire, vous devez donc simplement respecter le format de code suivant :

<label>Couleur de vos cheveux</label>

<input type= »text » name= »contact[couleur cheveux] » />

Si vous désirez faire figurer une première réponse, pour que votre visiteur comprenne bien quel type de réponse il doit saisir, vous pouvez compléter ce code de la façon suivante :

<label>Couleur de vos cheveux</label>

<input type= »text » name= »contact[couleur cheveux] » placeholder= »Brun » />

Cet exemple s’applique à une simple saisie de texte, mais vous avez aussi la possibilité d’ajouter des cases à cocher, des boutons radio ou des menus déroulants :

 

  • Menus déroulants

Voici un exemple de code dont vous pouvez partir :

<label>Type de question :</label>

  <select id= »contactFormQuestionType » name= »contact[type question] »>

    <option>Technique</option>

    <option>Administrative</option>

    <option>Commerciale</option>

    <option>Autre</option>

  </select>

 

  • Boutons radio (un seul choix possible à cocher)

Voici un exemple de code dont vous pouvez partir :

<label>Sexe</label>

  <input type= »radio » id= »contactFormSexMale » name= »contact[sex] » value= »Male » />Homme

  <input type= »radio » id= »contactFormSexFemale » name= »contact[sex] » value= »Female » />Femme

 

  • Cases à cocher

Voici un exemple de code dont vous pouvez partir :

<label>Voulez-vous recevoir plus d’informations sur nos offres promotionnelles ?</label>

   <input type= »checkbox » id= »contactFormAddInfo » name= »contact[oui merci] » value= »Yes Please » />Oui, merci !

Dans le cas de la case à cocher, si le client ne coche rien, cette partie du formulaire sera totalement absente de l’email reçu côté admin.

Une fois que vous avez préparé les boutons que vous souhaitez ajouter à votre formulaire de contact, il ne vous reste plus qu’à aller les intégrer dans votre template de contact :

  • Retourner sur le template déjà vu précédemment.
  • Cherchez le code : <div id= »contactFormWrapper »>
  • Placez vos champs à l’intérieur du code du formulaire existant, là où vous souhaitez les voir apparaître.

Attention, n’intégrez jamais un code au milieu d’un autre code, en cassant l’association des balises.

Procédez en créant une ligne vierge entre deux blocs existants, comme dans l’exemple ci-dessous :

Voilà pour ce qui concerne le formulaire de contact.

 

3/ Ajouter un formulaire de commande à votre boutique

 

Attention, cette personnalisation fonctionne pour les thèmes sans sections, mais n’a pas été validée pour tous les thèmes avec sections. Il est donc possible qu’elle ne donne pas les résultats souhaités si vous utilisez un thème récent (mais ces thèmes-là vous proposent généralement des options similaires via le « Theme editor »).

L’idée ici est d’obtenir un formulaire récapitulatif qui permet une commande globale en un clic.

Plus concrètement, imaginez que tous les produits appartenant à une collection donnée se trouvent dans un tableau, avec un produit par ligne et un champ de quantité, un peu comme sur un formulaire papier traditionnel, comme l’illustre cette image :

 

Cette fonction peut être intéressante si vous voulez permettre des achats en gros sur votre site et simplifier le processus de commande.

Vous pouvez ajouter un tel formulaire :

 

  • Sur une page générique

Suivez ces étapes :

    • Rendez-vous sur la page HTML/CSS de votre thème.
    • Dans la catégorie « Templates », cliquez sur « Add a new template ».
    • Créez un nouveau template de type « page » que vous allez appeler « order-form » (sans les guillemets), comme dans l’image ci-dessous.
    • Remplacez le code de ce nouveau fichier par le contenu à récupérer ici.
    • Choisissez laquelle de vos collections vous souhaitez utiliser et notez son « handle » (la portion de son adresse située après /collections/xxxx).
    • Tout en haut de votre nouveau template, ajoutez le code suivant, en remplaçant la partie rouge par le « handle » de votre collection :

{% assign collection = collections.your-collection-handle-here %}

    • Sauvegardez.
    • Créez une nouvelle page dans votre boutique et affectez-lui le template « page.order-form » (comme vu plus haut, pour la personnalisation de la page de contact).
    • Sauvegardez votre page et allez vérifier qu’elle s’affiche comme vous le souhaitez.

 

  • Sur la page de collection concernée
    • Rendez-vous sur la page HTML/CSS de votre thème.
    • Dans la catégorie « Templates », cliquez sur « Add a new template ».
    • Créez un nouveau template de type « collection » que vous allez appeler « « order-form » (sans les guillemets), comme dans l’image ci-dessous.
    • Remplacez le code de ce nouveau fichier par le contenu à récupérer ici.
    • Sauvegardez.
    • Rendez-vous dans l’administration de la page de collection sur laquelle vous voulez afficher votre formulaire et affectez-lui le template « collection.order-form ».
    • Sauvegardez votre page et allez vérifier qu’elle s’affiche comme vous le souhaitez.

Voilà pour cet article. Je vous donne rendez-vous dans le suivant pour d’autres personnalisations relatives à vos collections.

À très bientôt pour la suite !