Shopify ne fonctionne pas sur mobile : que vérifier ?

Sur beaucoup de boutiques, la majorité des visites vient du téléphone. Une boutique qui n'est confortable que sur ordinateur perd donc une bonne part de ses acheteurs potentiels.

Les thèmes Shopify sont conçus pour s'adapter aux petits écrans. Les problèmes viennent presque toujours de ce qu'on y a ajouté ensuite : une application, une section personnalisée, une image trop lourde.

Une précaution avant tout : ne jugez pas sur la fenêtre réduite de votre ordinateur. Elle imite la taille de l'écran, pas le comportement d'un vrai téléphone.

1Testez sur un vrai téléphone, en 4G

Prenez votre téléphone, coupez le Wi-Fi, et parcourez la boutique comme le ferait un client : page d'accueil, une collection, une fiche produit, le panier, le paiement.

• Notez chaque endroit où vous hésitez, où vous devez zoomer, ou où quelque chose met du temps à apparaître.
• Faites-le si possible sur deux appareils (un iPhone et un Android), l'affichage peut différer.

2Des pop-ups ou bandeaux couvrent l'écran

Sur ordinateur, une fenêtre d'inscription à la newsletter reste discrète. Sur téléphone, elle peut occuper tout l'écran, avec une croix de fermeture minuscule ou hors champ.

• Vérifiez que chaque pop-up peut se fermer facilement, du bout du doigt.
• Retardez leur apparition, ou supprimez celles qui surgissent dès l'arrivée sur le site.
• Regardez aussi les bandeaux collants (cookies, promotion, chat) : empilés, ils peuvent laisser quelques centimètres seulement pour le produit.

3Le bouton Ajouter au panier est-il facile à atteindre ?

Sur une fiche produit, le bouton doit rester visible sans faire défiler la page pendant une minute, et assez large pour être touché sans viser.

• Comptez le nombre de défilements nécessaires pour atteindre le bouton depuis l'ouverture de la page.
• Vérifiez qu'un bandeau ou un widget de chat ne le recouvre pas.
• Si le bouton ne réagit pas, consultez les 7 solutions dédiées au bouton panier.

4Les images sont trop lourdes

Une photo de 4 Mo qui s'affiche sans problème sur une connexion fibre met du temps à charger en 4G, et la page semble bloquée. Ce lot d'images est l'une des causes les plus fréquentes de lenteur sur mobile.

• Redimensionnez vos photos avant de les téléverser (2000 pixels de large suffisent largement pour un produit).
• Préférez des formats légers comme le WebP, que Shopify sait aussi servir de lui-même.
• Évitez les vidéos en lecture automatique sur la page d'accueil.

5Le menu et la navigation

Sur téléphone, le menu devient un bouton « burger ». C'est ici que s'écrase souvent un menu à trois niveaux de profondeur.

• Ouvrez le menu et essayez de rejoindre une collection en trois touches au plus.
• Vérifiez que chaque niveau se déplie et se referme correctement.
• Assurez-vous que la recherche est accessible sans chercher l'icône.

6Du contenu déborde sur le côté

Vous voyez un défilement horizontal, ou une image ou un tableau coupé sur le bord de l'écran ? C'est en général un bloc à largeur fixe, ajouté à la main dans une description ou une section personnalisée.

• Repérez la page concernée, puis le bloc qui dépasse (souvent un tableau de tailles ou une image collée avec une largeur en pixels).
• Remplacez la largeur fixe par une largeur en pourcentage, ou réduisez l'élément.

7Le texte est trop petit ou trop serré

Un texte qui oblige à zoomer est une source de fatigue et d'abandon. Vérifiez la taille des descriptions, des mentions de livraison et du pied de page.

• Comparez avec la taille du texte d'un grand site d'e-commerce que vous utilisez sur votre téléphone.
• Espacez les liens du pied de page : deux liens trop proches provoquent des clics ratés.

8Une application n'a pas été pensée pour le mobile

Certaines applications (avis, badges, compte à rebours, popups) fonctionnent très bien sur ordinateur et beaucoup moins sur téléphone. Le seul moyen de le savoir est d'observer.

• Désactivez les applications une à une et retestez sur téléphone, comme pour un bouton panier en panne.
• Si une application pose problème sur mobile, écrivez à son support en joignant une capture d'écran.