Comment personnaliser le panier de votre Shopify

 

Dans cet article, nous allons terminer la présentation des personnalisations de thème relatives à la page de panier, avant de passer à d’autres types de modifications du code.

Aujourd’hui, je vais aborder trois sujets : collecter des informations client avec les attributs de panier, empêcher la commande de produits qui sont épuisés et l’utilisation de permaliens pour le remplissage du panier.

 

1/ Collecter des informations client avec les attributs de panier

 

Les attributs de panier sont des champs de saisie personnalisés qui vous permettent de récupérer des informations additionnelles relatives à votre client via la page de panier.

Les informations que vous récoltez seront affichées dans une note à l’intérieur de la commande, côté admin.

Par exemple, si vous voulez autoriser vos clients à indiquer s’ils souhaitent que leur article soit un cadeau emballé, vous pouvez alors ajouter une case en ce sens dans la page panier

Attention ! Ne confondez pas les attributs de panier avec les commentaires laissés dans les commandes (les « Order notes »), et les « Line item properties » :

  • Les « Order notes » sont disponibles dans tous les thèmes Shopify gratuits et vous permettent de récupérer des instructions spéciales de vos clients quant à la préparation de la commande. Il s’agit d’une option à activer dans le « Theme editor ».
  • Les « Line item properties » sont utilisées pour offrir des options de personnalisation d’articles et sont directement intégrées sur les pages produits.

Comme c’est souvent le cas, les manipulations pour les attributs de panier sont différentes selon que votre thème comporte ou pas des sections (cf. les premiers tutos de cette série consacrée aux thèmes, pour en savoir plus et éventuellement vérifier dans quel cas vous vous situez).

 

Thèmes avec sections

 

  • Créez un champ d’attribut de panier

Vous pouvez ajouter autant de champs que vous le désirez dans votre panier.

Vous pouvez utiliser Shopify UI Elements Generator pour créer facilement le code HTML/Liquid de chaque champ que vous voulez générer.

C’est un outil spécialement pensé par Shopify pour simplifier l’ajout d’éléments d’interface, comme des champs de saisie et des icônes. Il est en anglais, mais très simple d’utilisation.

    • Une fois sur cette page de création, dans la section « Set your form field », choisissez le type d’élément que vous voulez utiliser, via l’ascenseur « Type of form field ».

Vous avez le choix entre des champs de texte (court ou long), des boutons radio, des ascenseurs de sélection, des cases à cocher (individuelles ou par groupes).

    • Ensuite, dans le champ « Your form field label », saisissez le label que vous voulez donner à votre champ personnalisé (ce que verra votre client).
    • Si vous désirez que le remplissage de ce mini-formulaire soit obligatoire pour pouvoir accéder à la validation de commande, vous pouvez cocher la case « Required ».
    • Vous pouvez vérifier le rendu de votre formulaire dans la section « Preview », à droite.
    • Pour finir, copiez le code généré par l’outil, en bas de la page, en cliquant sur « Copy to clipboard ». Vous allez l’utiliser un peu plus loin.

 

  • Créez un champ d’attribut de panier

Pour cette étape, rendez-vous dans la page HTML/CSS de votre thème.

    • Dans la catégorie « Sections », cliquez sur le fichier « cart-template.liquid » (ou sur le fichier « cart.liquid », si votre thème ne contient pas le premier fichier).
    • Trouvez la balise </form> dans la page de code.
    • Créez une nouvelle ligne au-dessus de cette balise et collez-y le code que vous avez créé dans le générateur (vous pouvez aussi tester d’autres emplacements possibles pour votre formulaire, en vérifiant la page de panier au fil de vos essais).
    • Si vous avez inclus la fonction « Required » lors de la génération du formulaire, vous devez aussi retirer l’attribut « novalidate » du code de ce fichier.

La ligne concernée doit ressembler à ceci :

<form action= »/cart » method= »post » novalidate class= »cart »>

Supprimer la mention « novalidate », ce qui donnera :

