Vertex — Le thème Shopify B2B & vente en gros premium
Vertex est un thème Shopify Online Store 2.0 premium spécialement conçu pour les marchands de fourniture industrielle, MRO (maintenance, réparation & opérations), vente en gros, négoce et comptes revendeurs qui ont besoin que les fonctionnalités B2B natives de Shopify ressemblent réellement à une vitrine B2B — sans une seule application complémentaire, abonnement mensuel ou script tiers.
Chaque objet B2B natif de Shopify — tableaux de tarification par volume, application des règles de quantité, conditions de paiement NET-30 / NET-60 / NET-90, comptes exonérés de taxes, changement d'entreprise multi-sites, catalogues B2B, demandes de devis — s'affiche avec la finition qu'attendent vos acheteurs sous contrat. Les équipes d'approvisionnement, les responsables de sites et les comptes revendeurs obtiennent une vitrine qui reflète la clarté de catalogue de McMaster-Carr, Grainger et Fastenal tout en restant entièrement OS 2.0.
Prêt pour le B2C dès le départ
Vertex n'est pas réservé au B2B. Chaque fonctionnalité B2B se dégrade harmonieusement lorsqu'aucune entreprise n'est connectée, et une simple bascule Mode Storefront (Hybride / B2B uniquement / B2C uniquement) vous permet de décider de la quantité de chrome B2B à exposer. Le même thème fonctionne comme une vitrine B2C de fourniture industrielle soignée dès le premier jour — pas de seconde licence, pas de base de code parallèle.
À qui s'adresse Vertex
- Distributeurs de fourniture industrielle — fixations, quincaillerie, outils, abrasifs, fluides
- Fournisseurs MRO — consommables de maintenance, réparation, opérations
- Marchands de vente en gros — catalogues réservés au négoce avec tarification par paliers
- Distributeurs de pièces auto — catalogues axés sur la compatibilité avec des finders Marque / Modèle / Année
- Fournisseurs de bureau, IT & électronique — finders par marque / catégorie / capacité
- Fournisseurs d'impression & reprographie — finders par marque / modèle / couleur d'imprimante
- Marchands B2C de fourniture industrielle — vendant aux petites entreprises et aux clients finaux
Si vos acheteurs cherchent par numéro de pièce, s'attendent à des remises sur volume, passent des commandes de 50 lignes depuis un tableur, ont besoin de conditions NET-30, ou veulent de la documentation (fiches techniques, MSDS, certifications) intégrée à la page produit — Vertex a été construit pour eux.
Le catalogue complet des fonctionnalités
Cette section est la liste définitive de chaque fonctionnalité de Vertex v1.0.0. Chaque entrée renvoie à son guide dédié le cas échéant.
B2B natif (pas d'applications, pas d'abonnements)
| Fonctionnalité | Ce qu'elle fait |
|---|---|
| Tableaux de tarification par volume | Tarification par paliers rendue côté serveur depuis le quantity_price_breaks de Shopify. Les acheteurs voient le prix unitaire pour chaque palier de quantité sur la PDP, le panier et la page de commande en masse. |
| Application des règles de quantité | MOQ (quantité minimum de commande), quantité maximum de commande et incréments par paquet validés côté client (garde UI) et côté serveur (Shopify natif). |
| Tarification réservée aux connectés | Une seule bascule de paramètre de thème masque tous les prix pour les invités et les remplace par « Connectez-vous pour voir la tarification ». Les acheteurs ne voient les prix qu'après connexion. |
| Conditions NET-30 / NET-60 / NET-90 | Auto-détectées depuis le métachamp des conditions de paiement de l'entreprise. S'affichent sous forme de badge dans la barre d'accueil ambrée et au paiement. |
| Badges d'exonération de taxes | Auto-détectés depuis le statut fiscal natif de l'entreprise Shopify. S'affichent sur la PDP, le panier et la barre d'accueil. |
| Changement d'entreprise multi-sites | Les acheteurs rattachés à plusieurs entreprises peuvent basculer entre elles depuis un menu déroulant dédié dans le tiroir mobile. |
| Sélecteur de lieu d'expédition | Basculement en un clic entre les adresses de livraison autorisées de l'acheteur. S'affiche sous forme de menu déroulant stylisé dans la barre d'accueil B2B ambrée (desktop) et dans la section compte du tiroir mobile. |
| Cadrage du catalogue B2B | Les acheteurs ne voient que les produits + prix attribués au catalogue de leur entreprise via la fonctionnalité native Catalogues B2B de Shopify. Vertex respecte cela de bout en bout. |
| Page de commande rapide avec collage en masse vers le panier | Modèle dédié /pages/bulk-order. Les acheteurs collent des lignes SKU,qté depuis un tableur ; la page valide chaque ligne par rapport au catalogue et ajoute tout le panier en un clic. Les SKU invalides sont signalés en ligne. |
| Recommande rapide | Bouton « Recommander » sur les commandes passées. Recommande toute la commande en une fois OU ligne par ligne depuis le tableau de bord du compte client. |
| Page Demande de devis (RFQ) | Modèle dédié /pages/rfq utilisant le pattern de formulaire de contact natif de Shopify. Envoie un e-mail au marchand ; pas d'application de gestion de devis nécessaire. |
| Pilule de contact commercial | Informations du commercial par entreprise tirées des métachamps vertex.rep_name, vertex.rep_email, vertex.rep_phone. S'affiche sous forme de pilule fixée dans l'en-tête desktop (≥1170px) et sous forme de carte pleine largeur en bas du tiroir mobile (<1170px). |
| Barre d'accueil B2B | Bande ambrée au-dessus de l'en-tête qui affiche le nom d'entreprise de l'acheteur, le badge de conditions NET, le badge d'exonération de taxes, les sélecteurs de langue / devise / lieu d'expédition lorsque connecté. Se masque automatiquement pour les invités et le mode B2C uniquement. |
| Bande de promotion des fonctionnalités B2B | Bande de page d'accueil qui met en avant les fonctionnalités exclusivement B2B (tarification par volume, commande en masse, RFQ, NET-30) — visible pour les invités en tant que texte marketing. |
| Tableau de bord client adapté au B2B | Le modèle /account de compte détecte les acheteurs B2B et fait apparaître les informations de l'entreprise, les conditions de paiement, la recommande rapide et la carte de contact du commercial. |
→ Guide complet de configuration B2B
Page produit (PDP) — conçue pour les catalogues techniques
| Fonctionnalité | Ce qu'elle fait |
|---|---|
| Tableaux de spécifications techniques par métachamps | Un metaobject tech_spec_row dédié + les métachamps vertex.* affichent un bloc de spécifications épuré sur la PDP. Couvrent dimensions, poids, matériau, certifications, tension, capacité, etc. |
| Documents & téléchargements | Liens PDF par produit qui s'affichent automatiquement dans un bloc « Documents » : fiche technique, MSDS, brochure, fiche technique, guide d'installation, carte de garantie. Se masque automatiquement par produit lorsqu'aucun document n'est attaché. |
| Divulgation de l'historique des prix | Le métachamp optionnel vertex.price_history (liste d'entrées date+prix) affiche un bloc repliable « Historique des prix » sur la PDP. |
| Étiquette d'expédition depuis | Le métachamp par produit vertex.ships_from (ou la valeur par défaut du thème) s'affiche sous le titre — utile pour les distributeurs avec entrepôts régionaux. |
| Compteur de stock (indicateur de stock faible) | Compteur de stock par variante sur la PDP, seuil configurable. Encourage l'urgence sans révéler l'inventaire exact aux concurrents. |
| Alerte de retour en stock | Formulaire d'inscription par e-mail sur les variantes en rupture. Natif, sans application supplémentaire. |
| Bouton ATC de précommande | Les variantes marquées comme commandables en différé affichent un bouton « Précommande » au lieu de « Épuisé ». Utilise le suivi d'inventaire natif de Shopify. |
| Comparaison côte à côte de produits | Barre de comparaison fixe qui suit jusqu'à 4 produits ; modèle dédié /pages/compare qui affiche un tableau de comparaison complet par ligne de spécification. Session uniquement — pas une liste de souhaits. Pleinement conforme à la politique du Shopify Theme Store. |
| Modale d'aperçu rapide | Le bouton « Aperçu rapide » sur les cartes produit ouvre une modale avec la galerie produit, le sélecteur de variantes, l'entrée de quantité et l'ATC — sans quitter la liste. |
| Onglets produit | Bloc de section dédié pour la PDP qui répartit le contenu produit entre des onglets (Description / Spécifications / Fiche technique / Expédition / Vidéo). |
| Récemment consultés | Produits suivis par localStorage (jusqu'à 12 par acheteur) ; s'affichent en bas de la PDP. Effacés lorsque l'acheteur efface les données du navigateur. |
| Produits associés | Recommandations de la même collection ou du même tag sous la PDP. |
| Survol d'image sur les cartes produit | Lorsqu'un produit a 2+ images, le survol de la carte de la liste bascule vers la seconde image. |
En-tête, navigation, localisation
| Fonctionnalité | Ce qu'elle fait |
|---|---|
| Barre d'annonce | Barre supérieure style APEX avec emplacements de liens, icônes sociales, téléphone, et un × dismissible à droite (persisté en localStorage). Deux mises en page : sombre ou ambrée. |
| Deux mises en page d'en-tête (auto-appliquées) | Invité : en-tête principal blanc avec logo + recherche prédictive + pilules langue / devise + Connexion/Inscription + Panier. B2B connecté : identique + barre d'accueil ambrée au-dessus avec badges d'entreprise et sélecteurs. |
| Méga menu | Panneaux déroulants multi-colonnes avec icônes optionnelles et une grille dédiée « Shop-by-brand » (grille avec séparateurs fins). |
| Alternative en simple menu déroulant | Lorsque le marchand préfère une liste à plat par élément de menu parent. Auto-détecté ou forcé par paramètre. |
| Navigation secondaire alignée à droite | Offres spéciales / Guides / Services / FAQ — auto-détectée par handle si une liste de liens secondary-menu existe. |
| Superposition de recherche prédictive | Produits / collections / pages / requêtes suggérées avec vignettes d'image. Reconnaît les numéros de pièce fabricant via le métachamp vertex.mpn. |
| En-tête fixe au défilement | Bascule admin — fixe l'en-tête à la fenêtre d'affichage. |
| Sélecteurs style pilule REP | Langue + devise s'affichent sous forme de petites pilules avec avatar drapeau circulaire, pile de texte sur 2 lignes (sourcil + code ISO) et chevron. Le tiroir mobile possède les mêmes pilules en pleine largeur dans une grille à 2 colonnes pour une manipulation à une main. |
| Panneaux déroulants personnalisés | Zéro <select> natif nulle part. Langue, devise et lieu d'expédition utilisent tous un système partagé <details> + panneau personnalisé avec états de survol, surlignage de la sélection actuelle, icône de coche, animation en fondu, exclusion mutuelle, fermeture au clic-extérieur, fermeture par Échap. |
| Multi-devise via Shopify Markets | La pilule de devise s'affiche même pour les acheteurs B2B épinglés à un seul marché — à titre informatif afin qu'ils voient toujours dans quelle devise ils paient. |
| 5 langues livrées | Anglais (par défaut), Français, Italien, Allemand, Espagnol — chaînes UI complètes + chaînes de schéma dans locales/. |
| Prise en charge complète du RTL | <html dir> bascule automatiquement pour l'arabe, l'hébreu, le farsi, l'ourdou, le yiddish, le kurde, le divehi, le pachto. Peut être forcé via le paramètre de thème Localisation. |
| Point de rupture sensible aux tablettes | À <1170px (mobile + tablette), le tiroir hamburger prend le relais. À ≥1170px, la navigation desktop complète est affichée. |
→ Guide des modes Storefront · Guide Markets & multi-devise
Sections marketing (30+ dans la palette de la page d'accueil)
| Section | Objectif |
|---|---|
| Hero | Rotateur multi-diapositives avec avance automatique, navigation par points, composition éditoriale. Par défaut, livre 1 diapositive pour le LCP le plus rapide. |
| Collection mise en avant | Grille de produits ; accepte les blocs @app pour la conformité au Theme Store. |
| Liste de collections | Grille de catégories avec superpositions d'images. |
| Image avec texte | Pairage éditorial (texte + image, 50/50 ou asymétrique). |
| Multi-colonnes | Grille 2 à 4 colonnes (icônes + texte + lien optionnel). |
| Texte riche | Bloc d'introduction / à propos centré. |
| Bannière CTA | Appel à l'action pré-footer avec effet de chevauchement dans le footer ; texte par état client (invité vs B2B). |
| Newsletter | Inscription par e-mail avec bouton de souscription. |
| FAQ | Accordéon basé sur disclosure ; émet automatiquement FAQPage JSON-LD pour les snippets enrichis. |
| Liste de logos | Logos de marques défilants en marquee avec lignes de grille en fondu. |
| Témoignages | Cartes notées avec traitement d'en-tête à superposition d'avatar. |
| Barre de statistiques | Bande KPI en mode sombre (par ex., « 40 000+ SKUs · NET-30 · Expédition 24h · ISO 9001 »). |
| Grille d'industries | Grille de cartes éditoriales (par ex., CVC, Manufacture, Installations). |
| Hub de ressources | Liste de téléchargements — fiches techniques, MSDS, brochures. |
| Couverture presse | Bande de logos + citations clés. |
| Chronologie | Chronique pour la page À propos (année + jalon). |
| Grille de services | Tuiles avec superposition d'image pour les offres de services. |
| Compte à rebours | Jours / heures / minutes / secondes — promotionnel. |
| Bundles mis en avant | Cartes de bundles sélectionnés avec badges de remise. |
| Finder Marque/Modèle/Année | Menus déroulants en cascade (preset Throttle) — ou Marque/Capacité (OfficeIT) ou Marque/Modèle/Couleur d'imprimante (Inkline). |
| Bannière promo | Bannière supérieure dismissible avec persistance en localStorage. |
| Pop-up promo | Auto-ouverture + intention de sortie + localStorage ; cadence configurable par le marchand. |
| Pad de commande rapide | Pad de collage vers le panier en ligne (version prête pour la page d'accueil de la page complète de commande en masse). |
| Récemment consultés (page d'accueil) | Même widget que la PDP, s'affiche sur la page d'accueil sous forme de bande. |
| Produits associés | Bande de vente croisée sur la PDP. |
| Barre de panier fixe | Bande ATC fixe pour mobile uniquement. |
| Marques doubles + commande rapide | Section fusionnée 50/50 combinant logos de marques + pad de commande rapide. |
| Ressources doubles + FAQ | Section fusionnée 50/50 combinant téléchargements + FAQ. |
→ Guides de configuration des sections
4 vitrines de démonstration dans un seul thème
| Preset | Industrie | Accent | Finder |
|---|---|---|---|
| Vertex | Industriel / Fourniture MRO | Ambre #fbbf24 | — |
| Throttle | Pièces auto | Rouge-orange #ec5f24 | Marque / Modèle / Année |
| OfficeIT | Bureau, IT & électronique | Bleu | Marque / Catégorie / Capacité |
Chaque preset inclut sa propre page d'accueil, modèle de collection, modèle de produit et images hero générées. Permutez les presets depuis le customizer — l'ensemble de la vitrine se recolore et se réaffiche.
→ Guide des presets de démonstration
Modèles livrés (Online Store 2.0)
Modèles Shopify requis (chacun présent) : index.json, product.json, collection.json + list-collections.json, cart.json, search.json, blog.json + article.json, page.json, 404.json, password.json, gift_card.liquid.
Suite compte client : customers/account.json (adapté au B2B), activate_account.json, addresses.json, login.json, order.json (avec recommande ligne par ligne + commande complète), register.json, reset_password.json.
Modèles de pages personnalisées — à déposer sur n'importe quelle nouvelle page : page.about.json, page.contact.json (2 colonnes), page.faq.json, page.rfq.json, page.bulk-order.json, page.compare.json, page.services.json, page.special-offers.json.
Performance
- Modules ES vanilla — pas de bundler, pas de framework, pas de jQuery, zéro script tiers à l'exécution
- CSS par section —
section-{name}.csschargé uniquement par la section qui le possède. Pas de mégabundle global. - Tokens de design inline dans
layout/theme.liquidélimine une requête CSS bloquant le rendu - Images hero WebP à plusieurs largeurs via
<picture><source srcset> font-display: optionalsur les polices body + titre pour garder un LCP rapide- Tarification rendue côté serveur — JS ne recalcule jamais les prix, seulement améliore
- Préchargement des polices body + titre de base, preconnect vers
fonts.shopifycdn.com - Approche image hero en arrière-plan + preset par défaut à 1 diapositive = LCP récupéré sur mobile
- Lighthouse enregistré : Performance 65–100 mobile, 90+ desktop
Accessibilité (WCAG 2.1 AA)
- Opérable au clavier partout (les menus déroulants personnalisés utilisent
<details>/<summary>natifs ; navigation par touches fléchées dans le méga menu) - Focus visible sur chaque élément interactif (anneau de style focus-visible)
- Contraste minimum 4,5:1 partout ; palette testée
- Cibles tactiles minimum 24 px sur mobile
- Inputs étiquetés + rôles ARIA (
role="menu",menuitemradio,aria-checked,aria-current) - Lien Aller au contenu
- Bascule RTL automatique avec dérogation manuelle optionnelle
SEO & social
- Graphe de schéma JSON-LD complet — Organization, WebSite + SearchAction, BreadcrumbList (PDP), Product (avec GTIN, shippingDetails, returns), BlogPosting, ContactPage + LocalBusiness, FAQPage, ItemList (collection)
- Meta Open Graph + Twitter card sur chaque page (
og:image,og:locale,og:image:alt,twitter:image,twitter:site) rel="next"/rel="prev"sur la pagination des collections + blogfetchpriority="high"sur la première image de carte de collection (gain LCP)noindexsur tout le site pour 12 types de pages utilitaires (compte, recherche, etc.)- hreflang émis automatiquement pour tous les 5 locales publiées
- Favicon livré en SVG fallback + emplacement PNG paramétrable
- Champs Google Merchant Center — GTIN, détails d'expédition, retours
Confidentialité & conformité
- Pas de bannière de cookies personnalisée — utilise la bannière native Customer Privacy de Shopify (meilleur score Lighthouse Best Practices, moins de code à maintenir, pas de surprises de politique)
- Conforme à la politique du Theme Store — pas de suivi tiers, pas de liens d'affiliation, pas de crédits de designer à l'intérieur des fichiers du thème
Ce qui n'est PAS encore inclus
Pour définir les bonnes attentes :
- Téléversement de bon de commande (PDF de bon de commande comme paiement) — conditionné à ce que Shopify expose l'API native correspondante sans application complémentaire. Prévu pour la v1.1.
- Workflow d'approbation (approbations internes multi-étapes avant paiement) — même conditionnement. Prévu pour la v1.1.
- Liste de souhaits — délibérément non livrée. La comparaison de produits est session uniquement par politique du Theme Store ; les listes de souhaits persistantes nécessitent une application.
- Chat en direct — recommandons le Chat natif de Shopify ou toute application tierce de votre choix.
Démarrage rapide
- Installez Vertex depuis le Shopify Theme Store (Online Store ▸ Themes ▸ Add theme)
- Activez le B2B natif (Settings ▸ Customer accounts ▸ Enable B2B). Sans cela, le chrome B2B se masque automatiquement — le thème fonctionne toujours comme un thème B2C soigné.
- Populez l'espace de noms de métachamps
vertex— fiches techniques, MPN, contacts commerciaux, expédition depuis. Voir Guide de configuration des métachamps. - Choisissez une palette de démarrage — Customize ▸ Theme settings ▸ Colors ▸ Starter color palette. Choisissez : Personnalisée, Ambre Vertex, Rouge Throttle, Bleu OfficeIT ou Turquoise Inkline.
- Personnalisez dans Themes ▸ Customize et Publiez.
→ Procédure d'installation complète
Et ensuite
- Installation → — Installation pas à pas + activation B2B
- Référence des paramètres de thème → — Chaque paramètre dans Theme Settings, expliqué
- Guides de configuration des sections → — Comment configurer chaque section
- Guides des fonctionnalités → — Configuration B2B, métachamps, modes Storefront, Markets, presets de démonstration, compte client, RFQ
- FAQ + dépannage → — Principales questions répondues
- Changelog → — Quoi de neuf dans chaque version
- Support → — Comment nous contacter