Comment personnaliser les thèmes Shopify avec l’objet Customer

Lorsque vous créez des thèmes sur-mesure pour vos clients ou que vous personnalisez une boutique, il est important de réfléchir aux messages ou aux contenus qui peuvent être affichés afin de personnaliser l'expérience d'achat pour les différents types de consommateurs auxquels vos clients s’adressent.

L’objet customer Liquid est un outil utile qui peut être utilisé dans n'importe quelle page thème de Shopify et qui vous permet d'accéder à différentes propriétés associées à un client particulier. Lorsqu'un client est connecté à son compte, il est possible d'interagir avec les données relatives à ses commandes précédentes, aux balises qui lui ont été attribuées, etc.

L'un des avantages de cet objet est qu'il peut offrir des possibilités intéressantes de personnalisation des vitrines et afficher des messages ciblés pour certains types de consommateurs. Par exemple, les clients qui atteignent un certain point dans leur parcours. Lorsque les clients ont effectué cinq commandes, ils peuvent avoir accès à un code de réduction déverrouillé la prochaine fois qu'ils se connectent à leur compte.

Grâce à des approches créatives de la façon d’afficher les messages destinés aux clients, vous pouvez augmenter l'engagement entre la marque pour qui vous travaillez et ses consommateurs. Cette approche de la segmentation de l'audience en vitrine peut aider à établir des liens plus forts, à multiplier les conversions et à améliorer l'UX en général.

Dans cet article, nous examinerons quand l'objet customer est accessible et comment afficher des messages spécifiques, comme des codes de réduction, lorsqu'un client remplit certaines conditions. Nous examinerons également comment les clients sont gérés sur Shopify et comment votre client peut appliquer des balises à ses clients. Nous passerons ensuite en revue trois exemples d'affichage de messages.

Accès à l'objet customer

L'objet customer est un objet global, ce qui signifie qu'il peut être utilisé sur n'importe quel fichier du thème de votre client. Cela inclut les pages de produits, de collections et de panier, ainsi que les pages liées aux consommateurs comme la page de compte client et la page de connexion. Avec ce niveau de portée, il existe de nombreuses possibilités afin de personnaliser l'expérience client.

Toutefois, cet objet et ses attributs ne sont accessibles que lorsqu'un client est connecté à son compte. Cela signifie que vous ne pouvez éditer des données ou du contenu avec l'objet customer que lorsqu'un client est connecté à son compte.

L’objet customer est le plus souvent utilisé dans l'en-tête d'un thème Shopify pour introduire des liens qui permettent à un client de se connecter ou de se déconnecter de son compte, ainsi que de visiter la page en question. Les exemples de code Liquid de Shopify contiennent un composant pour cela :

Nous pouvons voir ici que si le paramétrage de la boutique pour les comptes clients est activé, et si un client est connecté, l'en-tête affichera alors une liste non ordonnée avec un lien vers la page de son compte, ainsi qu'une option pour se déconnecter de son compte. Dans le cas contraire, si un client n'est pas connecté, des liens pour se connecter ou créer un compte seront affichés.

L'élément clé est ici la balise Liquid {%- if customer -%} qui nous permet d'exécuter une action, ou d'afficher un contenu, lorsqu'un client est connecté. Dans le cas de notre en-tête, nous pouvons utiliser l'objet customer dans une balise de contrôle de flux pour déterminer si un client est connecté et, le cas échéant, pour afficher des options spécifiques.

Dans cet article, nous nous appuierons sur cette balise, ainsi que d’autres langages, pour afficher des messages personnalisés sur les boutiques de vos clients.

Passons en revue trois exemples d'affichage d'un message à l'aide de l'objet customer.

1. Affichage d'un message lorsqu'un client est connecté

Le premier exemple de la manière dont nous pourrions personnaliser la boutique d'un client avec l'objet customer est le simple fait d'afficher un texte à tous les clients une fois qu'ils sont connectés à leur compte. Cela peut être utile si votre client souhaite diffuser un message aux personnes qui ont déjà créé des comptes, ou leur partager un code de réduction.

L'objet customer étant un objet global, ce message pourrait être affiché dans n'importe quelle zone souhaitée par votre client, et pour cet exemple, imaginons qu'il désire l’afficher sur toutes les pages de la boutique. Nous allons donc éditer le fichier theme.liquid et ajouter notre message sous l’en-tête de la page qui est un bon endroit pour communiquer. Pour cela, nous pouvons ajouter les éléments suivants sous la balise {% section 'header' %} :

{%- if customer -%}
<p>Les clients privilégiés peuvent utiliser le code de réduction HEROES pour bénéficier d'une remise de 10 % sur tous les produits</p>
{%- endif -%}

Nous pouvons voir que la balise d'ouverture {%- if customer -%} met en place une condition pour envoyer l'élément de paragraphe si un client est connecté. Dans le cas où un client est connecté, l'exemple de texte que nous avons inclus ici sera affiché sous l'en-tête de la page, et lorsqu'un client n'est pas connecté, ce code sera simplement ignoré lors du chargement de la page.

Ce message apparaîtra désormais sur chaque page, mais il est possible d’exclure le message de certaines pages ou de le limiter à certaines pages. Par exemple, nous pourrions développer la déclaration if pour empêcher le message d'apparaître sur les pages de recherche en ajoutant une condition supplémentaire à notre balise d'ouverture :

{%- if customer and template != 'search' -%}
<p>Les clients privilégiés peuvent utiliser le code de réduction HEROES pour bénéficier d'une remise de 10 % sur tous les produits</p>
{%- endif -%}

