Cet article est le troisième et dernier consacré à la personnalisation de votre thème Shopify pour tout ce qui concerne la communication et les échanges avec vos clients.

Aujourd’hui, je vais vous parler de trois points : ajouter à la fonction de création de compte une option grâce à laquelle vos clients peuvent accepter de recevoir votre newsletter, collecter plus d’informations personnelles lors de cette création, et enfin transformer l’usage de votre bouton « ajouter au panier ».

 

1/ Permettre à vos clients de s’enregistrer sur votre liste d’abonnés lors de la création de leur compte

 

Vous pouvez ajouter une case à cocher dans le formulaire de création de compte, pour que vos clients puissent (ou pas) vous confirmer qu’ils acceptent de recevoir des newsletters, des emails promotionnels et toute autre communication marketing émanant de votre boutique.

Voici un exemple du rendu dans une boutique américaine :

Notez que cette fonction existe aussi sur la page de validation de commande.

Pour mettre en place cette fonction, suivez ces étapes :

  • Rendez-vous dans la page HTML/CSS de votre thème.
  • Dans le dossier « Templates », cliquez sur le fichier « customers/register.liquid ».
  • Trouvez le code qui contient le champ « password » de votre formulaire.

Ce code devrait ressembler à ceci :

<label for= »CreatePassword » class= »label–hidden »>{{ ‘customer.register.password’ | t }}

<input type= »password » name= »customer[password] » id= »CreatePassword » class= »input-full {% if form.errors contains ‘password’ %} input–error{% endif %} » placeholder= »{{ ‘customer.register.password’ | t }} »>

  • Une fois que vous avez trouvé ce code, ajoutez juste en dessous le code suivant (en faisant attention de bien le coller avant la balise Liquid {% endform %}) :

<div>

  <input type= »hidden » name= »customer[accepts_marketing] » value= » » />

  <input type= »checkbox » name= »customer[accepts_marketing] » checked= »checked » />

  Subscribe to stay updated with new products and offers!

</div>

  • Sauvegardez vos changements.
  • Vous pouvez consulter votre formulaire de création de compte, comme le voient vos clients, en vous rendant sur cette adresse (personnalisée avec l’adresse racine de votre boutique) : http://your-shop-url/account/register.

Pour rappel, n’oubliez pas que lorsqu’un client accepte d’être ajouté à votre liste d’abonnés, vous pouvez retrouver l’information dans la page d’administration du client, en haut à droite.

S’il n’accepte pas le marketing, sa page ressemble alors à cela :

Voici pour cette personnalisation !

 

2/ Obtenir plus d’informations personnelles sur vos clients lors de la création de compte

 

Lorsque vos clients créent un compte dans votre boutique, vous avez peut-être envie d’obtenir plus d’informations que ce qui est prévu, par défaut, dans Shopify.

Par exemple, obtenir leur date de naissance vous permettrait de leur envoyer un cadeau d’anniversaire.

Ici, vous allez voir comment ajouter des champs supplémentaires au formulaire d’inscription.

Attention ! Comme il est impossible de créer une nouvelle zone dans la page d’administration du client, les informations données en complément vous seront restituées en tant que note, comme vous pouvez le voir dans cette image :

De plus, vous ne pouvez pas ajouter de champs de type « adresse » ou « téléphone », car ceux-ci ne peuvent être que récupérés lors de la première commande.

 

Pour ajouter des champs supplémentaires, suivez ces étapes :

  • 1- Localisez le formulaire de création de compte

Voici comment procéder :

    • Rendez-vous dans la page HTML/CSS
    • Dans le dossier « Templates », cliquez sur le fichier « customers/register.liquid ».
    • Dans le code de ce fichier, localisez le code suivant :

{% form ‘create_customer’ %}

    • Localisez ensuite ce code :

{% endform %}

    • Notez bien que les champs supplémentaires de votre formulaire seront à ajouter entre ces deux codes.

 

  • 2- Ajoutez un champ de formulaire

 

Notez tout d’abord, en tant que bonne pratique, qu’il vaut mieux ajouter les champs supplémentaires avant le champ « password » et même, si c’est possible, avant le champ « email », comme vous pouvez le voir dans l’exemple de code ci-dessous :

    • Pour ajouter un champ, utiliser cette base de code :

<label>Label à personnaliser</label>

