Fiche produit Shopify sur mobile : mettre l'achat avant les blocs

Ce guide approfondit une seule des 7 frictions CRO les plus coûteuses : la fiche produit sur mobile. Il ne traite ni le panier, ni le checkout. Pour les fiches de soins et leurs contraintes propres, voir la fiche produit cosmétique.

Pourquoi la fiche mobile décide de tout

Les études de cas que nous publions donnent le ton. Chez Nutripure, 86 % du trafic vient du mobile sur la période du 17 avril au 15 juillet 2026, et le mobile convertit 2,1 fois moins que l'ordinateur dans l'analyse par appareil de GA4. Chez Maison Jearom, 59,2 % des visites viennent du mobile entre le 27 août 2025 et le 27 août 2026. Ces chiffres décrivent un point de départ, pas un résultat attribué à nos interventions.

Un écran de téléphone montre peu de choses. Tout ce qui précède le bouton d'achat doit donc justifier sa place : chaque bloc intercalé repousse l'action principale d'un demi-écran ou plus.

Ce que nous avons mesuré sur 54 fiches

Nous avons relevé, le 23 octobre 2026 (heure de Paris), 54 fiches produit de 27 boutiques que nous accompagnons (deux fiches par boutique), dans un navigateur émulant un téléphone dont l'écran fait 844 px de haut, en visiteur anonyme. Chaque page est chargée puis laissée trois secondes ; rien n'est cliqué, aucun cookie n'est accepté ni refusé, aucune commande n'est passée. Un seul passage par page, avec une détection par sélecteurs et par texte : un faux négatif reste possible. Sur les 54 fiches, 50 ont un bouton d'achat. Deux n'en ont pas (un « prix sur demande », un produit épuisé), deux ont pour bouton principal un téléchargement de fiche technique, et deux n'ont qu'une barre d'achat fixe. Les positions portent sur les 48 fiches dont le bouton d'achat est dans le flux de la page.

Le bouton le plus bas, à 2,8 écrans, est celui d'une table basse en chêne massif chez Artefiko, une fiche à texte long. Pour les fiches d'achat, la plupart des boutons se logent entre 1 et 2 écrans. À l'œil sur les captures, les fiches où le bouton est visible ont un haut de page compact (en-tête fin, image contenue, titre court) ; cette observation n'est pas mesurée.

Quand la première vue affiche un seuil de livraison offerte, le chiffre doit avoir été calculé : la méthode, avec neuf boutiques en exemple, est détaillée dans l'article sur le seuil de livraison offerte.

Le bandeau de consentement recouvre le bouton

Un chiffre ressort du relevé : sur les 11 fiches où le bouton est dans la première vue, 9 sont recouvertes à l'arrivée du visiteur. Dans les neuf cas, l'élément qui recouvre est un bandeau de cookies ou de consentement. Le visiteur qui arrive pour la première fois voit donc la zone d'achat masquée tant qu'il n'a pas répondu au bandeau.

Ce constat n'appelle pas à retirer le consentement, qui est une obligation, mais à le placer et le dimensionner pour qu'il ne recouvre pas la zone d'achat. Testez votre fiche sur un téléphone avec un profil vierge, sans cookie : c'est la seule façon de voir ce que voit un nouvel arrivant.

Les règles de la CNIL, les quatre familles de bandeaux et un test de dix minutes figurent dans le guide du bandeau de cookies sur Shopify.

Ce que l'audit d'OVSS a montré

L'audit CRO d'OVSS, réalisé le 2 juin 2026 sur quatre fiches produit, donne une version détaillée du problème. Sur les quatre URL, le gabarit chargeait entre 64 et 79 images et 104 scripts, avec 19 formulaires, 12 sélecteurs et 101 options. Sur mobile, le bouton d'achat n'apparaissait pas dans la première vue observée. Le bundle et plusieurs messages concurrençaient l'action principale, et la bannière de cookies pouvait recouvrir la zone de choix et d'achat. Le template produit comptait 27 blocs, dont 21 blocs Custom Liquid.

Notre relevé du 23 octobre place le bouton OVSS à 1 232 px, soit 1,5 écran, avec une barre d'achat collante. La page reste donc sous la première vue : l'audit a produit une roadmap, pas encore un résultat. L'étude de cas le dit sans détour : aucun uplift n'est publié avant une baseline fiable et une mise en production contrôlée.

L'ordre cible des blocs

La roadmap de l'audit place d'abord le titre, le prix, le choix de taille et l'ajout au panier, dans une séquence lisible. Le bundle devient une proposition secondaire, après l'action principale, et les contenus de preuve reviennent au moment où ils répondent à une objection.

Le même principe se lit sur une fiche d'On The Wild Side : une étiquette « Best seller » et la note au-dessus du titre, le prix dans le bouton d'achat, les bénéfices en liste courte dès le premier écran, puis une routine proposée sous le bouton. Cette routine est pilotée par un champ personnalisé, comme l'explique l'article sur les metafields et métaobjets Shopify. Dans notre relevé, cette fiche est l'une des onze où le bouton est visible dès l'arrivée.

1. Titre, note et prix : le prix peut se loger dans le bouton lui-même.
2. Choix de la variante : un sélecteur unique, avec des libellés explicites.
3. Bouton d'achat : visible sans défilement quand c'est possible, collant sinon.
4. Galerie compacte : quelques visuels forts plutôt qu'une soixantaine d'images.
5. Réassurance : livraison et retours, à proximité de l'action.
6. Bundle ou routine : proposé après l'ajout, pas avant.
7. Preuves et description : placées là où elles lèvent une objection.