<form action= »/cart » method= »post » class= »cart »>

    • Sauvegardez.

L’information saisie par le client lors du remplissage de ce mini-formulaire, dans la page de panier, apparaîtra dans la section « Additional Details » de la commande, côté administration.

Note importante : les attributs de panier ne peuvent être ajoutés qu’à la page de panier et à la page fixe, pas aux versions Ajax de type popup ou tiroir. Par conséquent, pensez bien à activer le panier normal dans votre « Theme editor ».

 

  • Affichez les attributs du panier dans les modèles d’email

Vous pouvez intégrer les éléments issus des attributs de panier dans vos modèles d’emails.

Pour cela, ajoutez le bloc de code suivant au modèle, à l’endroit où vous souhaitez montrer les éléments :

<h4>Détails supplémentaires</h4>

<p>

{% for attribute in attributes %}

{{ attribute | first }}: {{ attribute | last }}

{% endfor %}

</p>

 

Thèmes sans sections

 

  • Créez un champ d’attribut de panier

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

 

  • Créez un champ d’attribut de panier

Pour cette étape, rendez-vous dans la page HTML/CSS de votre thème.

    • Dans la catégorie « Templates », cliquez sur le fichier « cart.liquid ».
    • Trouvez la balise </form> dans la page de code.
    • Créez une nouvelle ligne au-dessus de cette balise et collez-y le code que vous avez créé dans le générateur (vous pouvez aussi tester d’autres emplacements possibles pour votre formulaire, en vérifiant la page de panier au fil de vos essais).
    • Si vous avez inclus la fonction « Required » lors de la génération du formulaire, vous devez aussi retirer l’attribut « novalidate » du code de ce fichier.

La ligne concernée doit ressembler à ceci :

<form action= »/cart » method= »post » novalidate class= »cart »>

Supprimer la mention « novalidate », ce qui donnera :

<form action= »/cart » method= »post » class= »cart »>

    • Sauvegardez.

L’information saisie par le client lors du remplissage de ce mini-formulaire, dans la page de panier, apparaîtra dans la section « Additional Details » de la commande, côté administration.

Note importante : les attributs de panier ne peuvent être ajoutés qu’à la page de panier fixe (/cart), et pas aux versions Ajax de type popup ou tiroir. Par conséquent, pensez bien à activer le panier normal dans votre « Theme editor ».

 

  • Affichez les attributs du panier dans les modèles d’email

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

 

2/ Empêcher la commande de produits qui sont épuisés

 

Shopify permet d’éditer les quantités sur la page de panier, ce qui donne la possibilité au client de saisir la valeur qu’il souhaite, même lorsque le stock des produits n’est plus suffisant pour couvrir cette quantité, ce qui n’est pas souhaitable si votre boutique ne propose que des articles avec des stocks peu élevés.

En effet, le client verra que le stock est insuffisant seulement au moment de la validation de commande (voir l’image ci-dessous), ce qui n’est pas une expérience agréable pour lui.

Pour contourner ce problème, vous pouvez modifier le code de votre thème avec deux solutions possibles (choisissez l’une ou l’autre).

 

  • Corrigez « silencieusement » les quantités sur la page de panier

 

Note importante : les attributs de panier ne peuvent être ajoutés qu’à la page de panier fixe (/cart), et pas aux versions Ajax de type popup ou tiroir. Par conséquent, pensez bien à activer le panier normal dans votre « Theme editor ».

Avec cette fonction de correction, la valeur de quantité, par défaut, va systématiquement renvoyer le maximum qu’il est possible de commander.

Par exemple, si un t-shirt n’a plus que 10 exemplaires en stock, le client ne pourra pas modifier la quantité, sur la page de panier, au-delà de 10.

Suivez ces étapes, dans la page HTML/CSS de votre thème, pour la mettre en place :

    • Dans la catégorie « Templates », cliquez sur le fichier « cart.liquid » pour accéder à son code.
    • Tout en bas de ce code, ajouter le bloc de code suivant :

<script>