<input type= »text » name= »customer[note][Label] » placeholder= »Texte exemple à personnaliser » />

    • L’attribut name= »customer[note][Label] » est essentiel ici. Grâce à lui, l’information saisie par le client sera saisie en tant que note.

Sans lui, aucune information ne sera récupérée.

    • La partie [label] fonctionne comme un intitulé pour les informations quand elles sont montrées dans la section « Note » de la page admin du client.

Remplacez bien le texte du label (là où j’ai noté « label à personnaliser ») par votre propre intitulé.

Il peut contenir des espaces et des majuscules.

Par exemple, vous pouvez utiliser name= »customer[note][Birthday] » pour obtenir une date de naissance.

Dans ce cas, le code donne :

<label for= »anniversaire »>Votre date de naissance</label>

<input id= »anniversaire » type= »text » name= »customer[note][Anniversaire] » placeholder= »Votre date de naissance » />

 

  • 3- Quelles saisies sont possibles ?

 

Voici quelques exemples de codes que vous pouvez utiliser pour personnaliser la base donnée précédemment. À vous de les personnaliser en fonction de vos besoins :

    • Case à cocher :

<label for= »tacos » class= »login »>Aimeriez-vous qu’on vous envoie des tacos ?

<input type= »checkbox » value= »Oui, merci ! » name= »customer[note][Tacos?] » id= »tacos » />

    • Bouton radio :

<label>Quel genre de tacos préférez-vous ?</label>

<span>Poisson</span><input type= »radio » value= »Poisson » name= »customer[note][Typedetaco] » />

<span>Bœuf</span><input type= »radio » value= »Bœuf » name= »customer[note][Typedetaco] » />

<span>Poulet</span><input type= »radio » value= »Poulet » name= »customer[note][Typedetaco] » />

    • Menu déroulant :

<label for= »taco-count »>Combien de tacos désirez-vous ?</label>

<select name= »customer[note][Nombre de tacos] » id= »taco-count »>

  <option>1</option>

  <option>2</option>

  <option>3</option>

  <option>4</option>

</select>

Voici pour cette personnalisation !

 

3/ Remplacez le bouton d’ajout au panier par un lien de contact (thème avec sections)

Si vous avez des produits qui ne sont pas encore en vente ou si vous avez besoin d’informations spécifiques pour l’exécution de la commande (items personnalisés, produits uniques, etc.), vous pouvez remplacer votre bouton « Ajouter au panier » par un lien qui va permettre à vos clients de vous contacter.

La manipulation varie selon que le thème utilise les sections ou pas, donc choisissez la version qui correspond à vos besoins.

 

  • 1- Créer un nouveau template de produit

Voici comment procéder :

    • Rendez-vous dans la page HTML/CSS
    • Dans le dossier « Templates », cliquez sur « Add a new template ».
    • Dans le menu déroulant, choisissez « Product », puis nommez votre template « requires-contact » (ou tout autre libellé que vous devrez alors réutiliser à la place de celui-ci dans le code, ce que je ne vous conseille donc pas).
    • Cliquez sur « Create template ».
    • Votre nouveau template va s’ouvrir dans l’éditeur de code.
    • Trouvez le code suivant :

{% section ‘product-template’ %}

    • Remplacez-le par :

{% section ‘product-template-requires-contact’ %}

    • Ce code va lier votre nouveau template à la nouvelle section que vous allez créer ensuite.
    • Sauvegardez vos changements.
  • 2- Créer une nouvelle section de produit

Voici comment procéder :

    • Rendez-vous dans la page HTML/CSS
    • Dans le dossier « Sections », cliquez sur « Add a new section ».
    • Nommez votre nouvelle section « product-template-requires-contact ».
    • Cliquez sur « Create section ».
    • Votre nouvelle section va s’ouvrir dans l’éditeur de code : supprimer tout le code contenu par défaut, pour que ce nouveau fichier soit vide.
    • Parallèlement, toujours dans le dossier « Sections », cliquez sur le fichier « product-template.liquid ».
    • Sélectionnez et copiez le contenu de ce fichier.
    • Retournez dans votre nouveau fichier « product-template-requires-contact.liquid » et collez le code copié dans le fichier.
    • Sauvegardez vos changements.
  • 3- Remplacez le bouton « ajouter au panier »
    • Dans votre nouveau fichier de section, trouvez le code d’ajout au panier.

