Homepage du Black Friday : ce qu'il faut changer et ce qu'il faut garder

Publié
•
Revu par un expert
•
5 min de lecture

Points clés

  • La homepage et la landing page du Black Friday ont des rôles différents. La LP convertit le trafic payant qui a déjà vu une publicité ; la homepage capte tous ceux qui arrivent par eux-mêmes et ne connaissent pas encore l’offre.
  • Modifiez cinq éléments : la barre d’annonces, le hero, un bandeau avec les conditions de l’offre, les points d’entrée spécifiques, et le bloc logistique. Ne touchez pas à la navigation, à la recherche ni aux templates de produits.
  • La plupart des homepages du Black Friday rencontrent les deux mêmes problèmes : un décalage de mise en page (layout shift) lorsque la barre d’annonces et le compte à rebours se chargent tardivement, et des palettes saisonnières sombres qui posent des problèmes de contraste.
  • Préparez le rollback (retour à la normale) avant de lancer la campagne. Le 1er décembre, quelqu’un devra remettre la boutique en état, et cela ne doit pas s’improviser.

Le Black Friday 2026 se déroule du vendredi 27 novembre au lundi 30 novembre. Vos landing pages se chargeront de la conversion, mais la homepage est la page qui existe déjà, qui est déjà référencée et qui reçoit déjà du trafic - et le matin du Black Friday, elle en reçoit beaucoup plus.

Voici ce qu’il faut y modifier, dans l’ordre, et ce qu’il ne faut surtout pas toucher.

Pourquoi vous pouvez nous faire confiance

Jacques a plus de 15 ans d’expérience en développement, et nous avons passé quatre ans à l’intérieur des thèmes Shopify. Nous construisons Fudge, l’opérateur IA pour les boutiques Shopify, avec une note de 4.9 sur le Shopify App Store, et novembre est le mois où on lui demande de superposer des états de campagne sur des thèmes par ailleurs verrouillés.


La homepage n’est pas votre landing page

Confondre les deux est l’erreur la plus courante ici.

Page d’accueil Black FridayLanding page Black Friday
Qui arriveTrafic direct, organique, clients fidèles, destinataires d’e-mails ayant cliqué sur le logoTrafic payant qui vient de voir une publicité spécifique
Ce qu’ils saventVotre marque. Pas l’offre.L’offre, grosso modo, d’après la créa
Son rôleOrienter, puis dirigerConvertir, immédiatement
NavigationLa conserverGénéralement la supprimer
Nombre de produitsPoints d’entrée vers de nombreux produitsUne sélection de 10 à 30

La page d’accueil doit servir quelqu’un qui a tapé votre nom dans un navigateur parce qu’il se souvient vaguement que vous faites des soldes, en même temps qu’un client qui a déjà acheté chez vous neuf fois. Elle oriente et dirige. La landing page se charge de la conclusion.

Diriger le trafic payant vers la page d’accueil gaspille la publicité. Laisser la page d’accueil intacte gaspille tous les autres.


Les cinq éléments à modifier

Dans l’ordre de priorité. Si vous manquez de temps, les premiers éléments sont les plus importants.

1. La barre d’annonces

Les pixels les plus précieux du site pendant le BFCM, et la modification la moins coûteuse.

Mettez-y l’offre et la date limite, dans cet ordre : “-30% sur tout. Fin le lundi 30 novembre.” Pas “Le Black Friday est là” - cela n’apprend rien au client qu’il n’ait déjà deviné.

Trois choses à bien faire :

  • Réservez sa hauteur en CSS. Une barre injectée après le premier affichage (first paint) pousse toute la page vers le bas, ce qui pénalise votre Cumulative Layout Shift le jour où votre trafic est au plus haut. Donnez-lui une min-height fixe pour que la mise en page soit correcte avant l’arrivée du contenu.
  • Faites-en un lien. Vers la page de l’offre, et non vers la homepage où l’on se trouve déjà.
  • Un seul message. La barre d’annonces de Dawn (le thème par défaut de Shopify) permet de faire défiler jusqu’à 12 annonces. Faire défiler trois offres sous les yeux d’un client en huit secondes, ce n’est pas la même chose qu’en communiquer une seule clairement.

