Sections de la page produit (PDP)
Le modèle de produit Vertex est construit pour les catalogues techniques — acheteurs qui se soucient des numéros de pièce, des spécifications, des fiches techniques, des MOQ, des paquets et de la tarification par volume. Chaque point de contact B2B (paliers de volume, tarification réservée aux connectés, règles de quantité, carte commercial, expédition depuis, badge conditions NET) s'affiche en ligne sur la PDP sans une seule application complémentaire.
Le même modèle product.json s'affiche pour les invités et les acheteurs B2B connectés. Les prix, badges, règles de quantité et carte commercial reflètent automatiquement le catalogue d'entreprise et les conditions de paiement du client — vous n'avez pas besoin d'un « modèle produit B2B » et d'un « modèle produit B2C » comme fichiers parallèles.
main-product
Fichier de section : sections/main-product.liquid
La PDP elle-même — galerie, titre, prix, sélecteur de variantes, entrée de quantité, ATC et chaque surface adaptée au B2B empilée dans une seule section. Chaque bloc ci-dessous est un bloc de section main-product que vous pouvez réorganiser dans le customizer.
Galerie
- Image principale avec survol d'image sur les cartes de liste (2+ images requises)
- Vignettes sous l'image principale
- Cliquer-pour-zoomer (lightbox)
- Mobile : carrousel swipable avec points
Titre + meta
- Titre du produit
- Vendeur (si affiché)
- Étiquette d'expédition depuis — métachamp par produit
vertex.ships_fromou défaut à l'échelle du thème - Ligne MPN — quand
vertex.mpnest défini, affiche « MPN : 1N4148 » sous le titre
Bloc prix
La surface de tarification est adaptée au B2B par défaut :
- Paliers de tarification par volume — rendus côté serveur depuis le
quantity_price_breaksde Shopify. Les acheteurs voient « 1 à 9 : 4,50 $ · 10 à 49 : 4,10 $ · 50+ : 3,80 $ » en ligne. S'affiche automatiquement quand la variante aquantity_price_breaks_count > 0. - Tarification réservée aux connectés — quand le paramètre de thème Masquer les prix jusqu'à la connexion du client est activé, les prix sont remplacés par « Connectez-vous pour voir la tarification » + un lien de connexion pour les invités.
- Prix comparé B2B — affichage barré quand le prix du catalogue B2B est inférieur au prix de la vitrine.
Sélecteur de variantes
S'affiche sous forme de boutons stylisés (swatches pour la couleur, boutons de taille pour la taille, menu déroulant pour les autres axes). Les variantes en rupture sont visuellement désactivées (barrées) mais toujours sélectionnables afin que l'acheteur voie les alternatives.
Entrée de quantité
Les règles de quantité sont appliquées à la fois côté client et côté serveur :
| Règle | Comportement |
|---|---|
| MOQ (minimum) | Ne peut pas décrémenter en-dessous du MOQ. Message en ligne : « Commande minimum : 12 ». |
| Maximum | Ne peut pas incrémenter au-dessus du max. Message en ligne : « Maximum : 144 ». |
| Incrément par paquet | Pas par taille de paquet. La saisie manuelle arrondit à la prochaine valeur valide avec une petite notification toast. |
Les acheteurs rattachés à un catalogue B2B obtiennent les règles de quantité spécifiques à l'entreprise ; les invités obtiennent les règles de la vitrine. Les deux proviennent de l'API native de Shopify — Vertex se contente de les rendre.
Ajouter au panier + Acheter maintenant
- Ajouter au panier — ATC standard, désactivé en rupture sauf si la précommande est activée
- Acheter maintenant — boutons de paiement accéléré de Shopify (Shop Pay, Apple Pay, Google Pay, PayPal). Optionnel via les paramètres Shopify.
- Précommande — quand la variante est commandable en différé, remplace « Épuisé » par « Précommande » (utilise le suivi d'inventaire natif de Shopify)
- Alerte de retour en stock — quand la variante est en rupture et que la précommande est désactivée, affiche un formulaire d'inscription par e-mail (natif, sans app supplémentaire)
Carte commercial
Pour les acheteurs B2B connectés, une carte commercial apparaît sur la PDP montrant le commercial assigné de l'entreprise :
- Nom (depuis
vertex.rep_name) - E-mail (depuis
vertex.rep_email, sous forme de lienmailto:) - Téléphone (depuis
vertex.rep_phone, sous forme de lientel:)
S'affiche seulement quand au moins un champ commercial est populé et que le client est customer.b2b?.
Fil d'Ariane
Auto-généré depuis la collection principale du produit. Émet le JSON-LD BreadcrumbList.
Bloc tableau de spécifications techniques
Bloc tech-specs — affiche un tableau de spécifications épuré à 2 colonnes depuis vos données de spécifications techniques. Utilisez pour dimensions, poids, matériau, tension, capacité, certifications.
→ Voir le Guide de configuration des métachamps pour la population.
Bloc Documents & téléchargements
Bloc documents — affiche une liste de téléchargements PDF depuis les métachamps produit :
- Fiche technique (
vertex.datasheet) - MSDS (
vertex.msds) - Brochure (
vertex.brochure) - Fiche technique (
vertex.tech_sheet) - Guide d'installation (
vertex.installation) - Carte de garantie (
vertex.warranty)
Se masque automatiquement par produit quand aucun document n'est attaché.
Disclosure historique des prix
Bloc price-history — section repliable « Historique des prix » qui lit depuis le métachamp vertex.price_history (liste d'entrées date+prix). Utile pour les acheteurs industriels surveillant les tendances du marché.
Compteur de stock (indicateur de stock faible)
Bloc stock-counter — repère d'urgence par variante. Il n'apparaît que pour les variantes dont vous suivez l'inventaire, et bascule vers l'avertissement « Plus que N » dès que le stock descend au seuil bas (10 unités). Encourage l'action sans révéler l'inventaire exact aux concurrents.
Affiche l'un de ces états :
- Stock suffisant (plus de 10) : « En stock »
- À 10 unités ou moins : « Plus que 4 en stock »
- Commandable en différé (zéro, mais configuré pour continuer à vendre) : « En réapprovisionnement — expédié sous 7 à 10 jours »
- Épuisé (zéro, non commandable en différé) : « Épuisé » (avec formulaire de retour en stock)
Quand Masquer les prix jusqu'à la connexion du client est activé, l'ensemble du bloc prix (y compris les paliers de volume et le prix comparé) est remplacé par un prompt « Connectez-vous pour voir la tarification » pour les invités. Les règles de quantité, le compteur de stock et la carte commercial s'affichent toujours afin que les acheteurs puissent décider si le produit vaut la peine de se connecter.
product-tabs
Fichier de section : sections/product-tabs.liquid
Bloc de section qui répartit le contenu PDP entre des onglets. Déposez cette section sous main-product dans votre modèle product.json pour réduire l'encombrement visuel sur les produits à longues spécifications.
Paramètres de bloc par onglet : titre, contenu (richtext / fichier / vidéo).
Patterns d'onglets courants :
- Description — texte marketing principal
- Spécifications — spécifications techniques étendues au-delà du tableau de spécifications techniques
- Fiche technique — lecteur PDF intégré
- Expédition & retours — infos logistiques
- Vidéo — YouTube / Vimeo intégrée
Les onglets utilisent <details> + <summary> natifs pour une accessibilité clavier complète. Le premier onglet est ouvert par défaut ; ouvrir un autre auto-ferme les autres (mode accordéon) ou reste ouvert (mode bascule) selon le paramètre de section Autoriser plusieurs ouverts.
related-products
Fichier de section : sections/related-products.liquid
Bande de recommandations sous la PDP. Tire depuis les produits de la même collection ou du même tag.
Paramètres :
| Paramètre | Notes |
|---|---|
| Heading | Par ex., « Les clients ont aussi consulté » ou « Vous pourriez aussi aimer ». |
| Source | same_collection (par défaut) · same_tag · manual. |
| Max products | 4 (par défaut) / 6 / 8 / 12. |
| Show price | Bascule. Respecte les règles de tarification réservée aux connectés. |
| Show vendor | Bascule. |
Pour les acheteurs de catalogue B2B, seuls les produits dans le catalogue de l'acheteur sont affichés (filtrage Shopify-natif — Vertex respecte cela de bout en bout).
recently-viewed
Fichier de section : sections/recently-viewed.liquid
Produits suivis par localStorage (jusqu'à 12 par acheteur). S'affiche en bas de la PDP et peut être déposé sur la page d'accueil sous forme de bande.
Comment ça marche
- Chaque vue de produit ajoute à une clé localStorage
vertex_recently_viewed(FIFO, plafonné à 12) - La section lit cette clé côté client et récupère le balisage de carte de chaque produit
- Effacé quand l'acheteur efface les données du navigateur — pas une liste de souhaits, non persisté sur Shopify
Paramètres
- Heading — « Récemment consultés »
- Max products — 4 / 6 / 8 / 12
- Hide if empty — bascule, par défaut activé (la section entière disparaît quand l'acheteur n'a pas d'historique de vue)
Une liste de souhaits persistante nécessite une application Shopify — Vertex reste conforme à la politique du Theme Store en gardant les récemment consultés strictement limités à la session/navigateur. La comparaison est le même pattern (voir Sections B2B uniquement).
sticky-cart
Fichier de section : sections/sticky-cart.liquid
Barre ATC fixe mobile uniquement qui apparaît après que l'acheteur défile au-delà de l'ATC principal. Garde l'ajout au panier à une tape près même quand ils sont au fond du tableau de spécifications.
Ce qui s'affiche
- Vignette d'image du produit (gauche)
- Titre + prix de la variante sélectionnée
- Entrée de quantité
- Bouton ATC (droite)
Paramètres
- Show on mobile only — par défaut activé (desktop a l'en-tête fixe pour la navigation ; mobile gagne plus de levée de conversion d'un ATC fixe)
- Show variant title — bascule
- Color scheme
La section utilise un IntersectionObserver sur l'ATC principal — elle ne s'affiche que quand l'ATC principal défile hors de la fenêtre d'affichage, et disparaît quand on défile à nouveau dans la vue.
Aide-mémoire des interactions B2B
| Surface | Invité | B2C connecté | B2B connecté |
|---|---|---|---|
| Bloc prix | Masqué si « Masquer les prix jusqu'à la connexion du client » activé | Prix vitrine | Prix catalogue B2B + paliers de volume |
| Paliers de tarification par volume | Masqués | Masqués | Visibles (rendus côté serveur) |
| Règles de quantité | MOQ/max vitrine | MOQ/max vitrine | MOQ/max catalogue d'entreprise |
| Carte commercial | Masquée | Masquée | Visible (quand les champs commercial sont populés) |
| Badge conditions NET | Masqué | Masqué | Visible dans la barre d'accueil (pas la PDP) |
| ATC précommande | Visible quand activé | Visible quand activé | Visible quand activé |
| Formulaire retour en stock | Visible en rupture | Visible en rupture | Visible en rupture |
| Compteur de stock | Visible | Visible | Visible |
| Récemment consultés | Visible (localStorage) | Visible (localStorage) | Visible (localStorage) |
Et ensuite
- Sections B2B uniquement → — Commande en masse, RFQ, comparaison, promo des fonctionnalités B2B
- Sections de boost des ventes → — Compteur de stock, alerte retour en stock, aperçu rapide
- En-tête, pied de page & chrome → — En-tête, pied de page, barre d'accueil B2B
- Guide de configuration B2B → — Activer B2B + populer les métachamps commercial
- Guide de configuration des métachamps → — Fiches techniques, MPN, expédition depuis, spécifications techniques