En-tête, pied de page & chrome du site
Le chrome est tout ce qui enveloppe votre vitrine — la barre d'annonce, l'en-tête (logo, navigation, recherche, compte, panier), la barre d'accueil B2B qui apparaît automatiquement pour les acheteurs d'entreprise connectés, et le pied de page. Dans Vertex, chaque pièce de ce chrome est adaptée au B2B dès le départ : les sélecteurs, badges et pilules commercial apparaissent automatiquement quand un acheteur d'entreprise est connecté, et se dégradent harmonieusement vers une mise en page B2C soignée lorsqu'il ne l'est pas.
Vous n'avez pas à choisir entre un « en-tête B2B » et un « en-tête B2C ». Vertex rend un seul en-tête — et superpose la barre d'accueil B2B ambrée au-dessus dès qu'un acheteur d'entreprise se connecte. Les invités obtiennent l'en-tête blanc épuré ; les acheteurs connectés obtiennent le même en-tête plus les badges de leur entreprise, la pilule des conditions NET, l'indicateur d'exonération de taxes et le sélecteur de lieu d'expédition.
Barre d'annonce
Fichier de section : sections/announcement-bar.liquid
La barre supérieure style APEX au-dessus de l'en-tête principal — texte à gauche, icône optionnelle à gauche (camion / éclair / cadenas), numéro de téléphone, icônes sociales et un × dismissible à droite. Deux schémas de couleurs livrés dès le départ : sombre et ambré.
Paramètres
| Paramètre | Type | Notes |
|---|---|---|
| Text | Texte riche | Message de valeur court — « Livraison gratuite pour les commandes de plus de 500 $ », « NET-30 disponible pour les acheteurs qualifiés ». Prend en charge les liens inline. |
| Left icon | Select | truck · lightning · lock · none. Associe un glyphe SVG au texte. |
| Phone number | Texte | Pilule de téléphone alignée à droite. Appuyer pour appeler sur mobile (lien tel:). |
| Instagram URL | URL | Icône sociale de marque. S'affiche seulement si rempli. |
| LinkedIn URL | URL | Icône LinkedIn. |
| X (Twitter) URL | URL | Icône X. |
| YouTube URL | URL | Icône YouTube. |
| Color scheme | Select | dark (par défaut) ou amber. |
Blocs de lien
Ajoutez des blocs Link pour insérer de petits liens texte dans la barre d'annonce — Offres spéciales, Devenir revendeur, Ressources. Chaque bloc prend un label et une url.
Dismissible
Le bouton × à droite ferme la barre d'annonce pour le visiteur actuel. L'état est persisté en localStorage via assets/announcement-dismiss.js, donc la barre reste masquée jusqu'à ce que le visiteur efface les données du site.
Le schéma ambré correspond à la couleur d'accent de la barre d'accueil B2B. Utilisez-le quand votre annonce est une proposition de valeur B2B (conditions NET-30, inscription revendeur, RFQ). Utilisez le schéma sombre pour le marketing général.
En-tête principal
Fichier de section : sections/header.liquid
La surface de navigation principale — logo, texte de marque, menu primaire, menu secondaire optionnel, recherche prédictive, sélecteurs de locale et devise, compte et panier.
Paramètres
| Paramètre | Type | Notes |
|---|---|---|
| Logo | Image | Recommandé : SVG ou PNG 2x. Contraint à une hauteur max définie par le paramètre numérique Logo max height. |
| Brand text override | Texte | Texte optionnel utilisé quand aucun logo n'est présent (par ex., « Vertex Supply »). S'affiche dans la typeface de titre. |
| Primary menu | Liste de liens | La navigation principale. Chaque élément de menu parent obtient un menu déroulant piloté par ses éléments enfants. |
| Submenu style | Select | auto · mega · dropdown. Auto choisit méga quand un parent a 8+ enfants ou qu'une disposition en grille est détectée ; sinon il rend un menu déroulant à plat. |
| Secondary menu | Liste de liens | Nav utilitaire alignée à droite (Offres spéciales · Guides · Services · FAQ). Auto-détectée par le handle de liste de liens secondary-menu si vous n'en choisissez pas une. |
| Search placeholder | Texte | Traduisible. Par défaut « Rechercher par produit, SKU ou numéro de pièce ». |
| Show locale switcher | Case à cocher | Par défaut activé. Masque/affiche la pilule de langue dans l'en-tête desktop et le tiroir mobile. |
| Show currency switcher | Case à cocher | Par défaut activé. Masque/affiche la pilule de devise. Même les acheteurs B2B mono-marché la voient à titre informatif afin qu'ils sachent toujours dans quelle devise ils paient. |
| Sticky on scroll | Case à cocher | Fixe l'en-tête à la fenêtre d'affichage au défilement. |
Ce qui s'affiche à droite du menu
Dans l'ordre de gauche à droite : input de recherche prédictive, pilule de langue, pilule de devise, pilule commercial (auto-affichée pour B2B), Compte, Compteur de panier.
La pilule commercial tire depuis les métachamps vertex.rep_name, vertex.rep_email, vertex.rep_phone de l'entreprise. Voir le guide de configuration B2B pour les détails de population.
Méga menu vs. simple menu déroulant
Le style de sous-menu est décidé par élément de menu parent via le paramètre menu_style. Deux formats :
- Méga menu — panneaux de grille multi-colonnes avec icônes optionnelles et une grille de marques dédiée. Utilisez pour Shop by category, Shop by brand, Industries — éléments parents avec 8+ enfants ou sous-catégories visuelles.
- Simple menu déroulant — liste à plat. Utilisez pour À propos, Ressources, Compte — éléments parents avec une poignée de pages.
Quand défini sur auto, Vertex choisit méga si le parent a ≥ 8 enfants ; sinon le simple menu déroulant.
Barre d'accueil B2B
Fichier de section : sections/b2b-greeting-bar.liquid
La bande ambrée qui se situe au-dessus de l'en-tête principal pour les acheteurs d'entreprise connectés. Aucun paramètre marchand — elle s'affiche automatiquement selon l'état du client.
Quand elle apparaît
Les trois conditions doivent être vraies :
customer.b2b?— le client est un acheteur B2B (entreprise), pas un compte B2Ccustomer.current_company— il est rattaché à au moins une entreprisesettings.storefront_mode != 'b2c'— le thème n'est pas épinglé en mode B2C uniquement
Si une seule échoue (invité, mode B2C uniquement, pas d'entreprise rattachée), la barre d'accueil ne s'affiche pas du tout.
Ce qu'elle affiche
- Nom d'entreprise — « Connecté en tant que
{company.name}» - Badge conditions NET — NET-30 / NET-60 / NET-90 depuis le métachamp de conditions de paiement de l'entreprise
- Badge exonération de taxes — depuis le statut fiscal natif de l'entreprise Shopify
- Pilule de langue — avatar style REP + code ISO + chevron
- Pilule de devise — avatar style REP + code ISO + chevron
- Sélecteur de lieu d'expédition — étiquette statique quand l'acheteur a un site ; menu déroulant complet quand il en a plusieurs
Sur les écrans ≤ 1169px la barre d'accueil se réduit et son contenu se déplace dans la section compte du tiroir hamburger. La bande ambrée n'apparaît qu'à ≥ 1170px (desktop) afin qu'elle ne se batte pas avec la barre de recherche pour l'espace vertical sur mobile.
→ Voir Sections B2B uniquement pour la surface de fonctionnalité complète.
Pied de page
Fichier de section : sections/footer.liquid
Le pied de page du site — menu, social, e-mail, icônes de paiement, newsletter, liens légaux.
Paramètres
| Paramètre | Type | Notes |
|---|---|---|
| Footer menu | Liste de liens | Nav de pied de page multi-colonnes. Chaque parent s'affiche comme en-tête de colonne. |
| Instagram URL | URL | S'affiche seulement si rempli. |
| Facebook URL | URL | S'affiche seulement si rempli. |
| LinkedIn URL | URL | S'affiche seulement si rempli. |
| X (Twitter) URL | URL | S'affiche seulement si rempli. |
| YouTube URL | URL | S'affiche seulement si rempli. |
| Texte | Vide par défaut. Quand rempli, s'affiche comme lien mailto: dans la colonne de contact. | |
| Show payment icons | Case à cocher | Par défaut activé. Utilise shop.enabled_payment_types pour que vous n'ayez pas à maintenir la liste vous-même. |
| Newsletter heading | Texte | Par ex., « Rejoignez la liste négoce ». |
| Newsletter intro | Richtext | Court texte de réassurance — « Lancements mensuels, pas de spam ». |
| Legal menu | Liste de liens | Confidentialité · Conditions · Remboursement · Cookies. Retombe automatiquement sur vos URLs /policies/* si vous laissez le menu vide. |
Formulaire newsletter
Le bloc newsletter utilise le formulaire customer-newsletter natif de Shopify, donc les abonnés sont écrits dans votre liste de clients Shopify (avec le flag accepts-marketing newsletter). Aucune intégration tierce requise.
Vous ne choisissez pas les icônes de paiement à la main — Vertex lit shop.enabled_payment_types et n'affiche que les icônes que vous avez activées dans les paramètres de paiement de Shopify. Activez Apple Pay dans Settings → Payments → il apparaît dans le pied de page. Désactivez-le → il disparaît.
Recherche prédictive
Fichier de section : sections/predictive-search.liquid (rendu par header.liquid)
Se déroule depuis l'input de recherche au fur et à mesure que l'acheteur tape. Affiche quatre panneaux :
- Produits — vignette d'image, titre, vendeur, prix. Reconnaît les numéros de pièce fabricant via le métachamp
vertex.mpn(donc rechercher1N4148trouve la diode par numéro de pièce). - Collections — titre + image.
- Pages — titre + URL.
- Requêtes suggérées — suggestions de recherche natives de Shopify.
Reconnaissance MPN
Si vous populez le métachamp vertex.mpn (texte sur une ligne) sur un produit, la recherche prédictive fera correspondre les requêtes à ce champ en plus des titre / SKU / vendeur produit standards. Critique pour les catalogues techniques où les acheteurs cherchent par numéro de pièce plutôt que par nom de produit.
→ Voir le Guide de configuration des métachamps pour les détails de population.
Comportement responsive
L'en-tête a un point de rupture strict à 1170px — choisi pour que l'iPad Pro portrait (1024px) reste dans le flux hamburger mais que la plupart des laptops atterrissent dans la mise en page desktop.
| Viewport | Mise en page |
|---|---|
| < 1170px | Menu hamburger → tiroir. Le tiroir contient : menu primaire, menu secondaire, sélecteur de lieu d'expédition, pilules de locale + devise (grille à 2 colonnes), carte commercial (pleine largeur en bas), langue + connexion. |
| ≥ 1170px | Nav desktop complète. Panneaux méga menu / déroulants, input de recherche prédictive, pilules REP, pilule commercial, compte, panier. |
Panneaux déroulants personnalisés (pas de <select> natif)
Vertex utilise zéro élément <select> natif nulle part. Les sélecteurs de langue, devise et lieu d'expédition utilisent tous un système partagé <details> + <summary> + panneau personnalisé avec :
- États de survol
- Surlignage de la sélection actuelle + icône de coche
- Animation en fondu
- Exclusion mutuelle (ouvrir un ferme les autres)
- Fermeture au clic-extérieur
- Fermeture par Échap
- Navigation complète au clavier (touches fléchées + Entrée)
L'implémentation vit dans assets/global.js (cherchez le helper closeAllDetails()). Restyler ces menus déroulants est une question de surcharge des sélecteurs details[data-vertex-dropdown] — pas de JS requis.
Et ensuite
- Sections marketing de la page d'accueil → — Configurer le hero, la collection mise en avant, les témoignages, la FAQ, et les 25+ autres sections de page d'accueil
- Sections de la page produit → — Produit principal, onglets produit, produits associés, récemment consultés, panier fixe
- Sections B2B uniquement → — Barre d'accueil B2B (référence croisée), promo des fonctionnalités B2B, commande en masse, RFQ, comparaison
- Guide des modes Storefront → — Hybride vs B2B uniquement vs B2C uniquement
- Référence des paramètres de thème → — Chaque paramètre à l'échelle du thème expliqué