Si vous y ajoutez un compte à rebours, créez-le sans application - c’est juste un fichier de section, et les timers d’applications ajoutent le poids de leurs scripts sur chaque page, le jour où vous pouvez le moins vous le permettre.

2. Le hero

Remplacez l’image, remplacez le titre, remplacez le CTA. Gardez la structure.

Le titre énonce l’offre en termes simples. Le sous-titre contient les dates et la condition la plus importante (“hors nouvelle collection”, “dans la limite des stocks disponibles”). Le CTA renvoie vers la page de l’offre.

Concernant l’image : tout ce que vous produisez doit fonctionner avec un recadrage mobile, car c’est là que la plupart des gens la verront. Concevez d’abord la version mobile et laissez la version desktop bénéficier de l’espace supplémentaire, plutôt que de concevoir une large bannière en espérant que le milieu survive. Évitez d’intégrer du texte directement dans l’image afin qu’il reste lisible, traduisible et accessible.

Faites attention au poids du fichier. Une image hero est généralement l’élément Largest Contentful Paint, donc une image saisonnière plus lourde ralentit directement la métrique qui influence le plus la probabilité qu’un visiteur impatient du vendredi matin reste sur le site. Servez-la de manière responsive et maintenez son poids en dessous de quelques centaines de kilo-octets.

3. Un bandeau pour les conditions de l’offre

Une petite rangée juste en dessous du hero, qui répond aux quatre questions que votre support client devra sinon traiter une par une :

  • Ce qui est inclus et ce qui est exclu
  • Quand l’offre se termine, avec la date
  • Si les codes promos sont cumulables
  • La politique de retour pour les cadeaux

Cette simple rangée élimine une part significative du volume des demandes de support du Black Friday. C’est aussi le bloc que la plupart des boutiques oublient complètement.

4. Des points d’entrée spécifiques

Remplacez les habituelles rangées “nouveautés” et “meilleures ventes” par des chemins d’accès vers l’offre : par catégorie, par prix, par destinataire.

“Cadeaux à moins de 50 €” est un meilleur module de Black Friday que “Nouveautés”, car il correspond à l’intention réelle des visiteurs fin novembre. Trois à cinq chemins d’accès, pas plus. Chacun doit atterrir sur une vraie page dédiée plutôt que sur l’URL d’une collection filtrée - voir comment créer une page promotionnelle sur Shopify.

Gardez un nombre de choix restreint. Ici, le rôle de la homepage est de faire sortir le visiteur de cette page pour l’amener vers une collection.

5. Logistique et rassurance

Remontez les délais d’expédition, les conditions de retour et les options de paiement plus haut sur la page.

Fin novembre, la question “Est-ce que ça arrivera à temps ?” l’emporte sur presque toutes les autres objections. Une réponse visible dès la homepage évite que le client ne parte chez un concurrent qui aurait affiché l’information. Indiquez les dates exactes, pas de simples “commandez vite”.

Besoin que le takeover de votre homepage soit créé et réversible ?
Démarrer l'essai gratuit

Ce qu’il ne faut pas toucher

En novembre, l’instinct pousse à vouloir tout améliorer. Résistez-y, car chaque modification est un bug potentiel que vous pourriez devoir corriger le vendredi à 6h du matin.

  • La structure de navigation. Ajoutez un onglet “Black Friday” si vous le devez, mais ne réorganisez pas tout le menu.
  • La recherche et les filtres. Un pic de trafic est le pire moment possible pour découvrir un bug de recherche à facettes.
  • Les templates de produits. Mettez à jour les fiches produits (PDP) promues avec les prix de l’offre et des signaux de rassurance plus forts, mais ne restructurez pas le template.
  • Le checkout. Surtout pas pendant le BFCM. Sous aucun prétexte.
  • Les applications. En ajouter une en novembre signifie ajouter le poids d’un script non testé sur chaque page. Au contraire, profitez-en pour les auditer et les supprimer.
  • Le thème lui-même. Le travail structurel sur le thème devrait être terminé fin septembre. Les campagnes viennent se superposer à un thème finalisé (frozen).

Les deux éléments qui posent problème

Sur toutes les boutiques que nous observons, les homepages du Black Friday échouent de la même manière chaque année sur deux points.

Décalage de mise en page (layout shift) dû aux éléments de campagne se chargeant tardivement