jQuery(‘[max]’).change(function() {

  var max = parseInt(jQuery(this).attr(‘max’), 10) || 10000;

  var value = parseInt(jQuery(this).val(), 10) || 0;

  if (value > max) { jQuery(this).val(max); }

});

</script>

    • Toujours dans ce fichier, trouvez la ligne de code suivante :

value= »{{ item.quantity }} »

    • Après cette ligne, en laissant un espace, ajoutez le bloc de code suivant :

{% unless item.variant.inventory_management == blank or item.variant.inventory_policy == ‘continue’ %} max= »{{ item.variant.inventory_quantity }} » {% endunless %}

Ce qui doit donc vous donner :

<input type= »text » … name= »updates[] » id= »updates_{{ item.id }} » value= »{{ item.quantity }} » {% unless item.variant.inventory_management == blank or item.variant.inventory_policy == ‘continue’ %} max= »{{ item.variant.inventory_quantity }} » {% endunless %} />

    • Pensez bien à sauvegarder vos changements.

 

  • Informez vos clients que les produits sont épuisés

 

Si vous le souhaitez, vous pouvez mettre en place une alerte à la place de la correction vue ci-dessus.

Pour cela, vous pouvez utiliser la solution JavaScript suivante :

    • Dans la catégorie « Templates », cliquez sur le fichier « cart.liquid » pour accéder à son code.
    • Tout en bas du fichier, ajoutez le code suivant (en pensant à traduire les portions que j’indique en rouge, pour vous aider à les localiser) :

<script>

jQuery(‘[max]’).change(function() {

  var max = parseInt(jQuery(this).attr(‘max’), 10) || 10000;

  var value = parseInt(jQuery(this).val(), 10) || 0;

  if (value > max) {

    alert(‘We only have ‘ + max + ‘ of this item in stock’);

    jQuery(this).val(max);

  }

});

</script>

    • Toujours dans ce fichier, trouvez la ligne de code suivante :

value= »{{ item.quantity }} »

    • Après cette ligne, en laissant un espace, ajoutez le bloc de code suivant :

{% unless item.variant.inventory_management == blank or item.variant.inventory_policy == ‘continue’ %} max= »{{ item.variant.inventory_quantity }} » {% endunless %}

Ce qui doit donc vous donner :

<input type= »text » … name= »updates[] » id= »updates_{{ item.id }} » value= »{{ item.quantity }} » {% unless item.variant.inventory_management == blank or item.variant.inventory_policy == ‘continue’ %} max= »{{ item.variant.inventory_quantity }} » {% endunless %} />

    • Pensez bien à sauvegarder vos changements.

 

3/ Utiliser les permaliens pour préremplir le panier

 

Un permalien de panier mène directement vos clients vers la première page de validation de commande avec les produits préenregistrés dans le panier.

Ceci est intéressant si, par exemple, vous voulez parler de votre produit sur un blog, insérer un bouton « acheter maintenant » et faire en sorte que le client arrive directement sur l’écran de validation avec son panier déjà rempli.

En procédant de cette façon, avec un permalien de panier, vous évitez que votre client ait besoin de passer par la mise au panier classique, via la page du produit, et vous limitez donc le risque qu’il change d’avis entre-temps.

Attention : le passage par un permalien empêche toute modification des quantités par le client, qui devra valider le panier tel que vous l’avez conçu.

(Ceci est possible sous réserve que le client soit bien connecté, si votre boutique est réglée sur le mode « compte client obligatoire ». Dans le cas où le client ne l’est pas, il est d’abord envoyé vers la page de connexion).

Voici à quoi ressemble un permalien de panier :

http://your-store.myshopify.com/cart/70881412:1,70881382:1

Dans cet exemple, « 70881412 » est l’identificateur unique d’un produit et « 1 » représente la quantité.

En d’autres termes, le format d’une telle adresse est :

http://yourstore.com/cart/#{variant_id}:#{quantity}(,…)

Une fois que vous avez compris ça, vous pouvez aller plus loin dans la personnalisation du permalien, en y incorporant d’autres éléments.

 

  • Intégrer des éléments supplémentaires dans le permalien de panier.

 