Nous pouvons voir ici que nous avons utilisé and pour définir une autre condition, de sorte que le texte ne s'affiche que lorsque les deux conditions sont remplies. Dans ce cas, lorsqu'un client est connecté et que la page n'est pas une page de recherche, le texte sera affiché.

De même, nous pourrions limiter l'affichage du message à la page d'accueil avec cette condition supplémentaire :

{%- if customer and template == 'index' -%}
<p class="annonce-client h4">Les clients privilégiés peuvent utiliser le code de réduction HEROES pour bénéficier d'une remise de 10 % sur tous les produits</p>
{%- endif -%}

Il est intéressant de comprendre l'activité de votre client et la façon dont il échange avec ses clients pour trouver le meilleur langage pour présenter ce genre de messages, mais vous pouvez tester différentes options qui peuvent être débloquées avec Liquid. Les classes CSS peuvent également être appliquées à l'élément paragraph pour ajuster le positionnement et le formatage du texte afin qu'il corresponde au style du thème de votre client.

2. Affichage d'un message lorsqu'un client a atteint un certain nombre de commandes

Maintenant que nous avons examiné l'utilisation de base de l'objet customer nous pouvons commencer à explorer les cas d'utilisation potentiels des attributs de l'objet. Un attribut utile est customer.orders_count, qui communique le nombre total de commandes passées par un client.

Vos clients peuvent vouloir récompenser les clients qui ont atteint un certain seuil de commandes en affichant un code de réduction, ou un message spécial, sur une page. L'attribut customer.orders_count vous permettra de créer une condition d'affichage du contenu lorsqu'un client a dépassé un nombre prédéfini de commandes.

Là encore, comme l'objet customer est global, vous pourriez afficher ce message sur n'importe quelle page. Toutefois, pour les besoins de cette démonstration, nous ajouterons ce message à la page du panier lorsque les clients consulteront les détails de leur commande. Sur le fichier modèle cart.liquid, vous pouvez ajouter le code suivant à l'endroit où vous souhaitez que le message apparaisse :

{%- if customer.orders_count > 5 -%}
<p>Pour vous remercier de votre fidélité, bénéficiez d'une réduction de 20 % sur tous les produits avec le code LEGENDES.</p>
{%- endif -%}

Désormais, lorsqu'un client qui a plus de cinq commandes à son actif est connecté à son compte et arrive à la page du panier, il voit apparaître son message personnalisé.

Les développeurs doivent toutefois noter que les commandes test avec une passerelle fictive ne seront pas comptabilisées dans les commandes auxquelles accède l'attribut customer.orders_count.

3. Affichage d'un message lorsqu'un client possède une balise spécifique

Un autre attribut pratique de l'objet customer est customer.tags, qui, comme vous pouvez le deviner, nous permet d'accéder à toutes les balises associées à un client. Cela permet à vos clients de catégoriser leurs consommateurs à partir de l'interface administrateur de Shopify et d'afficher des messages spécifiques pour différents groupes de clients.

Si, par exemple, votre client a un groupe de consommateurs importants avec lesquels il souhaite partager des offres exclusives, cette approche lui permettra d'afficher des codes de réduction spéciaux, ou des collections restreintes lorsque ces clients VIP sont connectés à leurs comptes.

La première étape consiste à attribuer une balise à un client. Pour ce faire, il faut accéder à la section Clients de l'interface administrateur et sélectionner un client spécifique. La section Balises sur la droite vous permettra d'entrer une nouvelle balise ou une balise déjà existante.

Une fois la balise attribuée, vous pouvez alors créer la logique Liquid qui produira un message lorsque le profil d'un client contiendra la balise en question. Dans cet exemple, nous avons créé une balise "VIP" et nous aimerions partager un code de réduction exclusif avec les clients VIP sur la page du panier. Le code ressemblerait à ceci :

{%- if customer.tags contains "VIP" -%}
<p>En tant que client VIP, bénéficiez d’une réduction de 25% sur tous nos produits avec le code SUPERSTAR.</p>
{%- endif -%}

Des conditions supplémentaires pourraient être ajoutées pour afficher des messages différents dans le cas où il existerait d'autres groupes de consommateurs que votre client souhaite cibler. Par exemple, si votre client a un autre groupe de consommateurs avec une balise « Vente en gros », la balise de contrôle de flux elseif pourrait être ajoutée :

{%- if customer.tags contains "VIP" -%}
<p>En tant que client VIP, bénéficiez d’une réduction de 25% sur tous nos produits avec le code SUPERSTAR.</p>
{%- elseif customer.tags contains "Vente en gros" -%}
<p>Obtenez 10% de réduction sur notre collection d’automne avec le code de réduction AUTOMNE.</p>
{% endif %}

Il est possible de mettre en place autant de conditions que votre client le désire pour afficher ce type de messages contextuels. Si vous souhaitez afficher ce message dans plusieurs zones, vous pouvez également créer un extrait qui contient le code, puis l’ajouter là où vous le souhaitez.

Découvrez les attributs Liquid

Pas un client ne se ressemble, c’est pourquoi il est utile de passer un peu de temps à explorer les attributs de Liquid qui pourraient être utiles dans vos différents projets. Plus vous comprendrez les relations de vos clients avec leurs consommateurs, plus il vous sera facile de décider quels types de langages et de messages contribueront à renforcer l'engagement pour augmenter leurs conversions.

---

Publié par Maud Leuenberger. Maud est la rédactrice en chef du blog français de Shopify.

Texte original par Liam Griffin. Traduction par Caroline Lanau-Imbert.