La barre d’annonces, le compte à rebours et la barre promotionnelle sticky ont tous tendance à être injectés par JavaScript après le premier affichage. Tout élément sans espace réservé pousse la page vers le bas alors que le visiteur a déjà commencé à lire, et sur mobile, c’est ce qui fait la différence entre cliquer sur le CTA ou sur ce qui a pris sa place.

Réservez la hauteur en CSS pour chaque élément qui va apparaître. Donnez aux chiffres du compte à rebours une largeur fixe avec tabular-nums pour que le timer ne décale pas la ligne à chaque seconde.

Des palettes saisonnières qui manquent de contraste

C’est un point que presque personne ne vérifie. Les designs du Black Friday deviennent sombres, visuellement contrastés et très prononcés - fonds anthracite, étiquettes de promo rouges, touches dorées ou fluo. Beaucoup de ces combinaisons n’atteignent pas réellement le ratio de 4.5:1 requis par les WCAG pour le texte normal, et les éléments qui échouent le plus souvent sont le prix remisé et le badge de promo : précisément ce que toute la page est censée communiquer.

C’est aussi la pire saison pour se tromper. L’Acte Européen sur l’Accessibilité s’appliquant depuis le 28 juin 2025, ce point représente un risque légal plutôt qu’un bonus pour les boutiques vendant dans l’UE, et le Black Friday correspond à votre pic de trafic.

Deux vérifications, cinq minutes chacune :

  • Passez le prix réduit, le texte du badge et le label du CTA dans un vérificateur de contraste à leur taille réelle.
  • Parcourez la homepage en utilisant la touche Tab de votre clavier. Si les nouveaux modules de la campagne ne sont pas accessibles ou si l’anneau de focus est invisible sur le fond sombre, corrigez cela avant le jour J.

Pour aller plus loin, consultez les six erreurs d’accessibilité les plus courantes des thèmes Shopify et notre guide sur l’Acte Européen sur l’Accessibilité.


Préparez le rollback en premier

Le 1er décembre, la boutique doit revenir à la normale, et c’est souvent à ce moment-là que quelque chose casse, car la campagne a été configurée comme une modification à sens unique par quelqu’un qui est probablement en train de dormir.

Avant de publier la campagne :

  • Dupliquez le thème et nommez-le clairement - “base pré-BFCM”, avec la date.
  • Notez quelles sections ont été modifiées et par qui.
  • Décidez de la sortie de campagne (wind-down), et pas seulement du bouton d’arrêt. Passer du jour au lendemain de “-30% sur tout” à rien du tout est une mauvaise expérience client pour ceux qui sont au milieu de leur panier. Une offre de décembre, plus courte et moins agressive, facilite la transition.
  • Désignez une personne qui peut approuver les modifications pendant le week-end, et centralisez tout via elle.

Si vous lisez ceci à 48 heures de l’échéance

La version courte, par ordre de priorité :

  1. Barre d’annonce avec l’offre et la date de fin, avec hauteur réservée.
  2. Titre du hero et CTA pointant vers la page de l’offre. Réutilisez l’image existante si la nouvelle n’est pas prête.
  3. Bandeau des conditions de l’offre sous le hero.
  4. Date limite d’expédition visible au-dessus de la ligne de flottaison sur mobile.
  5. Dupliquez le thème pour pouvoir revenir en arrière.

C’est quelques heures de travail et cela couvre l’essentiel de la valeur. Les points d’entrée mis en avant et le hero repensé sont les parties à abandonner si le temps manque, pas les conditions et la date limite.

Pour la séquence complète et la checklist de pré-lancement, consultez le Guide BFCM Shopify. Si l’offre elle-même n’est pas encore décidée, Idées de promotions Black Friday pour les boutiques Shopify couvre la mécanique et ce que chacune coûte. Les changements à ce niveau sont ce pour quoi l’éditeur de boutique Shopify de Fudge est conçu : des états de campagne par-dessus un thème auquel vous ne touchez pas autrement. Fudge peut analyser votre page d’accueil actuelle, lister ce qui manque par rapport à la checklist ci-dessus, et créer la barre d’annonce, le hero et le bandeau de conditions dans votre thème en tant que brouillons que votre équipe peut prévisualiser avant leur mise en ligne. Chaque changement publié conserve la version qu’il a remplacée, ce qui vous permet de le restaurer individuellement après les soldes.


