Sections B2B exclusives
Voici les sections conçues spécifiquement pour les flux de travail B2B : la barre d'accueil qui apparaît automatiquement pour les acheteurs d'entreprise connectés, la bande promotionnelle sur la page d'accueil qui présente les fonctionnalités B2B aux visiteurs, la page de commande en gros par copier-coller, le tableau comparatif côte à côte, la page RFQ et le bloc de commande rapide en ligne.
Chacune de ces sections fonctionne avec le B2B natif de Shopify (aucune application, aucun abonnement). Lorsque le B2B n'est pas activé dans votre boutique, les sections à vocation marketing (promotion des fonctionnalités B2B, commande en gros, comparateur, RFQ) fonctionnent toujours comme des sections soignées : les acheteurs ne verront simplement pas les éléments spécifiques à l'entreprise, comme les paliers de prix par volume dans le devis.
Vertex lit les quantity_price_breaks rendus côté serveur depuis le catalogue B2B natif de Shopify. Les acheteurs voient automatiquement les prix par paliers corrects sur la PDP, le panier et la page de commande en gros : aucun recalcul JS, aucun délai de synchronisation d'application. Il suffit de configurer les catalogues B2B dans l'admin Shopify.
b2b-greeting-bar
Fichier de section : sections/b2b-greeting-bar.liquid
La bande ambrée qui apparaît au-dessus de l'en-tête principal pour les acheteurs d'entreprise connectés. Déjà couverte dans En-tête, pied de page et habillage — cette section figure également ici car c'est le point de contact B2B le plus visible.
Aucun paramètre marchand. S'affiche automatiquement selon :
customer.b2b? AND customer.current_company AND settings.storefront_mode != 'b2c'
Éléments affichés : nom de l'entreprise, badge des conditions NET, badge exonéré de taxe, pastille de langue, pastille de devise, sélecteur d'adresse de livraison (statique avec 1 emplacement, déroulant avec 2 ou plus).
Visibilité : ordinateur (≥ 1170px) uniquement — sur mobile, les mêmes données passent dans la section compte du tiroir hamburger.
b2b-feature-promo
Fichier de section : sections/b2b-feature-promo.liquid
Bande sur la page d'accueil qui présente aux visiteurs les fonctionnalités exclusivement B2B : prix par volume, commande en gros, RFQ, NET-30 — afin que les visiteurs qui ignoraient leur existence puissent accéder à une inscription revendeur ou à une RFQ.
Paramètres par bloc : icône (image / SVG), titre, corps, lien optionnel.
Masquée automatiquement pour les acheteurs B2B connectés. La promotion s'adresse aux visiteurs ; les revendeurs connectés ont déjà accès aux fonctionnalités annoncées, et l'afficher serait donc redondant. La vérification conditionnelle est :
{% unless customer.b2b? %}
{% render 'b2b-feature-promo' %}
{% endunless %}
Schémas de blocs courants
| Icône | Titre | Corps |
|---|---|---|
| Pile | Prix par volume | Remises unitaires par paliers à chaque taille de commande, appliquées automatiquement au paiement. |
| Tableur | Commande en gros | Collez les lignes SKU, quantité depuis un tableur. Nous validons et ajoutons au panier en un clic. |
| Document | Conditions NET-30 | Les comptes qualifiés bénéficient de conditions de paiement à 30 jours sans intérêts. Postulez dans le formulaire d'inscription revendeur. |
| Devis | Demander un devis | Tarification personnalisée pour les demandes en gros, les devis de projets et la tarification contractuelle. |
Au-dessus de la ligne de flottaison (juste sous le hero), elle accroche les visiteurs qui parcourent — mais elle décale tout le reste vers le bas. En dessous de la ligne de flottaison, c'est utile lorsque vous voulez que les revendeurs connectés la passent sans pénalité de défilement.
main-bulk-order
Fichier de section : sections/main-bulk-order.liquid
Template : templates/page.bulk-order.json → à assigner à /pages/bulk-order
La page de commande en gros par copier-coller. Les acheteurs collent des lignes SKU,quantité depuis un tableur ; la page valide chaque ligne par rapport au catalogue et ajoute l'ensemble du panier en un clic. Les SKU invalides sont signalés en ligne.
Paramètres
| Paramètre | Type | Notes |
|---|---|---|
| Titre | Texte | « Commande en gros » / « Bloc de commande rapide ». |
| Texte d'introduction | Richtext | Bloc d'instructions courtes (ou utilisez le bloc Instructions). |
| Colonnes | Sélection | sku_qty · sku_qty_notes · sku_qty_notes_ship. Détermine le nombre de colonnes affichées par le bloc. |
| Libellé de soumission | Texte | Par défaut : « Tout ajouter au panier ». |
| Palette de couleurs | Sélection | Liste déroulante standard de palette de couleurs. |
Bloc Instructions
Ajoutez un bloc Instructions pour afficher un texte rassurant à côté du bloc : « Collez votre liste de SKU — un par ligne, quantités séparées par des virgules. Nous validerons par rapport à votre catalogue avant l'ajout au panier. »
Comment se déroule la validation
- Chaque SKU est vérifié par rapport au catalogue de l'acheteur (les acheteurs B2B obtiennent la portée du catalogue d'entreprise ; les visiteurs obtiennent l'ensemble de la vitrine)
- Les SKU invalides sont surlignés en rouge avec une erreur en ligne
- Les SKU valides sont ajoutés en une seule mise à jour du panier (un seul aller-retour réseau, pas de conditions de concurrence)
- Les règles de quantité (MOQ, max, conditionnement) sont appliquées au moment de la validation
Compatibilité B2B
Pour les acheteurs B2B connectés, la page de commande en gros lit automatiquement le catalogue B2B de leur entreprise. Les SKU absents du catalogue échoueront à la validation même s'ils existent sur la vitrine. C'est intentionnel : les acheteurs ne doivent pouvoir commander que ce qui figure dans leur contrat.
→ Montez-la sur une page (généralement /pages/bulk-order) en sélectionnant le template page.bulk-order.json dans l'éditeur de page. Consultez le guide de configuration B2B pour assigner le catalogue qui pilote la validation.
main-compare
Fichier de section : sections/main-compare.liquid
Template : templates/page.compare.json → à assigner à /pages/compare
Tableau de comparaison de produits côte à côte. Jusqu'à 4 produits. Session uniquement : effacé lorsque l'acheteur ferme le navigateur. Ce n'est pas une liste de souhaits (la politique du Theme Store de Shopify interdit les listes de souhaits persistantes sans application).
Comment ça fonctionne
- L'acheteur clique sur + Comparer sur une fiche produit ou une PDP
- Le produit est ajouté à une clé
sessionStoragevertex_compare - La barre de comparaison (tiroir collant en bas, voir ci-dessous) affiche jusqu'à 4 vignettes de produits
- L'acheteur clique sur Comparer dans le tiroir → redirection vers
/pages/compare - La page de comparaison affiche un tableau spécification par spécification avec chaque produit en colonne
Paramètres
| Paramètre | Type | Notes |
|---|---|---|
| Titre | Texte | « Comparer des produits ». |
| Texte d'introduction | Richtext | Optionnel. |
| Titre de l'état vide | Texte | Affiché lorsqu'aucun produit n'est en comparaison. « Ajoutez des produits à comparer ». |
| Corps de l'état vide | Richtext | « Parcourez le catalogue et cliquez sur ⊕ Comparer sur n'importe quelle fiche produit. Jusqu'à 4 produits. ». |
Ce que la comparaison affiche
Par colonne de produit : image, titre, prix, spécifications clés (depuis le métaobjet tech_spec_row), MOQ, expédié depuis, bouton ATC. Les lignes qui diffèrent entre les produits sont mises en évidence visuellement pour faciliter le balayage.
Snippet compare-bar
Fichier de snippet : snippets/compare-bar.liquid
Le tiroir collant en bas qui apparaît dès que la liste de comparaison contient au moins un produit. Il affiche 4 emplacements de produits (remplis ou vides), un bouton Comparer (désactivé jusqu'à ce que 2 produits ou plus soient ajoutés) et un lien Tout effacer.
Le snippet est inclus depuis theme.liquid afin d'apparaître sur chaque page. Il ne s'affiche que lorsque sessionStorage.vertex_compare contient au moins une entrée.
main-rfq
Fichier de section : sections/main-rfq.liquid
Template : templates/page.rfq.json → à assigner à /pages/rfq
La page de demande de devis. Disposition en 2 colonnes : formulaire de contact à gauche, carte de contact / horaires / adresse à droite. Utilise le modèle de formulaire de contact natif de Shopify — aucune application de gestion des devis nécessaire.
Paramètres
| Paramètre | Type | Notes |
|---|---|---|
| Titre | Texte | « Demander un devis ». |
| Texte d'introduction | Richtext | Brève réassurance + délai de réponse attendu. |
| Nom du contact | Texte | Titre de la colonne de droite — « Parlez à un spécialiste ». |
| E-mail de contact | Texte | Lien mailto. |
| Téléphone de contact | Texte | Lien tel. |
| Horaires | Texte | Par exemple, « Lun.–Ven. · 8 h – 18 h ET ». |
| Adresse | Richtext | Bloc d'adresse multi-lignes. |
| Code d'indice NET-30 | Texte | Un code que les acheteurs mentionnent en postulant pour NET-30 (« Mentionnez RFQ-NET30 dans votre message »). |
Champs du formulaire
Le formulaire est soumis au point d'accès natif du formulaire de contact de Shopify :
- Nom (obligatoire)
- Entreprise (obligatoire)
- E-mail (obligatoire)
- Téléphone (optionnel)
- Secteur d'activité (sélection, optionnel)
- Volume de commande estimé (sélection, optionnel)
- Option NET-30 (case à cocher) — ajoutée au corps du message lorsqu'elle est cochée
- Message (obligatoire)
- Pièce jointe (optionnelle, native Shopify)
La soumission arrive dans l'e-mail de notification de votre admin Shopify comme une entrée de formulaire de contact standard. Aucune intégration tierce.
Le modèle de formulaire de contact intégré garde Vertex pleinement conforme à la politique du Theme Store et sans coût. Si vous avez besoin du suivi des devis, de flux de candidature aux conditions NET ou de l'intégration CRM de l'équipe commerciale, associez avec le B2B natif de Shopify (acheteurs rattachés à une entreprise) ou une application de votre choix : la page RFQ de Vertex fonctionne dans les deux cas.
quick-order
Fichier de section : sections/quick-order.liquid
Le bloc de commande rapide par copier-coller en ligne — le même moteur que main-bulk-order, mais sous forme de section prête pour la page d'accueil que vous pouvez insérer dans le flux marketing.
Paramètres
| Paramètre | Type | Notes |
|---|---|---|
| Titre | Texte | « Commande rapide ». |
| Texte d'introduction | Richtext | Réassurance d'une ligne — « Vous savez déjà ce qu'il vous faut ? Collez les SKU ci-dessous. ». |
| Lignes | Nombre | Par défaut 5. Nombre de lignes de saisie affichées initialement. Le bouton « + Ajouter une ligne » en ajoute davantage. |
| Libellé de soumission | Texte | « Ajouter au panier ». |
| Afficher le lien « Aller à la commande en gros » | Case à cocher | Activé par défaut. Renvoie à /pages/bulk-order pour les acheteurs qui ont besoin de plus de lignes ou souhaitent la validation des SKU. |
Quand l'utiliser plutôt que main-bulk-order
| Cas d'usage | Utiliser |
|---|---|
| Page d'accueil, entre le hero et la collection mise en avant | quick-order |
/pages/bulk-order dédiée pour les utilisateurs avancés | main-bulk-order |
| Bande 50/50 associée à des logos de marques | dual-brands-quickorder (voir Marketing de la page d'accueil) |
Même moteur de validation, même prise en charge du catalogue B2B, même ajout au panier en un clic. La différence est la disposition (5 lignes par défaut en ligne ou bloc pleine page) et la visibilité.
Aide-mémoire de visibilité des sections B2B
| Section | Visiteur | B2C connecté | B2B connecté |
|---|---|---|---|
b2b-greeting-bar | Masquée | Masquée | Visible (ordinateur uniquement, tiroir sur mobile) |
b2b-feature-promo | Visible | Visible | Masquée |
main-bulk-order | Visible (catalogue vitrine) | Visible (catalogue vitrine) | Visible (catalogue d'entreprise) |
main-compare | Visible | Visible | Visible |
main-rfq | Visible | Visible | Visible (le formulaire pré-remplit nom/e-mail/entreprise) |
quick-order | Visible (catalogue vitrine) | Visible (catalogue vitrine) | Visible (catalogue d'entreprise) |
Et ensuite
- Sections de la fiche produit → — Prix par volume, MOQ, carte du commercial sur la PDP
- En-tête, pied de page et habillage → — Détails du cycle de vie de la barre d'accueil
- Marketing de la page d'accueil → — Où placer la promo B2B + la commande rapide sur la page d'accueil
- Guide de configuration B2B → — Activer le B2B natif de Shopify + catalogues + entreprises
- Guide des modes de vitrine → — Hybride vs B2B uniquement vs B2C uniquement