Tableau de bord Compte client — Workflow sensible au B2B
Vertex livre une suite Compte client complète qui s'adapte automatiquement à qui est connecté. Un acheteur procurement B2B avec des conditions NET-30 et un commercial attribué voit un tableau de bord. Un client final B2C en voit un autre. Un acheteur Accounts Payable multi-locations en voit un troisième avec un sélecteur de company. Le tout à partir du même thème — sans application, sans seconde famille de modèles, sans code personnalisé.
Ce guide couvre chaque écran de compte client dans Vertex, le fonctionnement du comportement sensible au B2B, le flux de réorganisation rapide, l'expérience acheteur multi-locations et comment personnaliser chaque écran dans l'éditeur de thème.
Le compte client de Vertex est construit sur les nouveaux comptes clients de Shopify (l'expérience sans mot de passe, hébergée par Shopify, que le B2B requiert) avec le style du thème Vertex et des sections sensibles au B2B superposées. Vous bénéficiez du raffinement d'un thème personnalisé et de la flexibilité d'éditer chaque section comme n'importe quelle autre page.
Ce qui est livré dans la suite Compte client
| Écran | Ce qu'il fait |
|---|---|
| Tableau de bord | La page d'atterrissage après la connexion. Sensible au B2B : affiche les informations de la company, les conditions de paiement, la carte commercial et la réorganisation rapide pour les acheteurs B2B. Affiche la liste des commandes et le lien vers les adresses pour les clients B2C. |
| Vue d'une commande unique | En-tête de commande (numéro, date, statut, total), articles avec bouton « Réorganiser cet article » par ligne, bouton « Réorganiser tout » de la commande complète en bas de page, adresses de livraison et facturation, statut d'exécution. |
| Adresses | Ajouter, modifier, supprimer et définir des adresses par défaut. Champs sensibles au pays avec validation des États/provinces. |
| Connexion | Email + mot de passe + « Mot de passe oublié ? » + CTA « Créer un compte ». |
| Créer un compte | Prénom, nom, email, mot de passe. CTA optionnel « Demander un compte trade » qui redirige vers la page Demande de devis. |
| Activer l'invitation | Active un compte client créé par le marchand dans l'admin Shopify. |
| Réinitialiser le mot de passe | Deux étapes (demander l'email de réinitialisation, puis saisir le nouveau mot de passe). |
Chaque écran est repensé dans le design system Vertex — l'échelle d'espacement, l'échelle typographique, l'échelle de rayons, l'échelle d'ombres, le système de boutons et le système d'inputs qui alimentent le reste de la vitrine. Ainsi le compte client ne ressemble pas à une application séparée — il a l'apparence et le comportement du reste de votre boutique.
C'est la nouvelle expérience de compte client hébergée par Shopify que voient les acheteurs B2B — à la marque du nom de votre boutique et de votre adresse de livraison, avec des onglets historique des commandes et profil en haut. L'apparence vient directement de Shopify, pas du thème Vertex. La carte commercial et les raccourcis de réorganisation rapide sont ajoutés par Vertex par-dessus.
Le tableau de bord sensible au B2B
Le tableau de bord est la pièce maîtresse. Il détecte si le client connecté est un acheteur B2B et affiche automatiquement l'une des deux mises en page.
Comment fonctionne la détection
Il n'y a aucune application, aucune configuration, aucune bascule. Vertex vérifie si le client connecté est rattaché à une company dans Shopify B2B. Si c'est le cas, le tableau de bord B2B s'affiche. Sinon, le tableau de bord B2C s'affiche. C'est entièrement natif et instantané.
Mise en page du tableau de bord B2B
Pour un acheteur B2B connecté, le tableau de bord fait apparaître :
1. En-tête de bienvenue
- Bonjour, [prénom] — accueil convivial
- Nom de la company — tiré de la fiche company de l'acheteur
- Badges de la company — NET-30 / NET-60 / NET-90 et Exonéré de taxes
- Livraison actuelle — court résumé de l'adresse de livraison actuellement sélectionnée par l'acheteur
2. Carte commercial (variante complète)
Si vous avez renseigné les métachamps commercial par company (vertex.rep_name / vertex.rep_email / vertex.rep_phone dans Customers ▸ Companies ▸ [company] ▸ Metafields), le tableau de bord affiche une carte commercial complète — plus grande que la pastille plus petite de l'en-tête.
La carte comprend :
- Nom du commercial (avec un avatar d'initiale)
- Email du commercial (clic pour envoyer un e-mail)
- Téléphone du commercial (clic pour appeler)
Consultez le guide de configuration des métachamps pour les renseigner.
La carte commercial utilise les coordonnées du commercial que vous renseignez pour chaque company. Tous les acheteurs rattachés à la même company voient le même commercial.
3. Liste de réorganisation rapide
La fonctionnalité B2B la plus appréciée. Affiche les 5 dernières commandes de l'acheteur avec :
- Numéro de commande et date
- Total et nombre d'articles
- Bouton Tout réorganiser (un clic — réajoute chaque ligne au panier aux prix actuels)
- Badge de statut de commande (Exécutée / Partielle / Non exécutée / Annulée)
- Lien vers la vue complète d'une seule commande
Aucune application requise — la réorganisation rapide est intégrée à Vertex.
Si un article d'une commande d'origine n'est plus dans le catalogue de l'acheteur, la réorganisation le saute et fait apparaître une petite note : « 2 articles de la commande #1234 ne sont plus disponibles et ont été ignorés. » Les acheteurs peuvent toujours examiner le panier avant le passage à la caisse.
4. Grille de liens rapides
Une grille des actions canoniques du compte B2B :
- Toutes les commandes — historique complet des commandes
- Adresses — gérer les adresses de livraison
- Commande en gros — lien vers la page de commande en gros (coller-au-panier)
- Demander un devis — lien vers la page RFQ
- Catalogue — lien vers la vitrine filtrée par leur catalogue B2B
5. Activité récente
Une timeline condensée des 10 dernières actions de l'acheteur :
- Commandes passées
- Adresses ajoutées ou mises à jour
- Demandes de devis soumises
Mise en page du tableau de bord B2C
Pour un client non-B2B, le tableau de bord est plus simple :
- En-tête de bienvenue (pas d'informations company, pas de badge de conditions de paiement)
- Liste des commandes (pagination complète)
- Carte Adresse par défaut avec liens modifier et gérer
- Pas de carte commercial (les clients B2C n'ont pas de commercial attribué)
- Pas de liste de réorganisation rapide (CTA unique « Voir les commandes » — les acheteurs réorganisent depuis la vue d'une seule commande)
Le tableau de bord B2C est conçu pour être rapide et sans encombrement — la plupart des clients B2C veulent vérifier le statut d'une commande, pas interagir avec une interface company.
Flux de réorganisation rapide
La réorganisation rapide est disponible sur deux surfaces :
Surface 1 — Liste des 5 dernières commandes du tableau de bord
(Décrite ci-dessus.) « Tout réorganiser » en un clic par commande, faisant apparaître les 5 plus récentes. Les acheteurs qui recommandent le même kit chaque semaine adorent cela — c'est deux clics depuis la connexion jusqu'à un panier entièrement chargé.
Surface 2 — Vue d'une seule commande
Pour les commandes plus anciennes ou pour ne réorganiser qu'un sous-ensemble, la vue d'une seule commande affiche :
- Bouton « Réorganiser cet article » par ligne sur chaque ligne — ajoute une variante à la quantité d'origine
- Champ de quantité par ligne afin que l'acheteur puisse modifier la quantité avant ajout (par défaut, à la quantité d'origine de la commande)
- Bouton « Réorganiser tous les articles » de la commande complète en bas — ajoute chaque ligne à la quantité d'origine
Le même comportement d'articles ignorés que la réorganisation du tableau de bord, juste à une granularité plus fine.
Les réorganisations utilisent le prix actuel du catalogue de l'acheteur — et non le prix historique de la commande. C'est important pour le B2B : les prix contractés changent et réorganiser à un ancien prix entrerait en conflit avec le nouveau catalogue. Si un acheteur a besoin que l'ancien prix soit honoré, il doit contacter son commercial et soumettre un devis.
Acheteurs multi-locations
Certains acheteurs B2B sont rattachés à plusieurs companies (par exemple, un responsable Accounts Payable d'entreprise qui passe des commandes pour 5 filiales). Pour ces acheteurs, Vertex affiche automatiquement un sélecteur de company dans le pied du tiroir mobile et dans la barre d'accueil desktop.
Où s'affiche le sélecteur
- Desktop (≥1170px) — dans la barre d'accueil B2B ambre (haut de l'en-tête) lorsque plus d'une company est disponible
- Mobile et tablette (<1170px) — en bas du pied du tiroir hamburger, au-dessus des pastilles langue et devise
Les acheteurs à company unique ne le voient pas — interface épurée. Le sélecteur est entièrement accessible au clavier et s'accorde à tous les autres menus déroulants de Vertex.
Comment fonctionne le basculement
Lorsque l'acheteur choisit une location de company différente, Shopify recharge la page avec la nouvelle company en session. Le catalogue, la tarification, les conditions de paiement, la livraison et le statut d'exonération fiscale basculent tous vers la nouvelle company. Le panier est préservé s'il est compatible, ou vidé avec un avertissement sinon. Tout est natif — pas d'application, pas de synchronisation manuelle.
Connexion, créer un compte, activer, réinitialiser le mot de passe
Tous les écrans d'authentification ont été repensés dans le design system Vertex. Ils partagent un langage visuel cohérent :
- Mise en page de carte centrée avec la police de titre et la police de corps de la vitrine
- Logo et petit titre en haut de la carte
- Formulaire en une colonne avec des champs pleine largeur (cibles tactiles de 52 px, anneau de focus visible, label en haut)
- Bouton CTA principal dans la couleur d'accent de la vitrine
- Liens secondaires en dessous — « Mot de passe oublié ? », « Créer un compte », « Vous avez déjà un compte ? »
- Pied de page de la vitrine sous la carte (léger — juste les liens légaux et copyright)
Écran de connexion
- Email et mot de passe
- Lien « Mot de passe oublié ? »
- CTA « Créer un compte »
- (Ajout B2B) — petite note : « Besoin d'un compte trade ? Demander l'accès → »
Écran de création de compte
- Prénom, nom, email, mot de passe
- CTA « Créer un compte »
- (Ajout B2B) — petite note : « Client trade existant ? Se connecter → »
Comportement Shopify standard : les nouveaux comptes passent par une vérification par email avant de pouvoir se connecter. Les nouveaux comptes B2B sont créés par le marchand via Customers ▸ Companies — ils ne s'auto-enregistrent pas.
Écran d'activation de compte
Pour les clients invités par le marchand. Ils arrivent sur cette page depuis l'email d'invitation et définissent leur mot de passe.
Écran de réinitialisation du mot de passe
Deux écrans en un :
- Demander la réinitialisation — saisie email uniquement + CTA « Envoyer le lien de réinitialisation »
- Définir un nouveau mot de passe — nouveau mot de passe + confirmer le mot de passe + CTA « Mettre à jour le mot de passe » (après avoir cliqué sur le lien email)
Personnalisation dans l'éditeur de thème
Les écrans de compte client sont éditables dans l'éditeur de thème, où Vertex expose un petit ensemble de paramètres de section. La personnalisation y est volontairement restreinte — la structure du tableau de bord est fixe, et les contrôles ci-dessous sont ceux que Vertex fournit.
Ouvrir le tableau de bord dans l'éditeur de thème
- Ouvrez Online Store ▸ Themes ▸ Customize
- Dans le menu déroulant de modèle en haut, choisissez Customers ▸ Account
- L'éditeur de thème affiche désormais le tableau de bord du compte avec la section Account dans la barre latérale gauche
La section Account maintient la personnalisation délibérément réduite — il y a exactement deux paramètres, tous deux sous l'en-tête Layout de la section :
| Personnaliser | Comment |
|---|---|
| Recent orders to show | Paramètres de section → « Recent orders to show » → contrôle le nombre de commandes récentes que la liste de réorganisation rapide fait apparaître. Plage 3 à 10, par défaut 5. |
| Show Quick actions card | Paramètres de section → « Show Quick actions card » → active ou désactive la carte des actions rapides (activée par défaut). |
| Visibilité de la carte commercial | Automatique — la carte s'affiche quand le métachamp vertex.rep_name de la company est renseigné et que l'acheteur est connecté ; elle est masquée pour les clients B2C et en mode B2C seul. Il n'y a pas de bascule par section. |
Le tableau de bord de Vertex s'affiche à l'intérieur de l'expérience nouveaux comptes clients de Shopify. Le message de bienvenue, les onglets commandes et profil, et l'habillage général de la page viennent directement de Shopify — la marque (nom de la boutique, logo, couleurs) s'édite dans Settings ▸ Customer accounts dans l'admin Shopify, pas dans cette section. Les deux paramètres ci-dessus sont les seuls contrôles au niveau du thème que Vertex superpose.
Pour la vue d'une seule commande (la section Order), il existe un paramètre :
| Personnaliser | Comment |
|---|---|
| Show print invoice link | Paramètres de section → « Show print invoice link » → active ou désactive le lien d'impression de facture sur la page de détail de la commande (activé par défaut). |
Lectures associées
- Aperçu — Pourquoi le compte client de Vertex est sensible au B2B
- Installation — Les modèles de compte client sont livrés activés
- Guide de configuration B2B — Créer des companies, des locations de livraison, des conditions de paiement
- Guide de configuration des métachamps — Où renseigner les métachamps commercial qui pilotent la carte commercial
- Guide des modes vitrine — Comment Hybride / B2B uniquement / B2C uniquement interagissent avec le tableau de bord
- Markets & multi-devises — Comment la devise s'affiche dans le compte client
- Guide de la page RFQ — Le CTA « Demander un compte trade » sur l'écran d'inscription
- Référence des paramètres de thème — Paramètres liés au compte
- FAQ + dépannage — Questions courantes sur le compte
Résumé
- La suite Compte client de Vertex est sensible au B2B — mêmes écrans, deux mises en page, auto-détectées.
- Le tableau de bord B2B fait apparaître les informations de la company, le badge des conditions de paiement, la carte commercial complète, les 5 dernières commandes avec réorganisation rapide et une grille de liens rapides.
- Le tableau de bord B2C est conçu pour être rapide — juste les commandes et l'adresse par défaut.
- La réorganisation rapide fonctionne depuis le tableau de bord ET depuis la vue d'une seule commande — aucune application requise.
- Les acheteurs multi-companies obtiennent un sélecteur de company dans le pied du tiroir mobile et la barre d'accueil desktop.
- Les écrans de connexion, création de compte, activation et réinitialisation du mot de passe repensés dans le design system Vertex.
- La section Account expose deux paramètres de thème (nombre de commandes récentes et la carte Quick actions) ; la section Order ajoute une bascule d'impression de facture.