FAQ

Dois-je refaire le design de ma page d'accueil pour le Black Friday ?

Modifiez-la, ne la refaites pas. Remplacez la barre d'annonce, le hero, les points d'entrée et le bloc logistique, et laissez la navigation, la recherche, les modèles de produits et le checkout exactement tels qu'ils sont. Une refonte structurelle en novembre signifie débugger une nouvelle mise en page le jour de votre plus fort trafic, et le potentiel de conversion est bien inférieur au risque encouru.

Que doit dire la barre d'annonce du Black Friday ?

L'offre et la date limite, dans cet ordre, et rien d'autre. "30 % de réduction sur tout. Fin le lundi 30 novembre." est plus efficace que "Le Black Friday est là" car cela apprend au visiteur quelque chose qu'il ne savait pas déjà. Faites-en un lien vers la page de l'offre, réservez sa hauteur en CSS pour qu'elle ne décale pas la page, et affichez un seul message plutôt que d'en faire tourner trois.

Le trafic payant doit-il aller vers ma page d'accueil ou vers une landing page ?

Une landing page, pour le trafic payant froid. La landing page correspond à la publicité, supprime la navigation et présente une sélection réduite de produits, de sorte qu'elle convertit un visiteur qui connaît déjà l'offre. La page d'accueil sert les visiteurs directs, organiques et les clients fidèles qui arrivent sans avoir vu de publicité, ce qui est un rôle différent et nécessite de conserver la navigation.

Pourquoi les pages d'accueil du Black Friday dégradent-elles les Core Web Vitals ?

Pour deux raisons. Les éléments de campagne tels que les barres d'annonce et les comptes à rebours sont généralement injectés après le first paint et poussent la page vers le bas, ce qui crée un layout shift (décalage de mise en page). Et les images hero saisonnières sont plus lourdes que celles qu'elles remplacent, ce qui ralentit le Largest Contentful Paint. Réservez la hauteur en CSS pour tout ce qui apparaît tardivement, et continuez à servir le hero de manière responsive.

Les designs sombres du Black Friday causent-ils des problèmes d'accessibilité ?

Fréquemment. Les fonds anthracite avec des étiquettes de promotion rouges ou des accents fluo tombent souvent en dessous du ratio de contraste de 4.5:1 exigé par le WCAG pour le texte normal, et les éléments qui échouent le plus souvent sont le prix remisé et le badge de promotion. Vérifiez le prix remisé, le badge et le CTA à leur taille réelle, et naviguez avec la touche Tab sur la page pour confirmer que l'anneau de focus est visible sur le fond sombre.

Quand la page d'accueil du Black Friday doit-elle être mise en ligne ?

Construisez-la en octobre, publiez-la la semaine précédente. La plupart des boutiques activent la page d'accueil lorsque l'accès anticipé s'ouvre pour leur liste d'e-mails, généralement le lundi ou le mardi précédant le Black Friday, puis passent à l'offre complète le vendredi matin. Gardez une copie du thème sauvegardée pour pouvoir faire un rollback avant de publier quoi que ce soit.

Comment remettre ma page d'accueil à la normale après le Black Friday ?

Dupliquez le thème avant de commencer et nommez-le comme base pré-BFCM avec la date, pour que la restauration soit une seule action plutôt qu'une tentative de vous souvenir de ce qui a changé. Prévoyez la fin progressive autant que l'arrêt brutal : passer d'une offre sur tout le site à rien du tout du jour au lendemain abandonne toute personne au milieu de son panier, donc une petite offre en décembre constitue une meilleure transition.

Jacques's signature
Prêt à déployer le takeover de votre page d'accueil ?

Articles similaires

Jacques Blom
Jacques Blom
CTO chez Fudge.
Jacques est CTO chez Fudge. Il code depuis l'âge de 13 ans et développe sur Shopify depuis plus de 15 ans. Avant de rejoindre Fudge, il a dirigé l'ingénierie de plusieurs startups passées par YC. Il a conçu l'opérateur IA de Fudge, qui a déployé 640 000+ pages et sections pour 3 100+ boutiques Shopify. Il écrit sur la performance Shopify, l'architecture des thèmes et l'utilisation sécurisée des LLM sur du code Liquid en production.