Pour cela, vous pouvez rechercher le mot « cart ».

Le code d’ajout au panier varie selon les thèmes. Cherchez une balise de type <input> ou <button>, avec du texte comme « Add to cart », « AddToCart », ou « add-to-cart ».

Par exemple, dans le thème Debut, le code concerné est celui-ci :

<button type= »submit » name= »add » id= »AddToCart-{{ section.id }} » {% unless current_variant.available %}disabled= »disabled »{% endunless %} class= »btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == ‘Default Title’ %} product-form__cart-submit–small{% endif %} »>

  <span id= »AddToCartText-{{ section.id }} »>

    {% unless current_variant.available %}

      {{ ‘products.product.sold_out’ | t }}

    {% else %}

      {{ ‘products.product.add_to_cart’ | t }}

    {% endunless %}

  </span>

</button>

    • Quand vous trouvez le code, entourez-le des balises Liquid {% comment %} et {% endcomment %}.

Ceci empêchera le code d’apparaître dans votre boutique, mais vous permettra de le remettre facilement si vous le souhaitez, simplement en supprimant ces deux balises.

Dans l’exemple du thème Debut, le résultat donnera donc :

{% comment %}

<button type= »submit » name= »add » id= »AddToCart-{{ section.id }} » {% unless current_variant.available %}disabled= »disabled »{% endunless %} class= »btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == ‘Default Title’ %} product-form__cart-submit–small{% endif %} »>

  <span id= »AddToCartText-{{ section.id }} »>

    {% unless current_variant.available %}

      {{ ‘products.product.sold_out’ | t }}

    {% else %}

      {{ ‘products.product.add_to_cart’ | t }}

    {% endunless %}

  </span>

</button>

{% endcomment %}

Attention, assurez-vous de ne rien ajouter en dehors des balises <form> et </form>, sous peine de rendre votre page de produit illisible pour le client.

 

  • 4- Ajoutez un moyen de contact

 

Maintenant que vous avez caché le bouton « ajouter au panier », vous pouvez ajouter le contenu que vous voulez afficher à la place :

    • Un lien email :

Sur la ligne en dessous de la balise Liquid {% endcomment %} dont je viens de vous parler, ajoutez le code suivant :

<p>Merci de <a href= »mailto:{{ shop.email }} »>nous contacter si ce produit vous intéresse.

 

Sauvegardez vos changements.

    • Un formulaire de contact :

Sur la ligne en dessous de la balise Liquid {% endcomment %} dont je viens de vous parler, ajoutez le code de votre formulaire de contact, tel que je vous l’ai présenté dans l’avant-dernier focus.

Sauvegardez vos changements.

 

  • 5- Paramétrez vos produits pour qu’ils utilisent le nouveau template

 

Maintenant que votre template est prêt, vous devez l’affecter aux produits où vous ne voulez pas que le bouton « Ajouter au panier » apparaisse. Pour cela :

    • Rendez-vous sur la page d’administration du produit concerné.
    • En bas à droite, dans la zone « Theme templates », choisissez le nouveau template « requires-contact » dans le menu déroulant.
    • Sauvegardez le produit et répétez l’opération pour tout autre produit concerné.

Le résultat côté boutique, va donner quelque chose qui ressemble à ceci :

3/ Remplacez le bouton d’ajout au panier par un lien de contact (thème sans sections)

 

  • 1- Créer un nouveau template de produit

Voici comment procéder :

    • Rendez-vous dans la page HTML/CSS
    • Dans le dossier « Templates », cliquez sur « Add a new template ».
    • Dans le menu déroulant, choisissez « Product », puis nommez votre template « requires-contact » (ou tout autre libellé que vous devrez alors réutiliser à la place de celui-ci dans le code, ce que je ne vous conseille donc pas).
    • Cliquez sur « Create template ».
  • 2- Remplacez le bouton « ajouter au panier »

Suivez les mêmes étapes que pour les thèmes avec sections.

  • 3- Ajoutez un moyen de contact

Suivez les mêmes étapes que pour les thèmes avec sections.

  • 4- Paramétrez vos produits pour qu’ils utilisent le nouveau template

Suivez les mêmes étapes que pour les thèmes avec sections.

Voilà pour cette personnalisation !

Dans les prochains articles, nous passerons aux personnalisations de code relatives à l’affichage des devises dans votre boutique.

À très bientôt pour la suite !