Aller au contenu principal

Installation de Vertex sur votre boutique Shopify

Ce guide vous accompagne dans l'installation du thème Shopify B2B premium Vertex — de l'achat à l'activation B2B, la configuration des métachamps et votre première publication.

Temps estimé
  • Installation B2C basique (thème uniquement, sans B2B) : 5 minutes
  • Installation B2B complète (thème + B2B natif + métachamps + première entreprise) : 45 à 60 minutes

Avant de commencer​

Exigences du plan Shopify​

Vous avez besoin dePourquoi
N'importe quel plan ShopifyVertex s'installe sur chaque plan — Basic / Shopify / Advanced / Plus
Shopify Plus OU Advanced + module B2BRequis uniquement si vous voulez utiliser les fonctionnalités B2B natives de Shopify. Sans elles, Vertex fonctionne comme un thème B2C de fourniture industrielle soigné.
Nouveaux comptes clients activésRequis pour toute fonctionnalité de compte — Settings ▸ Customer accounts ▸ Show login link in checkout

Étape 1 — Installez Vertex depuis le Shopify Theme Store​

  1. Allez dans Online Store ▸ Themes dans votre admin Shopify
  2. Cliquez sur Add theme ▸ Visit Theme Store
  3. Recherchez « Vertex » ou parcourez la catégorie B2B & Wholesale
  4. Cliquez sur Try theme pour installer Vertex comme thème non publié sur votre boutique
  5. Cliquez sur Customize pour ouvrir l'éditeur de thème
À ce stade votre vitrine est inchangée

Le thème est installé mais non publié. Vous pouvez prévisualiser et personnaliser Vertex sans affecter votre vitrine en direct. Publiez (Étape 6) seulement lorsque vous êtes prêt.

Étape 2 — Activez le B2B natif de Shopify (optionnel, mais recommandé)​

Passez cette étape si vous voulez seulement du B2C — le chrome B2B de Vertex se masque automatiquement lorsqu'aucun client B2B n'est connecté.

  1. Allez dans Settings ▸ Customer accounts
  2. Activez New customer accounts
  3. Faites défiler jusqu'à B2B et cliquez sur Manage
  4. Cliquez sur Enable B2B
  5. Vous verrez maintenant une nouvelle section B2B dans la barre latérale de l'admin Shopify

→ Voir le guide complet de configuration B2B pour créer votre première entreprise, attribuer des catalogues, définir les conditions NET, etc.

Étape 3 — Configurez l'espace de noms de métachamps Vertex​

Vertex lit plusieurs métachamps gérés par le marchand pour alimenter les améliorations de la PDP (infos commercial, expédition depuis, recherche MPN, fiches techniques, spécifications techniques, historique des prix).

Vous pouvez faire cela de deux manières :

Option A — Configuration manuelle via l'admin Shopify (~15 min)​

  1. Allez dans Settings ▸ Custom data
  2. Cliquez sur Companies (ou Products, selon le métachamp que vous ajoutez)
  3. Cliquez sur Add definition et créez chaque métachamp depuis le tableau du Guide de configuration des métachamps

Option B — Configuration en masse via l'API GraphQL Admin de Shopify (~5 min)​

Utilisez les mutations GraphQL incluses dans le Guide de configuration des métachamps pour amorcer chaque définition de métachamp Vertex en un seul lot.

Vous n'avez pas besoin de chaque métachamp pour commencer

Le thème se dégrade harmonieusement lorsque les métachamps sont absents. Les blocs PDP (Documents, Historique des prix, Expédition depuis) se masquent automatiquement lorsque leur métachamp de support est vide. Commencez par les plus impactants (vertex.mpn pour la recherche par SKU et vertex.rep_* pour la pilule commercial) et ajoutez les autres à mesure que vous évoluez.

Étape 4 — Choisissez un preset de couleur​

Vertex est livré avec 4 palettes de démarrage :

PresetIndustrieAccent
Vertex (par défaut)Industriel / MROAmbre #fbbf24
ThrottlePièces autoRouge-orange #ec5f24
OfficeITBureau & fourniture ITBleu
InklineFourniture d'impressionTurquoise

Pour changer de preset :

  1. Dans l'éditeur de thème, cliquez sur Theme settings (en bas à gauche)
  2. Ouvrez Colors
  3. Sélectionnez votre palette de démarrage depuis le menu déroulant Starter color palette
  4. L'ensemble de la vitrine se recolore dans le panneau de prévisualisation

→ Voir Guide des presets de démonstration pour les différences entre les presets.

Étape 5 — Configurez l'en-tête, la navigation, le pied de page​

L'en-tête + le pied de page se configurent via les section groups dans l'éditeur de thème :

  1. Dans l'éditeur de thème, cliquez sur Sections (barre latérale gauche)
  2. Cliquez sur Header group pour configurer :
    • Barre d'annonce (bande supérieure sombre/ambrée avec liens, réseaux sociaux, téléphone)
    • Barre d'accueil B2B (visible uniquement pour les clients B2B connectés)
    • En-tête principal (logo, recherche, navigation)
  3. Cliquez sur Footer group pour configurer :
    • Menu du pied de page, liens sociaux, e-mail de contact, inscription newsletter, icônes de paiement

→ Procédure détaillée : Guide en-tête & pied de page chrome · Référence des paramètres de thème.

Étape 6 — Prévisualiser, puis publier​

  1. Dans l'éditeur de thème, cliquez sur le bouton Preview (en haut à droite) pour voir votre vitrine dans un nouvel onglet
  2. Cliquez à travers :
    • La page d'accueil
    • Une page de collection
    • Une page produit
    • Le panier
    • La page de connexion client
  3. Si un compte de test acheteur B2B est configuré, connectez-vous et vérifiez :
    • La barre d'accueil ambrée apparaît avec le nom de l'entreprise + le badge des conditions NET
    • Les paliers de tarification par volume s'affichent sur la PDP (si attribués au catalogue de cet acheteur)
    • La pilule commercial apparaît dans l'en-tête (si le métachamp vertex.rep_name est défini)
  4. De retour dans Online Store ▸ Themes, trouvez Vertex dans la Theme library
  5. Cliquez sur le menu ⋯ à côté de Vertex ▸ Publish

Votre vitrine est maintenant en direct sur Vertex 🎉

Dépannage de l'installation​

« Je ne vois pas la barre d'accueil B2B ambrée »​

Causes (par ordre de probabilité) :

  1. Vous n'êtes pas connecté en tant que client B2B. La barre ambrée ne s'affiche que lorsque customer.b2b? est vrai ET que customer.current_company est défini. Connectez-vous en tant qu'acheteur B2B rattaché à une entreprise.
  2. Le mode Storefront est défini sur B2C uniquement. Ouvrez Theme settings ▸ B2B ▸ Storefront mode et confirmez qu'il est défini sur Hybride (auto) ou B2B uniquement.
  3. Le B2B natif n'est pas activé dans l'admin Shopify. Confirmez l'Étape 2 ci-dessus.

« Les prix affichent ‘Connectez-vous pour voir la tarification' même si je suis connecté »​

La bascule Theme settings ▸ B2B ▸ Hide prices until customer logs in est activée. Pour la désactiver, décochez la case.

« La pilule commercial n'apparaît pas dans l'en-tête »​

La pilule ne s'affiche que lorsque l'entreprise de l'acheteur a une valeur de métachamp vertex.rep_name définie. Vérifiez dans Customers ▸ Companies ▸ [Company name] ▸ Metafields que vertex.rep_name est populé.

→ Voir FAQ + dépannage pour plus.

Étapes suivantes​