Concevez la fiche Shopify pour les petits écrans
Une fiche mobile doit conserver chaque information d'achat essentielle sans reproduire la mise en page ordinateur. Priorisez identité, prix, médias, variantes, disponibilité, livraison, retours et achat.
Une mise en page adaptative change la présentation, pas la vérité. Elle peut réorganiser les détails, mais ne doit pas cacher une condition d'achat.
Gardez les choix Shopify faciles à comparer
Placez des libellés près des couleurs, tailles, quantités et options d'achat. Montrez clairement les choix indisponibles et conservez la sélection lorsque le contenu change.
Réservez les accordéons aux détails secondaires et nommez-les précisément. Matières, Coupe, Livraison et Retours annoncent clairement leur contenu.
- Afficher ensemble le prix et les conditions de l'offre.
- Écrire le nom de la variante sélectionnée.
- Placer l'aide de taille ou de compatibilité près du choix.
- Garder livraison et retours près de la décision.
- Éviter le défilement horizontal pour les faits essentiels.
À lire ensuite: Checklist Shopify pour les fiches produit avant Black Friday et Cyber Monday
Protégez la précision tactile et la stabilité
Laissez assez d'espace autour des commandes tactiles. Ne collez pas de petites pastilles, flèches ou boutons de fermeture à d'autres éléments interactifs.
Réservez la place des images, avis, applications et messages de variante. Un mouvement inattendu peut faire toucher le mauvais contrôle ou perdre la position de lecture.
- Charger la page sur un petit téléphone.
- Sélectionner chaque variante avec une main.
- Balayer la galerie sans toucher un autre contrôle.
- Ouvrir les détails et retrouver la même position.
- Ajouter au panier après le chargement des applications.
Testez la page Shopify dans plusieurs conditions
Ne testez pas un seul format. Incluez petit et grand téléphone, tablette et ordinateur. Vérifiez portrait, paysage, réseau lent, zoom et principaux moteurs de navigateur.
Ne supposez pas qu'un changement mobile produit un gain universel. Lisez les résultats par appareil et vérifiez que la différence peut guider une décision.
| Condition | Vérification | Exemple d'échec |
|---|---|---|
| Petit téléphone | Choix et achat | L'aide masque le sélecteur |
| Grand téléphone | Équilibre entre médias et texte | La galerie repousse les faits |
| Tablette | Mise en page adaptative | Colonnes vides ou médias déformés |
| Réseau lent | Stabilité et retour visuel | Le bouton bouge après une application |
| Zoom et texte agrandi | Lecture et accès | Libellés coupés ou superposés |
À lire ensuite: Optimisation à grande échelle des fiches produit Shopify
Mesurez la fiche mobile par taille d'écran
Le bloc Product page de 100 Rocks affiche les variantes approuvées. L'analyse comportementale exige aussi l'application intégrée au thème et le consentement Analytics. L'entonnoir commercial complet exige le Web Pixel installé.
Les tests utilisent le trafic du bloc Product page éligible à la mesure, dans le pourcentage choisi. Ils ne ciblent ni groupe mobile, produit, page, campagne, paramètre UTM, ni partie du catalogue.
Les résultats et les seuils de sessions mesurées restent séparés par taille d'écran. À chaque seuil, le test actif promeut automatiquement la variante au meilleur indicateur observé pour cette taille.
Examinez la mise en page, les erreurs, les commandes et les retours pour chaque taille. Un résultat mobile ne s'applique pas automatiquement à une autre fiche.
