Sections de boost commercial
Voici les sections axées sur la conversion dans Vertex — les indices d'urgence, les surfaces promotionnelles, les flux modaux, les blocs d'offres groupées. Aucune d'elles ne nécessite d'application tierce. Toutes respectent la politique du Theme Store de Shopify (pas de listes de souhaits persistantes, pas de scripts de suivi, pas de liens d'affiliation).
Empilez trop d'indices d'urgence et ils s'annulent mutuellement. Un compte à rebours à côté d'un compteur de stock faible à côté d'un pop-up promo crie désespoir. Choisissez celui qui correspond à votre campagne, misez dessus, et alternez.
promo-banner
Fichier de section : sections/promo-banner.liquid
Bannière supérieure dispersible — généralement utilisée pour promouvoir une vente sur l'ensemble du site, un seuil de livraison gratuite ou une campagne saisonnière. Distincte de la barre d'annonce (qui est un habillage toujours actif) ; la bannière promotionnelle est pilotée par campagne et dispersible.
Paramètres
| Paramètre | Type | Notes |
|---|---|---|
| Texte | Richtext | Court message de valeur — « Vente de printemps · 15 % de remise sur les commandes de plus de 1 000 $ ». |
| Couleur d'arrière-plan | Couleur | Choisissez un accent à fort contraste — ambre, rouge-orangé, bleu-vert, etc. |
| URL du lien | URL | Cible de clic pour la bannière (toute la bande est cliquable). |
| Libellé du lien | Texte | CTA en ligne — « Voir la vente → ». |
| Dispersible | Case à cocher | Activé par défaut. Ajoute le bouton de fermeture × + la persistance localStorage. |
| Position | Sélection | above_header (par défaut) · below_header. Au-dessus de l'en-tête, l'effet est plus urgent ; en dessous de l'en-tête, l'effet ressemble davantage à une bannière. |
Caractère dispersible
Lorsque Dispersible est activé, le bouton × écrit une clé vertex_promo_dismissed:{section-id} dans localStorage. La bannière reste masquée jusqu'à ce que le visiteur efface les données de son site — ou que vous republiez la section avec un identifiant différent.
Si vous souhaitez faire réapparaître une promotion fermée pour une nouvelle campagne, modifiez l'identifiant de la section (supprimez + rajoutez la section dans le customizer). L'ancienne clé localStorage ne correspondra plus, et la bannière réapparaîtra pour tout le monde.
promo-popup
Fichier de section : sections/promo-popup.liquid
Modale s'ouvrant automatiquement avec image, titre, corps et CTA. Déclencheur configurable et cadence basée sur cookie afin que les visiteurs ne la voient pas à chaque chargement de page.
Paramètres
| Paramètre | Type | Notes |
|---|---|---|
| Titre | Texte | « Abonnez-vous et économisez 10 % » / « Attendez — obtenez un kit d'échantillons gratuit ». |
| Corps | Richtext | Brève réassurance + proposition de valeur. |
| Image | Image | Illustration affichée sur le côté (ou arrière-plan plein cadre). |
| Libellé du CTA | Texte | « S'inscrire » / « Obtenir le kit ». |
| URL du CTA | URL | Page de formulaire ou produit. |
| Déclencheur | Sélection | immediate · on_scroll (après avoir fait défiler 50 % de la page) · exit_intent (détection de sortie de la souris). |
| Délai en secondes | Nombre | Utilisé uniquement lorsque le déclencheur est immediate. Par défaut 5. |
| Durée d'expiration du cookie en jours | Nombre | Par défaut 7. Les visiteurs qui ferment ou convertissent ne la reverront pas pendant N jours. |
Explication des déclencheurs
| Déclencheur | Idéal pour | Considération UX |
|---|---|---|
| Immédiat (délai) | Inscriptions à la newsletter, offres pour primo-visiteurs | Le plus intrusif — utilisez un délai d'au moins 5 à 10 s |
| Au défilement (50 %) | Signal d'engagement — ne se déclenche qu'après défilement, signalant un intérêt | Meilleur équilibre conversion + UX |
| Intention de sortie | Offres de dernière chance, récupération d'abandon | Ordinateur uniquement — l'intention de sortie ne se déclenche pas de manière fiable sur mobile |
La clé du cookie est vertex_promo_popup:{section-id}. La modale ne se rouvrira pas tant que le cookie n'aura pas expiré.
countdown
Fichier de section : sections/countdown.liquid
Compteur jours / heures / minutes / secondes. Décompte en direct via JS, rendu côté serveur pour l'état initial (pas de clignotement).
Paramètres
| Paramètre | Type | Notes |
|---|---|---|
| Titre | Texte | « La vente de printemps se termine dans ». |
| Date de fin | Sélecteur de date | Date + heure d'expiration. Stockée dans le fuseau horaire de la boutique du marchand. |
| Texte d'expiration | Texte | Remplace le compteur une fois que le minuteur atteint zéro. « La vente est terminée ». |
| URL du lien | URL | CTA optionnel sous le compteur. |
| Libellé du lien | Texte | « Acheter maintenant ». |
| Palette de couleurs | Sélection | Liste déroulante standard de palette de couleurs. |
Comment se déroule le décompte
Le assets/countdown.js exécute une boucle requestAnimationFrame qui met à jour le minuteur chaque seconde. Lorsque l'heure cible est atteinte, le compteur est remplacé par le Texte d'expiration. Le lien/CTA est masqué après expiration.
Les comptes à rebours factices (perpétuellement 24 heures, réinitialisés au rechargement de la page) détruisent la confiance. Liez la Date de fin à une véritable fin de campagne et laissez la section gérer l'état d'expiration.
featured-bundles
Fichier de section : sections/featured-bundles.liquid
Cartes d'offres groupées soignées avec image, titre, badge de remise et ATC. Chaque bloc est une offre groupée (généralement un produit parent qui regroupe 2 à 5 SKU, configuré comme un Bundle Shopify dans votre admin).
Paramètres par bloc
| Paramètre | Type | Notes |
|---|---|---|
| Produit | Sélecteur de produit | Le produit parent de l'offre groupée. |
| Libellé de l'offre groupée | Texte | Remplace le titre du produit — « Kit MRO de démarrage ». |
| Texte de remise | Texte | Badge superposé sur l'image — « Économisez 15 % » / « 3 pour le prix de 2 ». |
| Description | Richtext | Brève proposition de valeur sous le titre. |
Paramètres de section
- Titre — « Groupez et économisez »
- Colonnes — 2 / 3 / 4
- Afficher le prix — bascule (respecte la tarification réservée aux comptes connectés)
Style du badge de remise
Le texte de remise est affiché sous forme de pastille circulaire en haut à droite de l'image. Utilisez des couleurs d'accent (ambre, rouge-orangé, bleu-vert) — le badge est suffisamment petit pour ne pas écraser le visuel de l'offre groupée.
Compteur de stock (indicateur de stock faible)
Snippet : snippets/stock-counter.liquid (rendu en tant que bloc dans main-product)
Déjà couvert dans Fiche produit. 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 atteint le seuil bas (10 unités). Déclenche l'urgence sans révéler le stock exact aux concurrents.
États :
- Plus de 10 en stock : « En stock »
- À 10 ou moins : « Plus que 4 en stock »
- Commandable en différé (zéro, 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)
Alerte de retour en stock
Snippet : snippets/back-in-stock.liquid (rendu automatiquement sur les variantes épuisées dans main-product)
Formulaire d'inscription par e-mail qui apparaît sur les variantes épuisées lorsque la précommande n'est pas activée. Natif — aucune application tierce.
Comment ça fonctionne
- L'acheteur sélectionne une variante épuisée
- L'ATC est remplacé par un champ e-mail + le bouton Me prévenir
- À la soumission, l'e-mail de l'acheteur est inscrit à la liste de clients de Shopify avec une étiquette
back_in_stock:{product_id}:{variant_id} - Lorsque vous réapprovisionnez et republiez la variante, vous pouvez filtrer les clients par cette étiquette et envoyer une campagne
Ce que le marchand doit faire
- Créer un segment de clients dans l'admin Shopify filtré par l'étiquette
back_in_stock:{product_id}:* - Lorsque vous réapprovisionnez, envoyer une campagne manuelle à ce segment via Shopify Email ou votre ESP
Vertex capture l'inscription. L'envoi de l'e-mail de réapprovisionnement est une étape manuelle — Shopify n'expose pas de point d'accroche natif « e-mail automatique au réapprovisionnement » depuis le code du thème sans application. Le compromis est une pleine conformité avec la politique du Theme Store + un coût mensuel nul.
Modale d'aperçu rapide
Asset : assets/quick-view.js + snippets/quick-view-button.liquid
Déclenchée par le bouton Aperçu rapide sur les fiches produits. Ouvre une modale avec la galerie de produits, le sélecteur de variante, le champ de quantité et l'ATC — sans quitter la page de collection.
Ce qui s'affiche dans la modale
- Galerie multi-images (avec balayage sur mobile)
- Titre + prix (respecte la tarification réservée aux comptes connectés + le prix du catalogue B2B)
- Sélecteur de variante
- Champ de quantité (avec application du MOQ / max / conditionnement)
- Bouton ATC
- Lien « Voir tous les détails → » vers la PDP
Paramètres (sur les fiches produits / sections de collection)
- Afficher le bouton Aperçu rapide — bascule (par section :
featured-collection,collection-list, résultats de recherche, produits associés) - Libellé du bouton Aperçu rapide — texte (par défaut « Aperçu rapide »)
Quand activer / désactiver
| Cas d'usage | Recommandation |
|---|---|
| Catalogue à fort volume où les acheteurs comparent rapidement les variantes | Activer — accélère le flux « parcourir 20 produits, en ajouter 3 » |
| Catalogue très technique où les acheteurs ont besoin de fiches techniques + spécifications avant de décider | Désactiver — l'aperçu rapide ne présente pas les spécifications ni les documents ; forcez le clic vers la PDP |
Quand utiliser quoi
| Objectif | Section |
|---|---|
| Attirer l'attention sur une campagne sur l'ensemble du site | promo-banner |
| Capturer un e-mail + proposer une remise pour primo-visiteurs | promo-popup |
| Offre à durée limitée avec expiration ferme | countdown |
| Mettre en avant des offres multi-produits soignées | featured-bundles |
| Urgence sur la PDP sans révéler le stock exact | Compteur de stock |
| Capturer la demande pour les articles épuisés | Alerte de retour en stock |
| Réduire la friction dans le flux page de collection → ATC | Aperçu rapide |
Et ensuite
- Sections de la fiche produit → — Compteur de stock + retour en stock sur la PDP en détail
- Marketing de la page d'accueil → — Où placer les bannières promotionnelles sur la page d'accueil
- Sections de recherche → — Recherches Marque/Modèle/Année + Marque/Catégorie/Capacité
- Référence des paramètres du thème → — Palettes de couleurs, mise en page et basculements de la page produit