Les cinq tests à prioriser

L'audit d'OVSS n'annonce aucun gain : il formule cinq hypothèses, à tester une par une, chacune reliée à un événement de tracking fiable. Elles servent de modèle pour n'importe quelle fiche.

Les indicateurs cibles du protocole sont l'ajout au panier, le démarrage du checkout, la conversion, le panier moyen et le taux de prise du bundle, segmentés au minimum par appareil. Un seul changement à la fois : sinon, on ne sait plus ce qui a joué.

La barre d'achat collante : un correctif, pas un objectif

Près de la moitié des fiches mesurées (48 %) affichent une barre d'achat qui reste accrochée en bas de l'écran pendant le défilement. Elle limite le coût d'un bouton placé bas, mais elle ne règle ni le prix absent de la première vue, ni un bandeau de consentement qui recouvre la zone. Une barre collante bien conçue reprend le prix, la variante choisie et le bouton, sans cacher le bandeau ni le bas de page.

Le code complet de cette barre, son comportement au défilement et le test effectué sont détaillés dans le guide de la barre d'achat collante.

Audit d'une fiche en 30 minutes

Aucun outil payant n'est nécessaire. Ouvrez une fenêtre de navigation privée, simulez un téléphone dont l'écran fait 844 px de haut et notez ce que vous voyez.

Nos seuils sont des repères tirés d'un échantillon de 54 fiches, pas des normes. Pour voir ce que chaque script charge, l'article sur l'inventaire des applications Shopify détaille la méthode.

Cinq erreurs fréquentes

1. Une galerie de plusieurs dizaines d'images avant tout texte : le titre et le bouton disparaissent sous le premier défilement.
2. Un bundle placé au-dessus du bouton : il met deux choix en concurrence avant l'action principale.
3. Des sélecteurs en série : taille, couleur, quantité, option cadeau, chacun repousse le bouton.
4. Un bandeau de consentement testé sur ordinateur seulement : sur mobile il occupe l'espace du bouton.
5. Une preuve sociale loin du titre : la note placée en bas de page ne rassure personne au moment du choix.

Checklist avant de publier un gabarit

1. Le prix et le bouton d'achat apparaissent dans la première vue, ou la barre collante les reprend.
2. La galerie compte quelques visuels, le reste est replié.
3. Les variantes se choisissent avec un seul sélecteur lisible.
4. Le bundle est proposé après l'ajout au panier.
5. La livraison et les retours sont à moins d'un écran du bouton.
6. Le bandeau de consentement ne recouvre pas la zone d'achat à l'arrivée.
7. Les événements d'ajout au panier sont instrumentés avant tout test.

Questions fréquentes

Où placer le bouton d'ajout au panier sur une fiche produit mobile ?

Dans la première vue quand c'est possible, sinon rendu collant. Sur 54 fiches mesurées, le bouton est à 1,3 écran en médiane et dans la première vue sur 11 des 50 fiches qui ont un bouton d'achat.

Combien de blocs peut-on mettre avant le bouton d'achat ?

Aussi peu que possible : titre, note, prix et choix de variante. Chaque bloc de contenu supplémentaire repousse le bouton, et la galerie est le premier poste à alléger.

Une barre d'achat fixe améliore-t-elle la conversion ?

Nous n'avons pas mesuré d'effet. 48 % des fiches de notre relevé en ont une. Elle réduit le coût d'un bouton placé bas, mais se teste comme n'importe quel changement, avec un suivi de l'ajout au panier par appareil.

Un bundle sur la fiche produit réduit-il la conversion ?

Cela dépend de sa position. L'audit d'OVSS le place après l'ajout au panier pour ne pas concurrencer l'action principale ; l'effet reste à mesurer sur un test isolé.

Comment auditer une fiche produit mobile sans outil payant ?

Avec un navigateur : simulez un téléphone dont l'écran fait 844 px de haut, ouvrez la fiche en navigation privée, notez la position du bouton, du prix et du bandeau de cookies, puis comptez les requêtes de script dans l'onglet Réseau.

Le bouton d'achat doit-il toujours être dans la première vue ?

Non : une fiche très informative peut garder son bouton à 1,3 écran si le prix est visible et si une barre collante reprend l'action. L'essentiel est que l'acheteur puisse acheter sans effort, et cela se vérifie par un test, pas par une règle.

Continuer avec EXPERAISE

• Audit CRO Shopify
• Agence CRO Shopify
• Checklist CRO Shopify en 50 points
• Tous les guides CRO Shopify
• Étude de cas OVSS
• Étude de cas On The Wild Side

---

Sources officielles

• Google : indexation mobile-first, bonnes pratiques
• Google web.dev : Core Web Vitals

Mesure EXPERAISE : 54 fiches produit publiques de 27 boutiques accompagnées, relevé du 23/10/2026 (heure de Paris), vue mobile de 844 px de haut, visiteur anonyme, un seul passage, détection par sélecteurs et texte rendu. Études de cas publiées : OVSS (audit du 02/06/2026), Nutripure (GA4, 17/04 au 15/07/2026), Maison Jearom (27/08/2025 au 27/08/2026), On The Wild Side. Aucun résultat de conversion n'est attribué à une intervention.