Sections page d'accueil & marketing
Vertex livre 30+ sections prêtes pour la page d'accueil conçues pour les vitrines B2B et de fourniture industrielle : rotateurs hero, multi-colonnes éditoriaux, marques de confiance, barres KPI, accordéons FAQ avec JSON-LD auto-émis, bannières de conversion et sections fusionnées 50/50 qui combinent deux idées connexes dans une seule bande (marques + commande rapide, ressources + FAQ).
Chaque section ici est une section OS 2.0 autonome. Faites-les glisser dans n'importe quel ordre dans le customizer. Vous n'avez pas non plus à les utiliser sur la page d'accueil — déposez-les sur page.about.json, page.services.json, ou tout modèle de page personnalisé.
Hero & sections d'ouverture
hero
Fichier de section : sections/hero.liquid
Rotateur multi-diapositives avec avance automatique, navigation par points et composition éditoriale (sourcil + titre + sous-titre + double CTA). Par défaut à une diapositive pour le LCP le plus rapide — les diapositives supplémentaires sont une amélioration progressive.
Paramètres de bloc par diapositive : image (avec sélection de largeur consciente du mobile via <picture><source>), texte de sourcil, titre, sous-titre, libellé CTA principal + URL, libellé CTA secondaire + URL, alignement (gauche / centre).
Paramètres de section : intervalle d'avance automatique (secondes), bascule afficher les points, schéma de couleurs.
Gardez la page d'accueil à une seule diapositive hero si la Performance Lighthouse est une priorité. Chaque diapositive supplémentaire ajoute une image de taille hero à la charge initiale. Le défaut livre 1 diapositive pour cette raison.
featured-collection
Fichier de section : sections/featured-collection.liquid
Grille de produits qui tire depuis un sélecteur de collection. Accepte les blocs @app pour la conformité au Theme Store.
Paramètres : sélecteur de collection, titre, produits par ligne (2 / 3 / 4 / 5), colonnes sur mobile (1 / 2), afficher le lien Voir tout, schéma de couleurs.
collection-list
Fichier de section : sections/collection-list.liquid
Grille de catégories avec superpositions d'images et titres centrés sur chaque tuile. Colonnes et ratio d'aspect configurables.
Blocs éditoriaux
image-with-text
Fichier de section : sections/image-with-text.liquid
Pairage classique 50/50 ou asymétrique image + texte. Utile pour À propos, Notre processus, Pourquoi nous.
Paramètres : image, titre, corps (richtext), libellé CTA + URL, mise en page (image-left / image-right), schéma de couleurs.
multicolumn
Fichier de section : sections/multicolumn.liquid
Grille à 2, 3 ou 4 colonnes. Chaque colonne a une icône (ou image), un titre, un corps et un lien optionnel. Utilisez pour les propositions de valeur (Expédition le jour même · NET-30 · Tarification par volume · Certifié ISO 9001).
Paramètres de bloc par colonne : icône (image), titre, corps, libellé de lien + URL.
rich-text
Fichier de section : sections/rich-text.liquid
Bloc d'introduction ou à propos centré. Titre + corps richtext + CTA optionnel. Utilisez avec parcimonie — c'est le bloc « saut de page ».
timeline
Fichier de section : sections/timeline.liquid
Chronique année + jalon pour une page À propos. Par bloc : année, titre, corps.
Confiance & preuve sociale
testimonials
Fichier de section : sections/testimonials.liquid
Cartes notées avec traitement d'en-tête à superposition d'avatar. Chaque carte a une note (1 à 5 étoiles), une citation, un nom de client, un rôle, une entreprise et une image d'avatar.
Paramètres par bloc : nom, rôle, entreprise, citation (richtext), note (1 à 5), avatar (image).
logo-list
Fichier de section : sections/logo-list.liquid
Logos de marques défilants en marquee avec lignes de grille en fondu. Utilisez pour Ils nous font confiance / Vu dans / Marques que nous distribuons.
Paramètres par bloc : image du logo, URL optionnelle. Niveau section : vitesse de défilement, afficher les lignes de grille.
press-coverage
Fichier de section : sections/press-coverage.liquid
Bande de logos + citations clés. Combine les logos de presse avec de courtes citations attribuées — « ...le McMaster-Carr de WordPress. » — Trade Weekly.
stats-bar
Fichier de section : sections/stats-bar.liquid
Bande KPI en mode sombre. Utilisez pour les chiffres phares — 40 000+ SKUs · NET-30 · Expédition 24h · ISO 9001.
Paramètres par bloc : nombre (texte large), libellé (texte petit).
« 40 000+ SKUs » se lit mieux que « 40 127 SKUs » et ne nécessite pas de mettre à jour la section chaque fois que l'inventaire change. Idem avec le volume de commandes.
Conversion & CTA
cta-banner
Fichier de section : sections/cta-banner.liquid
Appel à l'action pré-footer avec effet de chevauchement dans le footer — la bande chevauche visuellement dans le pied de page pour la finition éditoriale.
Paramètres : titre, sous-titre, CTA principal, CTA secondaire, image (optionnelle), bascule Masquer pour les clients B2B.
La bascule Masquer pour les clients B2B est un petit détail mais critique. Si le CTA lit « Devenir revendeur » ou « Demander un devis », vous ne voulez pas l'afficher à un acheteur qui est déjà un revendeur connecté. Basculez ceci et la section disparaît quand customer.b2b? est vrai.
newsletter
Fichier de section : sections/newsletter.liquid
Inscription par e-mail avec bouton de souscription. Utilise le formulaire customer-newsletter natif de Shopify — les abonnés atterrissent dans votre liste de clients Shopify avec le flag newsletter.
industries-grid
Fichier de section : sections/industries-grid.liquid
Grille de cartes éditoriales pour présenter les verticales que vous servez — CVC · Manufacture · Installations · Marine · Aérospatial.
Paramètres par bloc : image, titre, lien.
resource-hub
Fichier de section : sections/resource-hub.liquid
Liste de téléchargements pour fiches techniques, MSDS, brochures, certifications. Chaque entrée est un lien de fichier.
Paramètres par bloc : titre, fichier (PDF), description, icône optionnelle.
services-grid
Fichier de section : sections/services-grid.liquid
Tuiles avec superposition d'image pour les offres de services — Découpe à la dimension · Kitting personnalisé · Consultation sur site · Gestion d'inventaire.
FAQ
faq
Fichier de section : sections/faq.liquid
Accordéon basé sur disclosure (construit sur <details> / <summary> natifs pour un support complet clavier + lecteur d'écran). Auto-émet le JSON-LD FAQPage pour les snippets enrichis Google.
Paramètres par bloc : question (texte), réponse (richtext).
La section émet le graphe JSON-LD automatiquement — vous obtiendrez des snippets enrichis FAQ dans les résultats de recherche Google sans toucher au code. Assurez-vous que les questions sont de vraies questions que les acheteurs posent (et non du texte marketing), puisque les directives de contenu de Google s'appliquent.
Sections fusionnées à double usage
Certaines sections combinent deux idées dans une seule bande, économisant de l'espace vertical et créant un rythme éditorial.
dual-brands-quickorder
Fichier de section : sections/dual-brands-quickorder.liquid
Fusionné 50/50 : grille de logos de marques d'un côté, pad de commande rapide avec collage vers le panier de l'autre. Idéal pour les pages d'accueil B2B où vous voulez faire apparaître des marques de confiance ET un chemin de conversion dans la même bande.
dual-resources-faq
Fichier de section : sections/dual-resources-faq.liquid
Fusionné 50/50 : téléchargements de ressources (fiches techniques, brochures) d'un côté, accordéon FAQ de l'autre. Pairage courant pour les industries axées sur le support.
Recommandations d'ordre des sections
Ordre suggéré pour une page d'accueil de fourniture MRO / industrielle :
- Hero — la proposition de valeur + le CTA principal (catalogue vs. RFQ)
- Barre de stats — marques de crédibilité instantanées
- Collection mise en avant — best-sellers ou catégorie haut de funnel
- Multi-colonnes — Pourquoi nous en 3 colonnes
- Grille d'industries — les verticales que vous servez
- Liste de logos — marques que vous distribuez
- Dual brands + quickorder — appairez avec le CTA liste-négoce
- Témoignages — citations d'acheteurs avec notes
- Hub de ressources — téléchargements
- FAQ — principales objections
- Bannière CTA — Demander un devis (masqué pour B2B connecté)
- Newsletter — inscription liste-négoce
Et ensuite
- Sections de la page produit → — Produit principal, onglets, produits associés, récemment consultés, panier fixe
- Sections B2B uniquement → — Promo des fonctionnalités B2B, commande en masse, RFQ, comparaison
- Sections de boost des ventes → — Bannière promo, compte à rebours, bundles, compteur de stock
- Sections finder → — Marque/Modèle/Année, Marque/Catégorie/Capacité, finders d'imprimante
- Référence des paramètres de thème → — Schémas de couleurs, typographie, paramètres de mise en page