Vous pouvez préremplir n’importe lequel des champs qu’un client doit saisir lors de la validation de sa commande, pour lui faire gagner du temps.

Pour cela, vous devez respecter le format d’URL suivant :

/cart/{variant_id}:{quantity}?checkout[email]=somebody@store.com&checkout[shipping_address][city]=thisismyhometown

Vous pouvez utiliser les paramètres de requête présentés ci-dessous, pour compléter ou remplacer les paramètres donnés dans l’exemple :

    • checkout[email]
    • checkout[shipping_address][first_name]
    • checkout[shipping_address][last_name]
    • checkout[shipping_address][address1]
    • checkout[shipping_address][address2]
    • checkout[shipping_address][city]
    • checkout[shipping_address][zip]

 

  • Intégrer une réduction.

 

Vous pouvez directement intégrer une réduction à un permalien de panier, soit en l’appliquant, soit en préremplissant le champ de saisie du code de réduction, pour que le client valide lui-même la réduction.

    • Pour préremplir le champ, utilisez :

/cart/{variant_id}:{quantity}?checkout[reduction_code]=test

Ici, « test » est la valeur à remplacer par l’intitulé du code de réduction.

    • Pour appliquer la réduction directement, utilisez :

/cart/{variant_id}:{quantity}?discount=test

Ici, « test » est la valeur à remplacer par l’intitulé du code de réduction.

 

  • Ajouter un lien « Acheter ceci » à un article de votre blog.

 

Pour insérer un permalien de panier dans un article de votre blog Shopify :

    • Ouvrez l’article concerné (via la page « Blog posts »).
    • Dans le « Rich Text Editor », sous l’en-tête « Content », cliquez sur le bouton HTML, symbolisé par « < > » (à droite).
    • Ajoutez votre lien, qui doit avoir une forme semblable à celle-ci (en personnalisant bien l’adresse racine de la boutique) :

<p><a href= »http://your-store.com/cart/70881412:1″>Achetez cet article

 

    • Sauvegardez et testez.

 

  • Ajouter un lien « Commander à nouveau ».

 

Vous pouvez ajouter ce type de lien dans votre thème, à l’intérieur du template « customers/order.liquid ».

Pour cela :

    • Dans la page HTML/CSS de votre thème, ouvrez la catégorie « templates », puis cliquez sur le fichier « customers/order.liquid » pour l’ouvrir dans l’éditeur de code.
    • Si vous ne voyez pas ce fichier, vous pouvez le créer en cliquant sur « Add a new template ».
    • Dans la page de code de ce fichier, collez ce qui suit :

<a href= »/cart/{{ line_item.variant_id }}:{{ line_item.quantity }} »>Commander à nouveau

    • Sauvegardez vos changements.

 

  • Ajouter un paramètre de tracking à votre lien.

 

Si vous voulez savoir par où votre client est arrivé sur la page de validation de commande (dans le cas où vous placez des permaliens de panier à divers endroits), il est possible d’ajouter aussi un paramètre de tracking.

L’information vous sera relayée dans les détails de la commande, côté administration de la boutique.

Pour cela, trois solutions :

    • Utilisez une note de panier, en construisant votre lien comme ceci :

/cart/70881412:1,70881382:1?note=vient-de-ma-newsletter-2017-02-14

En gras, vous voyez un exemple de libellé de note.

    • Utilisez un attribut de panier :

/cart/70881412:1,70881382:1?attributes[where-from]=vient-de-ma-newsletter-2017-02-14&attributes[some-other-key]=some-value

    • Utilisez le paramètre « ref » :

/cart/70881412:1,70881382:1?ref=vient-de-ma-newsletter-2017-02-14

Voilà, nous en avons terminé avec le tour des personnalisations de thème relatives au panier.

Dans le prochain focus, je vous proposerai d’autres utilisations possibles du code, pour tout ce qui concerne les collections.

À très bientôt pour la suite !